打开无忧管理后台网站,医疗器械网站建设,甘肃建设网站首页,怎么优化网站源代码1、概 述
随着设备屏幕的不断演进#xff0c;当前主流设备采用LTPO屏幕#xff08;可变刷新率屏幕#xff09;#xff0c;此类屏幕支持在多个档位之间切换屏幕帧率。
对于快速变化的内容#xff0c;如射击游戏#xff0c;交互动画等#xff0c;显示帧率越高#xff0…
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: CallbackIntervalInfo): void // 取消订阅每一帧的变化 off(type: frame, callback?: CallbackIntervalInfo): void // 开始每帧回调 start(): void // 停止每帧回调 stop(): void}// 设置帧率范围的入参结构如下class ExpectedFrameRateRange { min: number, // 期望的最小帧率。 max: number, // 期望的最大帧率。 expected: number, // 期望的最优帧率。}
此处以不同帧率改变文件组件字体大小为例来模拟不同UI绘制帧率的效果。步骤如下 step 1导入模块并定义DisplaySync对象。
import { displaySync } from kit.ArkGraphics2D;EntryComponentstruct Index { // 定义两个DisplaySync变量slow是30帧fast是60帧未初始化 private backDisplaySyncSlow: displaySync.DisplaySync | undefined undefined; private backDisplaySyncFast: displaySync.DisplaySync | undefined undefined;} step 2定义两个文本组件。
State drawFirstSize: number 25;State drawSecondSize: number 25;Builder doSomeRenderFirst() { Text(30) .fontSize(this.drawFirstSize)}Builder doSomeRenderSecond() { Text(60) .fontSize(this.drawSecondSize)} step 3通过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事件和注册订阅函数} step 4开始每帧回调
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) step 5结束每帧回调
Button(Stop) .id(CustomDrawStop) .fontSize(14) .fontWeight(500) .margin({ bottom: 10, left: 5 }) .fontColor(Color.White) .onClick((): void { if (this.backDisplaySyncSlow) { this.backDisplaySyncSlow.stop(); } if (this.backDisplaySyncFast) { this.backDisplaySyncFast.stop(); } }) .width(20%) .height(40) .shadow(ShadowStyle.OUTER_DEFAULT_LG)
3、一个完整实例
import { displaySync } from kit.ArkGraphics2D;EntryComponentstruct Index { State drawFirstSize: number 25; State drawSecondSize: number 25; private backDisplaySyncSlow: displaySync.DisplaySync | undefined undefined; private backDisplaySyncFast: displaySync.DisplaySync | undefined undefined; private isBigger_30:boolean true; private isBigger_60:boolean true; Builder doSomeRenderFirst() { Text(30) .fontSize(this.drawFirstSize) } Builder doSomeRenderSecond() { Text(60) .fontSize(this.drawSecondSize) } CreateDisplaySyncSlow() { // 定义期望绘制帧率 let range : ExpectedFrameRateRange { expected: 30, min: 0, max: 120 }; let draw30 (intervalInfo: displaySync.IntervalInfo) { 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事件和注册订阅函数 } CreateDisplaySyncFast() { // 定义期望绘制帧率 let range : ExpectedFrameRateRange { expected: 60, min: 0, max: 120 }; let draw60 (intervalInfo: displaySync.IntervalInfo) { if (this.isBigger_60) { this.drawSecondSize 1; if (this.drawSecondSize 150) { this.isBigger_60 false; } } else { this.drawSecondSize - 1; if (this.drawSecondSize 25) { this.isBigger_60 true; } } }; this.backDisplaySyncFast displaySync.create(); // 创建DisplaySync实例 this.backDisplaySyncFast.setExpectedFrameRateRange(range); // 设置帧率 this.backDisplaySyncFast.on(frame, draw60); // 订阅frame事件和注册订阅函数 } aboutToDisappear() { if (this.backDisplaySyncSlow) { this.backDisplaySyncSlow.stop(); // DisplaySync失能关闭 this.backDisplaySyncSlow undefined; // 实例置空 } if (this.backDisplaySyncFast) { this.backDisplaySyncFast.stop(); // DisplaySync失能关闭 this.backDisplaySyncFast undefined; // 实例置空 } } build() { Column() { Row() { this.doSomeRenderFirst(); } .height(40%) Row() { this.doSomeRenderSecond(); } .height(40%) Row() { 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(); // DisplaySync使能开启 } if (this.backDisplaySyncFast) { this.backDisplaySyncFast.start(); // DisplaySync使能开启 } }) .width(20%) .height(40) .shadow(ShadowStyle.OUTER_DEFAULT_LG) Button(Stop) .id(CustomDrawStop) .fontSize(14) .fontWeight(500) .margin({ bottom: 10, left: 5 }) .fontColor(Color.White) .onClick((): void { if (this.backDisplaySyncSlow) { this.backDisplaySyncSlow.stop(); // DisplaySync失能关闭 } if (this.backDisplaySyncFast) { this.backDisplaySyncFast.stop(); // DisplaySync失能关闭 } }) .width(20%) .height(40) .shadow(ShadowStyle.OUTER_DEFAULT_LG) } .width(100%) .justifyContent(FlexAlign.Center) .shadow(ShadowStyle.OUTER_DEFAULT_SM) .alignItems(VerticalAlign.Bottom) .layoutWeight(1) } }}
效果如下
