手搓WxCountUp源码

发布日期: 2023-10-15

简单介绍就是：WxCountUp参照CountUp.js封装的，为微信小程序提供数据滚动的酷炫特效，以更为有趣的形式显示数值数据

一、WxCountUp实现

CountUp.js源代码使用document浏览器提供的DOM操作接口，在微信小程序中并不支持，于是WxCountUp就要求传入一个this，上下文对象来实时 **setData**改变数据。

真机调试不支持 requestAnimationFrame方法。该方法只在window 对象上实现，小程序官方并没有实现该方法，但canvas是有这个方法的，由于我们不涉猎canvas，纯setData实现数字滚动，所以就通过新的idea模拟**requestAnimationFrame**效果。

二、如何模拟requestAnimationFrame帧动画？

在web端，绘制canvas动画的时候经常使用 **window.requestAnimationFrame**这个API来回调循环帧渲染。

使用**requestAnimationFrame**将会把动画渲染周期交给浏览器统一调度，便实现更好的性能优化，但！微信小程序并不支持该Api，所以通过定时器模拟以达到同样效果。

**requestAnimationFrame**能够将原本零散的帧渲染序列进行梳理，使得页面所有动画帧都在同一周期进行渲染，以最大化利用系统资源。

一般浏览器渲染周期为60次每秒，即每次间隔大约16毫秒，因此写一个方法将渲染周期控制在16毫秒，就能够模拟出**requestAnimationFrame**的效果。

var lastFrameTime = 0;
// 模拟 requestAnimationFrame
var doAnimationFrame = function (callback) {
	var currTime = new Date().getTime();
	var timeToCall = Math.max(0, 16 - (currTime - lastFrameTime));
	var id = setTimeout(function () { callback(currTime + timeToCall); }, timeToCall);
	lastFrameTime = currTime + timeToCall;
	return id;
};
// 模拟 cancelAnimationFrame
var abortAnimationFrame = function (id) {
	clearTimeout(id)
}

现在就可以像使用 requestAnimationFrame 和 cancelAnimationFrame 一样使用 doAnimationFrame 和 abortAnimationFrame 了。

三、简单使用

import WxCountUp from '../../plugins/wx-countup/WxCountUp.js'

Page({
  data: {
    number: 0
  },
  onLoad: function () {
    // 最后一个参数必填
    this.countUp = new WxCountUp('number', 5234, {}, this);
  },

  start() {   
    this.countUp = new WxCountUp('number', 5234, {}, this); 
    // 开始动画
    this.countUp.start();
    // this.countUp.start(() => console.log('Complete!'));
  },

  pauseResume() {
    // 暂停/重新开始
    this.countUp.pauseResume();
  },

  reset() {
    // 重置
    this.countUp.reset();
  },

  update() {
    // 更新为新值
    this.countUp.update(1000);
  },
})