小程序条形倒计时动画实现案例

惠民小程序小编了解到，微信小程序成为当下热门话题，下面从多个方面来谈谈小程序条形倒计时动画实现案例。

最新消息， 近日， 微信官方对小程序组件进行两个调整，给用户提供更自主的选择权。 1 打开其他小程序组件上线，用户点击后就可以直接跳转到其他小程序了。 2 新增打开小程序设置页组件，用户点击后可以进入设置页管理自己的各项授权信息。 ■开发者

本篇文章主要为大家详细介绍了小程序条形倒计时动画的实现案例，非常简单，大家可以尝试一下。

一、效果图如下：

倒计时：{{t}}三、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();};})})();});}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!