uniapp requestanimationframe如何使用

在uniapp中如何使用requestAnimationFrame？我在开发动画时遇到问题，直接调用window.requestAnimationFrame会报错，提示window未定义。请问在uniapp中应该如何正确使用这个API？是否有替代方案或者需要特殊处理？能否提供一个简单的示例代码？

2 回复

在uni-app中使用requestAnimationFrame，和浏览器环境基本一致。主要用于实现高性能动画。

基本用法：

let animationId = null

function animate() {
  // 动画逻辑
  console.log('动画执行')
  
  // 循环调用
  animationId = requestAnimationFrame(animate)
}

// 启动动画
animationId = requestAnimationFrame(animate)

// 停止动画
cancelAnimationFrame(animationId)

注意事项：

  1. 小程序端也支持，但部分低版本可能有兼容问题
  2. 建议在页面卸载时清理动画：
onUnload() {
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
}

替代方案： 如果只是简单动画，也可以使用setTimeout或CSS3动画，性能可能更好。

记得根据实际需求选择合适方案，避免过度使用消耗性能。


在 UniApp 中，requestAnimationFrame 的使用与标准 Web 环境类似，主要用于优化动画性能，确保在屏幕刷新前执行动画更新。以下是具体用法：

基本使用

  1. 定义动画函数：创建一个递归函数，在每一帧更新动画状态。
  2. 启动和停止：通过 requestAnimationFrame 启动，cancelAnimationFrame 停止。

代码示例

export default {
  data() {
    return {
      animationId: null, // 存储动画ID用于停止
      position: 0 // 示例动画状态（如元素位置）
    };
  },
  methods: {
    startAnimation() {
      const animate = () => {
        // 更新动画状态（例如移动元素）
        this.position += 1;
        if (this.position > 200) this.position = 0; // 重置条件
        
        // 循环调用下一帧
        this.animationId = requestAnimationFrame(animate);
      };
      this.animationId = requestAnimationFrame(animate);
    },
    stopAnimation() {
      if (this.animationId) {
        cancelAnimationFrame(this.animationId);
        this.animationId = null;
      }
    }
  },
  onUnload() {
    // 页面卸载时停止动画，避免内存泄漏
    this.stopAnimation();
  }
};

注意事项

  • 兼容性：UniApp 已封装此 API，在 Web 和小程序平台均可使用。
  • 性能：适用于频繁更新的动画（如平移、旋转），避免在 data 中频繁更新大量数据。
  • 停止时机：务必在页面销毁时（onUnload）停止动画。

替代方案

若需复杂动画，可结合 CSS3 动画或使用 UniApp 的 animation API（小程序原生支持），减少 JavaScript 计算开销。

通过以上方法，可高效管理 UniApp 中的动画流程。

回到顶部