刚接触小程序,项目需要做个动画的倒计时,本来
css3
的animation
用着挺好,但考虑到,微信提供了这个东东,那在这里就尝试用一用微信小程序的wx.animation
,我理解的小程序动画就是用js来控制动画的开始和结束。
动画的主要流程
第一步 实例化animation对象
const animation = wx.createAnimation()
// 也添加一些初始化参数
const animation = wx.createAnimation({
duration: 3000, // 完成一组动画需要的时间,每个animation.export()为一组动画
timingFunction: 'ease', // 完成动画的曲线类型
delay: 1000, // 动画延迟的时间 单位ms
transformOrigin: '50% 50% 0' // 和css3中的transform-origin一样,设置坐标点
})
第二步 绘制动画
// css3 中的常用过渡效果基本上都可以用wx.XXX()来代替
// eg: transform: translate(-50%,-50%) => animation.translate(-50%,-50%)
// 现在是完成一个数组的缩放动画
const animation = wx.createAnimation()
animation.scale(2, 2).step() // 表示一组动画完成。可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。
第三步 保存动画
开始的时候说了,是用js控制动画, 那就要在js和元素之间建立联系,那就需要把动画存放到data
里,再把data中存放的动画绑到元素上。
const animation = wx.createAnimation()
animation.scale(2, 2).step()
this.setData({
ani: animation.export()