diff --git a/pages/API/animation-frame/animation-frame.uvue b/pages/API/animation-frame/animation-frame.uvue
index f9502ee74a9e30a8267b191235a0b7f8388dbbb1..2dbe25e976068a22a7b3a1731c8b392ff064cf82 100644
--- a/pages/API/animation-frame/animation-frame.uvue
+++ b/pages/API/animation-frame/animation-frame.uvue
@@ -3,7 +3,7 @@
- FPS: {{fps}} / {{formatFPSTime}}
+ FPS: {{FPSString}}
FrameCount: {{testFrameCount}}
提示: 在当前测试例子中,每增加一次调用 requestAnimationFrame 帧率翻倍,cancelAnimationFrame 后恢复
@@ -14,9 +14,8 @@
data() {
return {
title: 'AnimationFrame',
- taskId: 0,
- fps: 0,
- formatFPSTime: '0ms',
+ taskId: 0,
+ FPSString: '- / -ms',
lastTime: 0,
frameCount: 0,
testFrameCount: 0
@@ -30,24 +29,25 @@
methods: {
startRequestAnimationFrame() {
this.taskId = requestAnimationFrame((timestamp : number) => {
- this.frameCount++
- if (timestamp - this.lastTime >= 1000) {
- this.formatFPSTime = (1000 / this.frameCount).toFixed(3) + 'ms'
- this.fps = this.frameCount
- this.frameCount = 0
- this.lastTime = timestamp
- }
-
+ this.updateFPS(timestamp)
this.testFrameCount++
this.startRequestAnimationFrame()
})
},
- stopRequestAnimationFrame() {
- this.fps = 0
- this.formatFPSTime = '0ms'
+ stopRequestAnimationFrame() {
+ cancelAnimationFrame(this.taskId)
this.lastTime = 0
- this.frameCount = 0
- cancelAnimationFrame(this.taskId)
+ 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
+ }
}
}
}