微信小程序如何使用requestAnimationFrame

在微信小程序中，`requestAnimationFrame`是一个更高效的动画绘制API，它比简单的`setTimeout`或`setInterval`更适合做帧动画，因为它会在浏览器下一次重绘之前调用指定的回调函数，保证了动画的流畅性和性能。以下是使用`requestAnimationFrame`的基本步骤：

1. **导入并使用API**：

   import wx from 'wx'
   const animation = wx.requestAnimationFrame;

2. **定义动画函数**：

   function animate(timestamp) {
     // 在这里编写你的动画逻辑，如修改Canvas内容
     // 更新位置、颜色等
   }

3. **注册动画周期**：

   function startAnimation() {
     const currentTime = performance.now(); // 获取当前时间
     animation(() => {
       if (currentTime + frameDuration > nextFrameTime) {
         // 计算下一帧的时间点
         nextFrameTime = currentTime + frameDuration;
         // 调整动画逻辑
         animate(nextFrameTime);
       } else {
         // 递归请求下一个动画帧
         startAnimation();
       }
     });
   }

   // 假设frameDuration是你想要的帧间隔时间
   const frameDuration = 1000 / 60; // 每秒60帧

   // 启动动画
   startAnimation();

4. **注意停止动画**：
当不需要动画时，记得取消上一次的`requestAnimationFrame`，可以保存一个ID：

   let animationId;

   function stopAnimation() {
     if (animationId) {
       animation.cancel(animationId); // 取消动画
       animationId = null;
     }
   }

通过`requestAnimationFrame`，你可以更好地控制动画的性能，避免因过度刷新而导致页面性能下降。