前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序-渐入渐出动画效果实现

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

作者头像
腾讯NEXT学位
修改2019-08-12 15:18:58
3K0
修改2019-08-12 15:18:58
举报
文章被收录于专栏:腾讯NEXT学位

在做小程序列表展示的时候,接到了一个需求。需要在列表展示的时候加上动画效果。在此献上小程序动画效果的教程。

前言

动画效果需要在进入列表页的时候,依次展示每一条卡片,在展示完成后需要隐藏掉当天之前的卡片。设计视频效果如下图:

实现思路

实现该动画效果,首先需要给每个卡片添加一个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的取值范围。

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

实现步骤

1

封装

封装

一个方法,用来创建动画,并方便调用。

代码语言:javascript
复制
/**
 * 动画实现
 * @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
  },

2

初始化

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

代码语言:javascript
复制
.init{  
    opacity: 0;  
    transform: translateY(-80px)
    }

3

处理数据

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

代码语言:javascript
复制
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')
    }
  }

结束语

理解思路并按着步骤做就可以跟设计视频中的动画风格基本保持一致,以上就是对小程序中实现渐进渐出的动画效果的办法啦,有什么更简介更好的方法大家也可以提出来哦。

原文作者:Rolan

原文地址:

http://www.wxapp-union.com/portal.php?mod=view&aid=5201

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-08-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 腾讯NEXT学院 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 初始化每个卡片的样式。首先每个卡片的位置相对于自身往Y轴平移80像素,并且把透明度设置为0。这样就可以进入页面的时候再往下平移并且让卡片逐渐显示。
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档