OpenHarmony实战开发-请求UI绘制帧率

如果开发者需要以独立的帧率绘制更新操作UI界面时，可以通过DisplaySync来实现。应用中绘制内容的帧率可以使用DisplaySync实例来控制。

开发步骤

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

1.导入模块。

import displaySync from '@ohos.graphics.displaySync';

2.定义和构建DisplaySync对象。

@Entry
@Component
struct Index {
   
  // 定义两个DisplaySync变量，未初始化
  private backDisplaySyncSlow: displaySync.DisplaySync | undefined = undefined;
  private backDisplaySyncFast: displaySync.DisplaySync | undefined = undefined;
}

3.定义两个文本组件。

@State drawFirstSize: number = 25;
@State drawSecondSize: number = 25;
@Builder doSomeRenderFirst() {
   
 Text('30')
   .fontSize(this.drawFirstSize)
}

@Builder doSomeRenderSecond() {
   
 Text('60')
   .fontSize(this.drawSecondSize)
}

4.通过DisplaySync实例设置帧率和注册订阅函数。

说明：

订阅函数运行于UI主线程，故涉及UI线程的耗时操作不应运行于订阅函数中，以免影响性能。

CreateDisplaySyncSlow() {
   
    let range : ExpectedFrameRateRange = {
    // 创建和配置帧率参数
      expected: 30, // 设置期望绘制帧率为30hz
      min: 0, // 配置帧率范围
      max: 120 // 配置帧率范围
    };

    let draw30 = (intervalInfo: displaySync.IntervalInfo) => {
    // 订阅回调函数，字体大小在25到150之间变化
      if (this.isBigger_30) {
   
        this.drawFirstSize += 1;
        if (this.drawFirstSize > 150) {
   
          this.isBigger_30 = false;
        }
      } else {
   
        this.drawFirstSize -= 1;
        if (this.drawFirstSize < 25) {
   
          this.isBigger_30 = true;
        }
      }
    };

    this.backDisplaySyncSlow = displaySync.create(); // 创建DisplaySync实例
    this.backDisplaySyncSlow.setExpectedFrameRateRange(range); // 设置帧率
    this.backDisplaySyncSlow.on("frame", draw30); // 订阅frame事件和注册订阅函数
}

5.开始每帧回调。

Button('Start')
  .id('CustomDrawStart')
  .fontSize(14)
  .fontWeight(500)
  .margin({
    bottom: 10, left: 5 })
  .fontColor(Color.White)
  .onClick((