小程序条形倒计时动画

一、效果图如下：

二、wxml

<view class='headpiece-time flex-row'>
 <text class='headpiece-txt'>倒计时：</text>
 <view class='headpiece-process'>
 <view class='headpiece-process-inner' style="width:{{width}}%"></view>
 </view>
 <text class='headpiece-num'>{{t}}</text>
</view>

三、wxss

.headpiece-num {
    position: absolute;
    top: -3rpx;
    right: -35rpx;
    width: 62rpx;
    height: 100%;
    text-align: center;
}

.headpiece-time {
    position: relative;
    width: 305rpx;
}

.headpiece-process {
    position: relative;
    width: 138rpx;
    height: 14rpx;
    margin-right: 14rpx;
    border: 4rpx solid #000;
    overflow: hidden;
    background: #fff4b2;
}

.headpiece-process-inner {
    position: absolute;
    top: 0rpx;
    left: 0rpx;
    background: #f74242;
    height: 100%;
    transition: all 0.3s ease-out;
}

四、index.js

/**
     * 获取系统信息
     */
    getSystemInfo: function () {
 return new Promise((a, b) => {
            wx.getSystemInfo({
                success: function (res) {
                    a(res)
 },
                fail: function (res) {
                    b(res)
 }
 })
 })
 },
 /**
     * 进度条动画
     */
    countdown: function () {
 const requestAnimationFrame = callback => {
 return setTimeout(callback, 1000 / 60);
 }, cancelAnimationFrame = id => {
            clearTimeout(id);
 };

 this.getSystemInfo().then(v => {
 let maxtime = this.data.maxtime,
                width = this.data.width,
                sTime = +new Date,
                _ts = this,
                temp, 
                animate;
 (animate = () => {
                temp = requestAnimationFrame(() => {
 let time = maxtime * 1000,
                        currentTime = +new Date,
                        schedule = 1 - (currentTime - sTime) / time,
                        schedule_1 = schedule <= 0 ? 0 : schedule,
                        width = parseInt(schedule_1 * 100),
                        t = parseInt((this.data.maxtime) * schedule_1)+1;
                    _ts.setData({
                        width: width,
                        t:t
 });
 if (schedule <= 0) {
                        cancelAnimationFrame(temp);
                        _ts.setData({
                            width: width,
                            t: 0
 });
 return;
 } else {
                        animate();
 };
 })
 })();

 });
 },

作者：谭瞎
链接：小程序条形倒计时动画-教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。