(转)小程序实现【倒计时计时器，最后十秒只显示一位数并且加入放大动画效果】

效果：

image

image

js：

var that
// 用来实现最后十秒强调的动画
var animation = wx.createAnimation({
  duration: 300,
    timingFunction: 'ease',
})
/**
 * [倒计时函数，最后十秒只显示一个数字，且有放大动画效果]
 * @param  {Number} minutes         [分钟]
 * @param  {Number} second          [秒]
 * @param  {function} TimeoutCallback [倒计时结束执行的函数]
 */
function countDown(minutes, second, TimeoutCallback)  {
    var interval = () => {
      if (minutes > 0 && second >= 0 || second > 10){
        that.setData({
          time: minutes + ':' + second--
        })
      }else if (minutes > 0){
        minutes--;
        second = 59;
        that.setData({
          time: minutes + ':' + second--
        })
      }else if (second >= 0){
        animation.scale(1.5,1.5).step()
        animation.scale(1,1).step()
        that.setData({
          time: second--,
          animationData:animation.export()
        })
      }else{
        clearInterval(timer)
        // 倒计时结束回调
        if (typeof TimeoutCallback !== 'function'){
          return 
        }
        TimeoutCallback()
      }           
    }
    // 因为定时器会延时一个间隔单位，所以先执行一次
    interval()    
    var timer = setInterval(interval,1000)         
}
 
Page({
  onLoad: function(){
    that = this
    countDown(1,5)
  }
})

wxml：

{{time}}