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

刚接触小程序，项目需要做个动画的倒计时，本来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()
})
// 这段代码需要绑定事件，或者在生命周期等时机调用执行后才会看到动画效果

第四步 给元素绑定动画

<view animation="{{ani}}">放大view>

以上四步完成后，我们就完成了一个小程序的动画效果——放大

?-------------?-------------?-------------?-------------?-------------?-------------?-------------?

但是倒计时缩放并不是一次缩放过程，于是我就想加个 定时器 无限循环就好了，于是开始操作：

 const animation = wx.createAnimation()

 const timer = setInterval(() => {
    if (this.data.time > 0) {
    	// 动画
        animation.scale(2, 2).step()
		this.setData({
		  ani: animation.export()
		})
		// 倒计时数字
        this.data.time--
        this.setData({
            time: this.data.time
        })
     } else {
         clearInterval(timer)
     }
     console.log(this.data.time)
 }, 1000)

效果是只能进行一次放大，且保持最后的状态！纳尼！，这可不是我要的效果，于是翻阅文档，发现，微信小程序并没有一个无限循环的属性，于是就想如果能够，在每次动画完成后，恢复初始状态，再调用该动画，再加上定时器，基本可以实现循环动画的效果。

const animation = wx.createAnimation()
animation.scale(2, 2).step()
this.setData({
  ani: animation.export()
})
this.data.animation.scale(2, 2).step({ duration: 700, timingFunction: 'ease' }).scale(1, 1).step({ duration: 300, timingFunction: 'ease' })

完整代码如下：

// timer.js
Component({
    properties: {
        time: {
            type: Number,
            value: 5
        }
    },
    data: {
        animation: null
    },
    methods: {
      // 倒计时
      timer () {
        const timer = setInterval(() => {
         if (this.data.time > 0) {
             this.timerAnimationStart()
             this.setData({
                 time: --this.data.time
             })
          } else {
             this.timerAnimationStop()
             clearInterval(timer)
          }
        }, 1000)
      },
      // 初始化动画
      timerAnimationInit(){
        this.data.animation = wx.createAnimation()
      },
      // 开始执行动画
      timerAnimationStart() {
        // this.data.animation
         this.data.animation.scale(2, 2).step({ duration: 700, timingFunction: 'ease' }).scale(1, 1).step({ duration: 300, timingFunction: 'ease' })
         this.setData({
             ani: this.data.animation.export()
         })
      },
      // 停止动画
      timerAnimationStop() {
         this.data.animation.stop()
      }
    },
    // 组件的生命周期
    lifetimes: {
       attached: function () {
          // 在组件实例进入页面节点树时执行
          console.log('attached')
          // 初始化动画
          this.timerAnimationInit()
          // 启动倒计时
          this.timer()
       }
    }
})

<view animation="{{ani}}">{{time}}view>

至此倒计时效果就结束了，初次接触小程序，如果有不对，或者有问题，欢迎指正或提出讨论。