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

效果:


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>


评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值