小程式實現【倒計時計時器,最後十秒只顯示一位數並且加入放大動畫效果】
阿新 • • 發佈:2019-01-05
效果:
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>