评论

情侣券-领取动画分析

动画分析

前言

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

效果

分析

  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)

总结

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

最后一次编辑于  10-05  
点赞 3
收藏
评论
登录 后发表内容