
简体中文
在下一次重绘之前,调用用户提供的回调函数
参数
名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |
---|---|---|---|---|---|
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 | - |
参见
取消一个先前通过调用 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 | - |
参见
示例为hello uni-app x alpha分支,与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见
示例
<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>
<script>
export default {
data() {
return {
title: 'AnimationFrame',
taskId: 0,
FPSString: '- / -ms',
lastTime: 0,
frameCount: 0,
testFrameCount: 0
}
},
onUnload() {
if (this.taskId > 0) {
this.stopRequestAnimationFrame()
}
},
methods: {
startRequestAnimationFrame() {
this.taskId = requestAnimationFrame((timestamp : number) => {
this.updateFPS(timestamp)
this.testFrameCount++
this.startRequestAnimationFrame()
})
},
stopRequestAnimationFrame() {
cancelAnimationFrame(this.taskId)
this.lastTime = 0
this.frameCount = 0
this.FPSString = '- / -ms'
},
updateFPS(timestamp : number) {
this.frameCount++
if (timestamp - this.lastTime >= 1000) {
const timeOfFrame = (1000 / this.frameCount)
this.FPSString = `${this.frameCount} / ${timeOfFrame.toFixed(3)}ms`
this.frameCount = 0
this.lastTime = timestamp
}
}
}
}
</script>
<style>
.page {
padding: 15px;
}
.frame-count {
margin-top: 15px;
}
.tips {
font-size: 12px;
margin-top: 30px;
opacity: 0.7;
}
</style>
提示
Android uni-app x
requestAnimationframe 目前仅支持有参数callback,示例:requestAnimationFrame((timestamp : number) => {})