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

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

HarmonyOS
2024-05-21 20:52:17
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
pumayze

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

使用的核心API

@ohos.graphics.displaySync

核心代码介绍

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)

实现效果

适配版本信息

DevEco Studio Version: 4.1.3.500

SDK:HarmoneyOS 4.1.5.6

分享
微博
QQ
微信
回复
2024-05-22 17:01:25
相关问题
xComponent组件帧率怎么统计?
267浏览 • 1回复 待解决
可以用JS UI组件做进度展示吗?
4694浏览 • 1回复 待解决
JS UI框架中canvas如何动态指定宽高
5296浏览 • 1回复 待解决
是否支持web内核独立升级
471浏览 • 1回复 待解决
SurfaceProvider绘制延迟
6075浏览 • 4回复 已解决
鸿蒙如何实现位图绘制
8337浏览 • 1回复 待解决
如何操作canvas重新绘制
392浏览 • 1回复 待解决
鸿蒙UI框架没有 C++ UI框架
11891浏览 • 2回复 待解决
canvas怎么绘制资源目录下图片
230浏览 • 1回复 待解决
Canvas绘制内容如何动态更新
409浏览 • 1回复 待解决
绘制手动生成线条坐标系
361浏览 • 1回复 待解决
bitmap绘制内容需要支持清屏功能
429浏览 • 1回复 待解决
使用Drawing实现图形绘制与显示
395浏览 • 1回复 待解决
Canvas如何触发刷新重复绘制
369浏览 • 1回复 待解决