前言
这是《#小程序云开发挑战赛#-情侣券-想做就做》 的领取动画原理分析
效果
分析
- 信封动效显示
- 卡券从小到大
- 卡券从下到上
- 显示操作按钮
打开信封动效
这个是让设计师提前做好的gif
动画逻辑
- 创建一个动画对象
- 先把卡券大小缩小(默认是透明的,所以看不到缩小动画)
- 然后卡券大小放大,从透明到不透明
- 卡券上移
- 显示按钮
代码如下:
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)
总结
《参加#小程序云开发挑战赛#技术总结篇》这个系列写完了,后续情侣券会持续迭代同样我也会持续输出在这个过程中到收获。
感觉不错就点赞,收藏一下~