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

效果:


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>


阅读更多
文章标签: 倒计时
个人分类: 小程序
想对作者说点什么? 我来说一句

微信小程序-精美倒计时动画

2017年12月14日 3KB 下载

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭