HarmonyOS 鸿蒙Next中类似requestAnimationFrame()的API接口
HarmonyOS 鸿蒙Next中类似requestAnimationFrame()的API接口 想实现帧刷新canvas，使用setinterval API进行刷新性能很差（严重掉帧）且不能和屏幕刷新率同步，鸿蒙API没看到有requestAnimationFrame()接口
开发者您好，实现帧刷新，可使用帧动画实现，帧动画具备逐帧回调的特性，便于开发者在每一帧中处理需调整的属性，可在onFrame回调中实现您的刷新逻辑。具体可参考官网文档：帧动画（ohos.animator）。
更多关于HarmonyOS 鸿蒙Next中类似requestAnimationFrame()的API接口的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
Class (FrameCallback) 用于设置下一帧渲染时需要执行的任务。
需要配合UIContext中的postFrameCallback和postDelayedFrameCallback使用。开发者需要继承该类并重写onFrame或onIdle方法，实现具体的业务逻辑。
onFrame 在下一帧进行渲染时，该方法将被执行。
import { FrameCallback } from '@kit.ArkUI';
class MyFrameCallback extends FrameCallback {
private tag: string;
constructor(tag: string) {
super();
this.tag = tag;
}
onFrame(frameTimeNanos: number) {
console.info('MyFrameCallback ' + this.tag + ' ' + frameTimeNanos.toString());
}
}
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
Button('点击触发postFrameCallback')
.onClick(() => {
this.getUIContext().postFrameCallback(new MyFrameCallback("normTask"));
})
Button('点击触发postDelayedFrameCallback')
.onClick(() => {
this.getUIContext().postDelayedFrameCallback(new MyFrameCallback("delayTask"), 5);
})
}
.width('100%')
}
.height('100%')
}
}
在鸿蒙（HarmonyOS）中，可通过 @ohos.animation 模块的 requestAnimationFrame() 实现与屏幕刷新率同步的 Canvas 帧刷新，替代性能低下的 setInterval。
FrameNode
FrameNode是UI框架中用于描述组件布局和渲染信息的节点对象。每个组件对应一个FrameNode，开发者可以通过FrameNode获取组件的布局和渲染信息。
属性
id
id: string
组件的唯一标识。
type
type: string
组件的类型。
globalOffset
globalOffset: Point
组件相对于屏幕左上角的偏移量。
position
position: Point
组件相对于父组件左上角的偏移量。
size
size: Size
组件的尺寸。
scale
scale: Scale
组件的缩放比例。
pivot
pivot: Point
组件的缩放和旋转中心点。
rotation
rotation: number
组件的旋转角度，单位为弧度。
opacity
opacity: number
组件的不透明度。
transformMatrix
transformMatrix: Matrix4
组件的变换矩阵。
visible
visible: boolean
组件是否可见。
clip
clip: boolean
组件是否被裁剪。
clipRect
clipRect: Rect
组件的裁剪区域。
zIndex
zIndex: number
组件的Z轴顺序。
renderGroup
renderGroup: boolean
组件是否启用渲染组。
renderGroupId
renderGroupId: string
渲染组的ID。
renderGroupOpacity
renderGroupOpacity: number
渲染组的不透明度。
renderGroupTransformMatrix
renderGroupTransformMatrix: Matrix4
渲染组的变换矩阵。
renderGroupClipRect
renderGroupClipRect: Rect
渲染组的裁剪区域。
renderGroupVisible
renderGroupVisible: boolean
渲染组是否可见。
renderGroupZIndex
renderGroupZIndex: number
渲染组的Z轴顺序。
renderGroupClip
renderGroupClip: boolean
渲染组是否被裁剪。
renderGroupScale
renderGroupScale: Scale
渲染组的缩放比例。
renderGroupRotation
renderGroupRotation: number
渲染组的旋转角度，单位为弧度。
renderGroupPivot
renderGroupPivot: Point
渲染组的缩放和旋转中心点。
renderGroupGlobalOffset
renderGroupGlobalOffset: Point
渲染组相对于屏幕左上角的偏移量。
renderGroupPosition
renderGroupPosition: Point
渲染组相对于父组件左上角的偏移量。
renderGroupSize
renderGroupSize: Size
渲染组的尺寸。
renderGroupOpacityAnimation
renderGroupOpacityAnimation: Animation
渲染组的不透明度动画。
renderGroupTransformMatrixAnimation
renderGroupTransformMatrixAnimation: Animation
渲染组的变换矩阵动画。
renderGroupClipRectAnimation
renderGroupClipRectAnimation: Animation
渲染组的裁剪区域动画。
renderGroupVisibleAnimation
renderGroupVisibleAnimation: Animation
渲染组的可见性动画。
renderGroupZIndexAnimation
renderGroupZIndexAnimation: Animation
渲染组的Z轴顺序动画。
renderGroupClipAnimation
renderGroupClipAnimation: Animation
渲染组的裁剪动画。
renderGroupScaleAnimation
renderGroupScaleAnimation: Animation
渲染组的缩放动画。
renderGroupRotationAnimation
renderGroupRotationAnimation: Animation
渲染组的旋转动画。
renderGroupPivotAnimation
renderGroupPivotAnimation: Animation
渲染组的中心点动画。
renderGroupGlobalOffsetAnimation
renderGroupGlobalOffsetAnimation: Animation
渲染组的全局偏移量动画。
renderGroupPositionAnimation
renderGroupPositionAnimation: Animation
渲染组的位置动画。
renderGroupSizeAnimation
renderGroupSizeAnimation: Animation
渲染组的尺寸动画。
renderGroupOpacityAnimationValue
renderGroupOpacityAnimationValue: number
渲染组的不透明度动画值。
renderGroupTransformMatrixAnimationValue
renderGroupTransformMatrixAnimationValue: Matrix4
渲染组的变换矩阵动画值。
renderGroupClipRectAnimationValue
renderGroupClipRectAnimationValue: Rect
渲染组的裁剪区域动画值。
renderGroupVisibleAnimationValue
renderGroupVisibleAnimationValue: boolean
渲染组的可见性动画值。
renderGroupZIndexAnimationValue
renderGroupZIndexAnimationValue: number
渲染组的Z轴顺序动画值。
renderGroupClipAnimationValue
renderGroupClipAnimationValue: boolean
渲染组的裁剪动画值。
renderGroupScaleAnimationValue
renderGroupScaleAnimationValue: Scale
渲染组的缩放动画值。
renderGroupRotationAnimationValue
renderGroupRotationAnimationValue: number
渲染组的旋转动画值。
renderGroupPivotAnimationValue
renderGroupPivotAnimationValue: Point
渲染组的中心点动画值。
renderGroupGlobalOffsetAnimationValue
renderGroupGlobalOffsetAnimationValue: Point
渲染组的全局偏移量动画值。
renderGroupPositionAnimationValue
renderGroupPositionAnimationValue: Point
渲染组的位置动画值。
renderGroupSizeAnimationValue
renderGroupSizeAnimationValue: Size
渲染组的尺寸动画值。
renderGroupOpacityAnimationDuration
renderGroupOpacityAnimationDuration: number
渲染组的不透明度动画时长。
renderGroupTransformMatrixAnimationDuration
renderGroupTransformMatrixAnimationDuration: number
渲染组的变换矩阵动画时长。
renderGroupClipRectAnimationDuration
renderGroupClipRectAnimationDuration: number
渲染组的裁剪区域动画时长。
renderGroupVisibleAnimationDuration
renderGroupVisibleAnimationDuration: number
渲染组的可见性动画时长。
renderGroupZIndexAnimationDuration
renderGroupZIndexAnimationDuration: number
渲染组的Z轴顺序动画时长。
renderGroupClipAnimationDuration
renderGroupClipAnimationDuration: number
渲染组的裁剪动画时长。
renderGroupScaleAnimationDuration
renderGroupScaleAnimationDuration: number
渲染组的缩放动画时长。
renderGroupRotationAnimationDuration
renderGroupRotationAnimationDuration: number
渲染组的旋转动画时长。
renderGroupPivotAnimationDuration
renderGroupPivotAnimationDuration: number
渲染组的中心点动画时长。
renderGroupGlobalOffsetAnimationDuration
renderGroupGlobalOffsetAnimationDuration: number
渲染组的全局偏移量动画时长。
renderGroupPositionAnimationDuration
renderGroupPositionAnimationDuration: number
渲染组的位置动画时长。
renderGroupSizeAnimationDuration
renderGroupSizeAnimationDuration: number
渲染组的尺寸动画时长。
renderGroupOpacityAnimationDelay
renderGroupOpacityAnimationDelay: number
渲染组的不透明度动画延迟时间。
renderGroupTransformMatrixAnimationDelay
renderGroupTransformMatrixAnimationDelay: number
渲染组的变换矩阵动画延迟时间。
renderGroupClipRectAnimationDelay
renderGroupClipRectAnimationDelay: number
渲染组的裁剪区域动画延迟时间。
renderGroupVisibleAnimationDelay
renderGroupVisibleAnimationDelay: number
渲染组的可见性动画延迟时间。
renderGroupZIndexAnimationDelay
renderGroupZIndexAnimationDelay: number
渲染组的Z轴顺序动画延迟时间。
renderGroupClipAnimationDelay
renderGroupClipAnimationDelay: number
渲染组的裁剪动画延迟时间。
renderGroupScaleAnimationDelay
renderGroupScaleAnimationDelay: number
渲染组的缩放动画延迟时间。
renderGroupRotationAnimationDelay
renderGroupRotationAnimationDelay: number
渲染组的旋转动画延迟时间。
renderGroupPivotAnimationDelay
renderGroupPivotAnimationDelay: number
渲染组的中心点动画延迟时间。
renderGroupGlobalOffsetAnimationDelay
renderGroupGlobalOffsetAnimationDelay: number
渲染组的全局偏移量动画延迟时间。
renderGroupPositionAnimationDelay
renderGroupPositionAnimationDelay: number
渲染组的位置动画延迟时间。
renderGroupSizeAnimationDelay
renderGroupSizeAnimationDelay: number
渲染组的尺寸动画延迟时间。
renderGroupOpacityAnimationIterationCount
renderGroupOpacityAnimationIterationCount: number
渲染组的不透明度动画迭代次数。
renderGroupTransformMatrixAnimationIterationCount
renderGroupTransformMatrixAnimationIterationCount: number
渲染组的变换矩阵动画迭代次数。
renderGroupClipRectAnimationIterationCount
renderGroupClipRectAnimationIterationCount: number
渲染组的裁剪区域动画迭代次数。
renderGroupVisibleAnimationIterationCount
renderGroupVisibleAnimationIterationCount: number
渲染组的可见性动画迭代次数。
renderGroupZIndexAnimationIterationCount
renderGroupZIndexAnimationIterationCount: number
渲染组的Z轴顺序动画迭代次数。
renderGroupClipAnimationIterationCount
renderGroupClipAnimationIterationCount: number
渲染组的裁剪动画迭代次数。
renderGroupScaleAnimationIterationCount
renderGroupScaleAnimationIterationCount: number
渲染组的缩放动画迭代次数。
renderGroupRotationAnimationIterationCount
renderGroupRotationAnimationIterationCount: number
渲染组的旋转动画迭代次数。
renderGroupPivotAnimationIterationCount
renderGroupPivotAnimationIterationCount: number
渲染组的中心点动画迭代次数。
renderGroupGlobalOffsetAnimationIterationCount
renderGroupGlobalOffsetAnimationIterationCount: number
渲染组的全局偏移量动画迭代次数。
renderGroupPositionAnimationIterationCount
renderGroupPositionAnimationIterationCount: number
渲染组的位置动画迭代次数。
renderGroupSizeAnimationIterationCount
renderGroupSizeAnimationIterationCount: number
渲染组的尺寸动画迭代次数。
renderGroupOpacityAnimationDirection
renderGroupOpacityAnimationDirection: AnimationDirection
渲染组的不透明度动画方向。
renderGroupTransformMatrixAnimationDirection
renderGroupTransformMatrixAnimationDirection: AnimationDirection
渲染组的变换矩阵动画方向。
renderGroupClipRectAnimationDirection
renderGroupClipRectAnimationDirection: AnimationDirection
渲染组的裁剪区域动画方向。
renderGroupVisibleAnimationDirection
renderGroupVisibleAnimationDirection: AnimationDirection
渲染组的可见性动画方向。
renderGroupZIndexAnimationDirection
renderGroupZIndexAnimationDirection: AnimationDirection
渲染组的Z轴顺序动画方向。
renderGroupClipAnimationDirection
renderGroupClipAnimationDirection: AnimationDirection
渲染组的裁剪动画方向。
renderGroupScaleAnimationDirection
renderGroupScaleAnimationDirection: AnimationDirection
渲染组的缩放动画方向。
renderGroupRotationAnimationDirection
renderGroupRotationAnimationDirection: AnimationDirection
渲染组的旋转动画方向。
renderGroupPivotAnimationDirection
renderGroupPivotAnimationDirection: AnimationDirection
渲染组的中心点动画方向。
renderGroupGlobalOffsetAnimationDirection
renderGroupGlobalOffsetAnimationDirection: AnimationDirection
渲染组的全局偏移量动画方向。
renderGroupPositionAnimationDirection
renderGroupPositionAnimationDirection: AnimationDirection
渲染组的位置动画方向。
renderGroupSizeAnimationDirection
renderGroupSizeAnimationDirection: AnimationDirection
渲染组的尺寸动画方向。
renderGroupOpacityAnimationFillMode
renderGroupOpacityAnimationFillMode: AnimationFillMode
渲染组的不透明度动画填充模式。
renderGroupTransformMatrixAnimationFillMode
renderGroupTransformMatrixAnimationFillMode: AnimationFillMode
渲染组的变换矩阵动画填充模式。
renderGroupClipRectAnimationFillMode
renderGroupClipRectAnimationFillMode: AnimationFillMode
渲染组的裁剪区域动画填充模式。
renderGroupVisibleAnimationFillMode
renderGroupVisibleAnimationFillMode: AnimationFillMode
渲染组的可见性动画填充模式。
renderGroupZIndexAnimationFillMode
renderGroupZIndexAnimationFillMode: AnimationFillMode
渲染组的Z轴顺序动画填充模式。
renderGroupClipAnimationFillMode
renderGroupClipAnimationFillMode: AnimationFillMode
渲染组的裁剪动画填充模式。
renderGroupScaleAnimationFillMode
renderGroupScaleAnimationFillMode: AnimationFillMode
渲染组的缩放动画填充模式。
renderGroupRotationAnimationFillMode
renderGroupRotationAnimationFillMode: AnimationFillMode
渲染组的旋转动画填充模式。
renderGroupPivotAnimationFillMode
renderGroupPivotAnimationFillMode: AnimationFillMode
渲染组的中心点动画填充模式。
renderGroupGlobalOffsetAnimationFillMode
renderGroupGlobalOffsetAnimationFillMode: AnimationFillMode
渲染组的全局偏移量动画填充模式。
renderGroupPositionAnimationFillMode
renderGroupPositionAnimationFillMode: AnimationFillMode
渲染组的位置动画填充模式。
renderGroupSizeAnimationFillMode
renderGroupSizeAnimationFillMode: AnimationFillMode
渲染组的尺寸动画填充模式。
renderGroupOpacityAnimationTimingFunction
renderGroupOpacityAnimationTimingFunction: AnimationTimingFunction
渲染组的不透明度动画时间函数。
renderGroupTransformMatrixAnimationTimingFunction
renderGroupTransformMatrixAnimationTimingFunction: AnimationTimingFunction
渲染组的变换矩阵动画时间函数。
renderGroupClipRectAnimationTimingFunction
renderGroupClipRectAnimationTimingFunction: AnimationTimingFunction
渲染组的裁剪区域动画时间函数。
renderGroupVisibleAnimationTimingFunction
renderGroupVisibleAnimationTimingFunction: AnimationTimingFunction
渲染组的可见性动画时间函数。
renderGroupZIndexAnimationTimingFunction
renderGroupZIndexAnimationTimingFunction: AnimationTimingFunction
渲染组的Z轴顺序动画时间函数。
renderGroupClipAnimationTimingFunction
renderGroupClipAnimationTimingFunction: AnimationTimingFunction
渲染组的裁剪动画时间函数。
renderGroupScaleAnimationTimingFunction
renderGroupScaleAnimationTimingFunction: AnimationTimingFunction
渲染组的缩放动画时间函数。
renderGroupRotationAnimationTimingFunction
renderGroupRotationAnimationTimingFunction: AnimationTimingFunction
渲染组的旋转动画时间函数。
renderGroupPivotAnimationTimingFunction
renderGroupPivotAnimationTimingFunction: AnimationTimingFunction
渲染组的中心点动画时间函数。
renderGroupGlobalOffsetAnimationTimingFunction
renderGroupGlobalOffsetAnimationTimingFunction: AnimationTimingFunction
渲染组的全局偏移量动画时间函数。
renderGroupPositionAnimationTimingFunction
renderGroupPositionAnimationTimingFunction: AnimationTimingFunction
渲染组的位置动画时间函数。
renderGroupSizeAnimationTimingFunction
renderGroupSizeAnimationTimingFunction: AnimationTimingFunction
渲染
在HarmonyOS Next中，类似requestAnimationFrame()的API是requestAnimationFrame()。该接口用于在下一个动画帧执行回调函数，通常用于实现流畅的动画效果。开发者可以通过window对象调用此方法，并传入回调函数作为参数。回调函数会在浏览器重绘之前执行，确保动画与屏幕刷新同步。
在HarmonyOS Next中，你可以使用 displaySync 模块来实现与屏幕刷新率同步的高性能帧回调，其功能与Web中的requestAnimationFrame()类似，是进行Canvas动画或高性能UI刷新的推荐方式。
核心API：displaySync.on('frame')
该API允许你注册一个回调函数，系统会在每次屏幕刷新（通常是60Hz或120Hz）前调用它，从而实现流畅的动画效果并避免不必要的绘制。
基本使用示例：
import displaySync from '@ohos.displaySync';
// 1. 创建一个显示同步任务
let syncTask = displaySync.createSyncTask();
// 2. 定义每一帧要执行的回调函数
let frameCallback = () => {
// 在这里更新你的Canvas动画状态或进行绘制
updateCanvasAnimation();
// 请求下一帧
syncTask.on('frame', frameCallback);
}
// 3. 启动帧回调
syncTask.on('frame', frameCallback);
// 4. 当需要停止动画时（例如页面销毁），务必取消回调并释放资源
// syncTask.off('frame');
// syncTask.destroy();
关键优势：
- 与VSync同步：确保绘制节奏与屏幕刷新完全一致，消除撕裂和跳帧。
- 自动暂停：当应用切换到后台或页面不可见时，回调会自动暂停，节省系统资源。
- 高性能：相比
setInterval或setTimeout，它避免了不必要的渲染和电池浪费。
注意事项：
- 确保在应用生命周期合适的地方（如
aboutToDisappear）调用syncTask.off('frame')和syncTask.destroy()来清理任务，防止内存泄漏。 - 回调函数内的执行逻辑应尽量轻量，长时间阻塞会影响整体流畅度。
对于Canvas的具体绘制，你仍然需要使用Canvas的API（如RenderingContext2D）在回调函数中进行绘制操作。这个displaySync机制为你提供了最佳的定时触发时机。
