小程序条形倒计时动画

一、效果图如下：

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

原著是一个有趣的人,若有侵权,请通知删除