独立的指定帧率来运行UI绘制

HarmonyOS

pfuchenlu

2024-05-21 20:52:17

浏览

回答 1

按赞同

按时间

pumayze

需要以独立的帧率绘制更新操作UI界面时，可以通过DisplaySync来实现绘制内容的帧率的控制。

使用的核心API

@ohos.graphics.displaySync1.

核心代码介绍

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

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事件和注册订阅函数 
}
2.开始每帧回调
Button('Start') 
  .id('CustomDrawStart') 
  .fontSize(14) 
  .fontWeight(500) 
  .margin({ bottom: 10, left: 5 }) 
  .fontColor(Color.White) 
  .onClick((): void => { 
      if (this.backDisplaySyncSlow == undefined) { 
        this.CreateDisplaySyncSlow(); 
      } 
      if (this.backDisplaySyncFast == undefined) { 
        this.CreateDisplaySyncFast(); 
      } 
      if (this.backDisplaySyncSlow) { 
        this.backDisplaySyncSlow.start(); 
      } 
      if (this.backDisplaySyncFast) { 
        this.backDisplaySyncFast.start(); 
      } 
    }) 
    .width('20%') 
    .height(40) 
    .shadow(ShadowStyle.OUTER_DEFAULT_LG)1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.