微信小程序实现渐入渐出动画效果

站长资源 2024/11/26 佚名

2 0 1

前言

在做小程序列表展示的时候，接到了一个需求。需要在列表展示的时候加上动画效果。设计视频效果如下图：

需要在进入列表页的时候，依次展示每一条卡片，在展示完成后需要隐藏掉当天之前的卡片。

实现思路

实现该动画效果，首先需要给每个卡片添加一个css动画。因为每个卡片的显示是有时间间隔的，以及考虑到展示完成后的隐藏效果，所以动画效果需要用js动态去添加。在看了微信开发文档后，发现微信小程序提供了Animation的一个动画对象，具体看了里面的参数后发现，是可以实现需求上的效果的。具体使用如下api:

wx.createAnimation(Object object) 创建一个animation对象。最后通过动画实例的export方法导出动画数据传递给组件的 animation 属性。里面有如下参数：duration（动画持续时间，单位 ms）,timingFunction（动画的国度效果）,delay（动画延迟）

创建的animation对象，本次实现过程中需要用到如下属性：

Animation.export() 可以导出动画队列，export 方法每次调用后会清掉之前的动画操作。
Animation.step(Object object) 表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。比如一组动画结束了，就以step()结尾
Animation.translateY(number translation) 在 Y 轴平移的距离，单位为 px
Animation.opacity(number value) 透明度 0-1的取值范围

看到上面这些属性，合理使用的话，那么实现需求提到动画效果那是稳稳的。

实现步骤

封装一个方法，用来创建动画，并方便调用

 /**
 * 动画实现
 * @method animationShow
 * @param {that} 当前卡片
 * @param {opacity} 透明度
 * @param {delay} 延迟
 * @param {isUp} 移动方向
 */
 animationShow: function (that,opacity, delay, isUp) {
 let animation = wx.createAnimation({
  duration: 1000,
  timingFunction: 'ease',
  delay: delay
 });
 <!--考虑到还需要隐藏掉当天之前的卡片，做如下判断来赋予不同的动画效果-->
 if (isUp == 'down') {
  animation.translateY(0).opacity(opacity).step().translateY(-80).step();
 } else if (isUp == 'up') {
  animation.translateY(0).opacity(opacity).step().translateY(-140).opacity(0).step()
 } else {
  animation.translateY(0).opacity(opacity).step()
 }
 let params = ''
 params = animation.export()
 return params
 },

初始化每个卡片的样式

首先每个卡片的位置相对于自身往Y轴平移80像素，并且把透明度设置为0。这样就可以进入页面的时候再往下平移并且让卡片逐渐显示。

.init{
 opacity: 0;
 transform: translateY(-80px)
}

处理数据

循环处理每一条数据，通过调用封装的方法，来获得该卡片应该拥有的动画属性

 for (let i = 0; i < transData.length; i++) {
 if (i == 0) {
  transData[i].animation = that.app.slideupshow(that, 1, 0, 'up')
 } else {
  transData[i].animation = that.app.slideupshow(that, 1, (i + 1) * 10, 'down')
 }
 }

给每个卡片附加animation属性

<view class="init" animation="{{item.animation}}">

实现效果

跟设计视频中的动画风格基本保持一致，美滋滋。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。

微信小程序动画详解,微信小程序渐入渐出动画

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“微信小程序实现渐入渐出动画效果”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

微信小程序实现渐入渐出动画效果

json数据格式常见操作示例

微信小程序前端自定义分享的实现方法

评论“微信小程序实现渐入渐出动画效果”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接