uni中animation压屏倒计时

uni是目前，微信小程序中常用的第三方框架，可以输出不限于微信小程序的多平台h5，app等。类似还有基于react的taro，而uni语法基于主流的vue2.x。

压屏倒计时

初始化animation

<view>
  <view :animation="animation">{{time}}</view>
</view>
...
const animation = uni.createAnimation({
                  duration: 1000,
                  timingFunction: 'ease', // 同等于css
                  // delay: 0
                  })

类似游戏压屏倒计时

// 每次开始前重置
animation.scale(1).step({
   duration:0
})
this.animation=animation.export() // 导出动画
// 等待重置完成
const ani=setTimeout(()=>{
      animation.scale(2).step({
        duration:1000
      })
    this.animation=animation.export()
},100)
ani()
// 或定时器替换
// new Promise((resolve,reject)=>{
//          animation.scale(1).step({
//                  duration:0
//          })
//          this.animation=animation.export()
//                      resolve()
//          }).then(()=>{
//              animation.scale(2).step({
//              duration:1000
//              })
//              this.animation=animation.export()
// })
//   这步主要实现下一次的缩放为正常的从小到大而不是；直接step后继续写会导致重置失效,表现为3,2一样大

// 数字停顿的时间
    const timer=setInterval(()=>{
        this.time--
        if(this.time<=0) {
            clearInterval(timer)
            this.time=3;
             this.animation={}
            }else{
                 ani()
    }
},1200) // 1200和1000的差为最后数字停顿的毫秒数。