鸿蒙UI开发——自定义UI绘制帧率

1、概 述

随着设备屏幕的不断演进，当前主流设备采用LTPO屏幕（可变刷新率屏幕），此类屏幕支持在多个档位之间切换屏幕帧率。

对于快速变化的内容，如射击游戏，交互动画等，显示帧率越高，画面越流畅，但是相对的功耗也会越高。

而低速变化的内容，如游戏大厅，时钟更新动画等，画面更新频率较低，使用相对低的显示帧率，用户也不会觉得卡顿，但是相对的功耗就比较低。

基于显示内容的可变帧率能力，在具备LTPO屏幕的设备上，可以达到性能体验和功耗间的平衡。

HarmonyOS支持可变帧率能力，我们通过使用可变帧率接口，进行相关业务开发，可以享受可变帧率特性带来的功耗收益。

可变帧率为应用开发中的动画组件、XComponent组件、UI绘制等提供一种基础帧率配置和能力。

通过设置有效的期望绘制帧率后，系统会收集设置的请求帧率，进行决策和分发，在渲染管线上进行分频，尽量能够满足调用方的期望帧率。

【在我们自己希望独立绘制渲染一些内容时（例如使用Canvas自定义一些动态效果），也可以考虑用这种方式】

2、配置自定义UI绘制帧率

如果我们需要以独立的帧率绘制更新操作UI界面时，可以通过DisplaySync来实现。

模块如下：

import { displaySync } from '@kit.ArkGraphics2D';

创建一个DisplaySync对象方法如下：

let backDisplaySync: displaySync.DisplaySync = displaySync.create();

DisplaySync对象定义如下：

class DisplaySync {
  
    // 设置期望的帧率范围。  setExpectedFrameRateRange(rateRange: ExpectedFrameRateRange) : void  // 订阅每一帧变化  on(type: 'frame', callback: Callback<IntervalInfo>): void  // 取消订阅每一帧的变化  off(type: 'frame', callback?: Callback<IntervalInfo>): void  // 开始每帧回调  start(): void  // 停止每帧回调  stop(): void}// 设置帧率范围的入参结构如下class ExpectedFrameRateRange {
  
    min: number,  // 期望的最小帧率。  max: number,  // 期望的最大帧率。  expected: number, // 期望的最优帧率。}

此处以不同帧率改变文件组件字体大小为例，来模拟不同UI绘制帧率的效果。步骤如下：

👉🏻 step 1：导入模块并定义DisplaySync对象。​​​​​​

import { displaySync } from '@kit.ArkGraphics2D';@Entry@Componentstruct Index {
  
    // 定义两个DisplaySync变量（slow是30帧，fast是60帧），未初始化  private backDisplaySyncSlow: displaySync.DisplaySync | undefined = undefined;  private backDisplaySyncFast: displaySync.DisplaySync | undefined = undefined;}

👉🏻 step 2：定义两个文本组件。

@State drawF