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

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

一、效果图如下：

二、wxml

1. <view class='headpiece-time flex-row'>
2. <text class='headpiece-txt'>倒计时：</text>
3. <view class='headpiece-process'>
4. <view class='headpiece-process-inner' style="width:{{width}}%"></view>
5. </view>
6. <text class='headpiece-num'>{{t}}</text>
7. </view>

三、wxss

1. .headpiece-num {
2. position: absolute;
3. top: -3rpx;
4. right: -35rpx;
5. width: 62rpx;
6. height: 100%;
7. text-align: center;
8. }
9.  
10. .headpiece-time {
11. position: relative;
12. width: 305rpx;
13. }
14.  
15. .headpiece-process {
16. position: relative;
17. width: 138rpx;
18. height: 14rpx;
19. margin-right: 14rpx;
20. border: 4rpx solid #000;
21. overflow: hidden;
22. background: #fff4b2;
23. }
24.  
25. .headpiece-process-inner {
26. position: absolute;
27. top: 0rpx;
28. left: 0rpx;
29. background: #f74242;
30. height: 100%;
31. transition: all 0.3s ease-out;
32. }

四、index.js

1. /**
2. * 获取系统信息
3. */
4. getSystemInfo: function () {
5. return new Promise((a, b) => {
6. wx.getSystemInfo({
7. success: function (res) {
8. a(res)
9. },
10. fail: function (res) {
11. b(res)
12. }
13. })
14. })
15. },
16. /**
17. * 进度条动画
18. */
19. countdown: function () {
20. const requestAnimationFrame = callback => {
21. return setTimeout(callback, 1000 / 60);
22. }, cancelAnimationFrame = id => {
23. clearTimeout(id);
24. };
25.  
26. this.getSystemInfo().then(v => {
27. let maxtime = this.data.maxtime,
28. width = this.data.width,
29. sTime = +new Date,
30. _ts = this,
31. temp,
32. animate;
33. (animate = () => {
34. temp = requestAnimationFrame(() => {
35. let time = maxtime * 1000,
36. currentTime = +new Date,
37. schedule = 1 - (currentTime - sTime) / time,
38. schedule_1 = schedule <= 0 ? 0 : schedule,
39. width = parseInt(schedule_1 * 100),
40. t = parseInt((this.data.maxtime) * schedule_1)+1;
41. _ts.setData({
42. width: width,
43. t:t
44. });
45. if (schedule <= 0) {
46. cancelAnimationFrame(temp);
47. _ts.setData({
48. width: width,
49. t: 0
50. });
51. return;
52. } else {
53. animate();
54. };
55. })
56. })();
57.  
58. });
59. },