微信小程序动画-倒计时缩放

刚接触小程序，项目需要做个动画的倒计时，本来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()
}