小程序条形倒计时动画

一、效果图如下：

process.gif

二、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();
                    };
                })
            })();

        });
    },