1. 程式人生 > >小程式實現【倒計時計時器,最後十秒只顯示一位數並且加入放大動畫效果】

小程式實現【倒計時計時器,最後十秒只顯示一位數並且加入放大動畫效果】

效果:


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:

<view style="display: inline-block;" animation="{{animationData}}">{{time}}</view>