如果开发者需要以独立的帧率绘制更新操作UI界面时,可以通过DisplaySync来实现。应用中绘制内容的帧率可以使用DisplaySync实例来控制。
开发步骤
此处以不同帧率改变文件组件字体大小为例,来模拟不同UI绘制帧率的效果。
-
导入模块。
import { displaySync } from '@kit.ArkGraphics2D';
-
定义和构建DisplaySync对象。
@Entry
@Component
struct Index {
// 定义两个DisplaySync变量,未初始化
private backDisplaySyncSlow: displaySync.DisplaySync | undefined = undefined;
private backDisplaySyncFast: displaySync.DisplaySync | undefined = undefined;
}
- 定义两个文本组件。
@State drawFirstSize: number = 25;
@State drawSecondSize: number = 25;
@Builder doSomeRenderFirst() {
Text('30')
.fontSize(this.drawFirstSize)
}
@Builder doSomeRenderSecond() {
Text('60')
.fontSize(this.drawSecondSize)
}
- 通过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事件和注册订阅函数
}
- 开始每帧回调。
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)
说明
创建的DisplaySync实例在start使能后需要aboutToDisappear函数中进行stop操作并置空,避免内存泄漏问题。
aboutToDisappear() {
if (this.backDisplaySyncSlow) {
this.backDisplaySyncSlow.stop();
this.backDisplaySyncSlow = undefined;
}
if (this.backDisplaySyncFast) {
this.backDisplaySyncFast.stop();
this.backDisplaySyncFast = undefined;
}
}
- 结束每帧回调。
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)
完整示例
import { displaySync } from '@kit.ArkGraphics2D';
@Entry
@Component
struct 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)
}
}
}
最后呢
很多开发朋友不知道需要学习那些鸿蒙技术?鸿蒙开发岗位需要掌握那些核心技术点?为此鸿蒙的开发学习必须要系统性的进行。
而网上有关鸿蒙的开发资料非常的少,假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料,少走很多弯路,节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了(ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(Harmony NEXT)技术知识点
如果你是一名Android、Java、前端等等开发人员,想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。
针对鸿蒙成长路线打造的鸿蒙学习文档。话不多说,我们直接看详细鸿蒙(OpenHarmony )手册(共计1236页)与鸿蒙(OpenHarmony )开发入门视频,帮助大家在技术的道路上更进一步。
- 《鸿蒙 (OpenHarmony)开发学习视频》
- 《鸿蒙生态应用开发V2.0白皮书》
- 《鸿蒙 (OpenHarmony)开发基础到实战手册》
- OpenHarmony北向、南向开发环境搭建
- 《鸿蒙开发基础》
- 《鸿蒙开发进阶》
- 《鸿蒙开发实战》
总结
鸿蒙—作为国家主力推送的国产操作系统。部分的高校已经取消了安卓课程,从而开设鸿蒙课程;企业纷纷跟进启动了鸿蒙研发。
并且鸿蒙是完全具备无与伦比的机遇和潜力的;预计到年底将有 5,000 款的应用完成原生鸿蒙开发,未来将会支持 50 万款的应用。那么这么多的应用需要开发,也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长,学习鸿蒙势在必行! 自↓↓↓拿