# requestAnimationFrame(callback)

在下一次重绘之前,调用用户提供的回调函数

参数

名称 类型 必填 默认值 兼容性 描述
callback (task: number) => void - - -

返回值

类型
number

兼容性

uni-app x 兼容性

Web Android iOS HarmonyOS Android UTS 插件 iOS UTS 插件 HarmonyOS UTS 插件
4.0 4.25 4.25 4.61 4.25 x -

uni-app 兼容性

Android UTS 插件 iOS UTS 插件 HarmonyOS UTS 插件
x x -

参见

相关 Bug

# cancelAnimationFrame(taskId)

取消一个先前通过调用 requestAnimationFrame() 方法添加到计划中的动画帧请求

参数

名称 类型 必填 默认值 兼容性 描述
taskId number - - -

返回值

类型
void

兼容性

uni-app x 兼容性

Web Android iOS HarmonyOS Android UTS 插件 iOS UTS 插件 HarmonyOS UTS 插件
4.0 4.25 4.25 4.61 4.25 x -

uni-app 兼容性

Android UTS 插件 iOS UTS 插件 HarmonyOS UTS 插件
x x -

参见

相关 Bug

# 示例

hello uni-app x

扫码体验(手机浏览器跳转到App直达页)

Template

Script

<template>
  <view class="page">
    <page-head :title="title"></page-head>
    <button @click="startRequestAnimationFrame">requestAnimationFrame</button>
    <button @click="stopRequestAnimationFrame">cancelAnimationFrame</button>
    <text class="frame-count">FPS: {{FPSString}}</text>
    <text class="frame-count">FrameCount: {{testFrameCount}}</text>
    <text class="tips">提示: 在当前测试例子中,每增加一次调用 requestAnimationFrame 帧率翻倍,cancelAnimationFrame 后恢复</text>
  </view>
</template>



<style>
  .page {
    padding: 15px;
  }

  .frame-count {
    margin-top: 15px;
  }

  .tips {
    font-size: 12px;
    margin-top: 30px;
    opacity: 0.7;
  }
</style>

提示

  • requestAnimationFrame/cancelAnimationFrame 为全局 API,如果需要跨平台处理 canvas 动画应使用 uni.createCanvasContextAsync
  • Android uni-app x requestAnimationframe 目前仅支持有参数callback,示例:requestAnimationFrame((timestamp : number) => {})