前言

这是《#小程序云开发挑战赛#-情侣券-想做就做》 的领取动画原理分析

效果

分析

1. 信封动效显示
2. 卡券从小到大
3. 卡券从下到上
4. 显示操作按钮

打开信封动效

这个是让设计师提前做好的gif

动画逻辑

1. 创建一个动画对象
2. 先把卡券大小缩小（默认是透明的，所以看不到缩小动画）
3. 然后卡券大小放大，从透明到不透明
4. 卡券上移
5. 显示按钮

代码如下：

setTimeout(function () {
            var animation = wx.createAnimation({
              duration: 800,
              timingFunction: 'ease',
            })
            animation.scale(0, 0).step()
            animation.scale(1, 1).opacity(1).step()
            animation.translateY(-100).step()
            that.setData({
              animationData: animation.export()
            })
          }, 500)

          setTimeout(function () {
            that.setData({
              showBtn: true
            })
          }, 2800)

总结

《参加#小程序云开发挑战赛#技术总结篇》这个系列写完了，后续情侣券会持续迭代同样我也会持续输出在这个过程中到收获。
感觉不错就点赞，收藏一下～