From 7007da3f515241be651e707ad6e7cd43796ec204 Mon Sep 17 00:00:00 2001 From: taosheng11 <8371186+taosheng11@user.noreply.gitee.com> Date: Fri, 25 Jul 2025 03:05:46 +0000 Subject: [PATCH] update PowerAnalysis/BackgroundPowerSample/entry/src/main/ets/pages/display_sync_example.ets. Signed-off-by: taosheng11 <8371186+taosheng11@user.noreply.gitee.com> --- .../main/ets/pages/display_sync_example.ets | 191 ++++++++++++++++-- 1 file changed, 175 insertions(+), 16 deletions(-) diff --git a/PowerAnalysis/BackgroundPowerSample/entry/src/main/ets/pages/display_sync_example.ets b/PowerAnalysis/BackgroundPowerSample/entry/src/main/ets/pages/display_sync_example.ets index 784d89cb..9e8cf9ac 100644 --- a/PowerAnalysis/BackgroundPowerSample/entry/src/main/ets/pages/display_sync_example.ets +++ b/PowerAnalysis/BackgroundPowerSample/entry/src/main/ets/pages/display_sync_example.ets @@ -1,25 +1,184 @@ /** * 最佳实践：Vsync低功耗优化 */ +import { displaySync } from '@kit.ArkGraphics2D'; -// [Start vsync_power_case_1] -aboutToDisappear() { - if (this.backDisplaySyncSlow) { - this.backDisplaySyncSlow.stop(); - this.backDisplaySyncSlow = undefined; +@Entry +@Component +struct MyDisplaySyncComponent { + @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(); + this.backDisplaySyncSlow.setExpectedFrameRateRange(range); + this.backDisplaySyncSlow.on("frame", draw30); + } + + 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(); + this.backDisplaySyncFast.setExpectedFrameRateRange(range); + this.backDisplaySyncFast.on("frame", draw60); } -} -// [End vsync_power_case_1] - -// [Start vsync_power_case_2] -Index() -// ... -.onVisibleAreaChange({ratios: [0.0, 1.0], expectedUpdateInterval: 1000}, (isExpanding: boolean, currentRatio: number) => { - if (!isExpanding && currentRatio <= 0.0) { - console.info(`Component is completely invisible.`); + + aboutToDisappear() { + console.log("index abouttodisppear") if (this.backDisplaySyncSlow) { this.backDisplaySyncSlow.stop(); + this.backDisplaySyncSlow = undefined; + } + if (this.backDisplaySyncFast) { + this.backDisplaySyncFast.stop(); + this.backDisplaySyncFast = undefined; + } + } + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { + // 30FPS 动态文本 + Row() { + this.doSomeRenderFirst() + } + .width('80%') + .height('auto') + .justifyContent(FlexAlign.Center) + .margin({ top: 10 }) + + // 60FPS 动态文本 + Row() { + this.doSomeRenderSecond() + } + .width('80%') + .height('auto') + .justifyContent(FlexAlign.Center) + .margin({ top: 10 }) + + // 操作按钮区域 + Row() { + Button('Start') + .id('CustomDrawStart') + .fontSize(14) + .fontWeight(500) + .margin({ left: 10 }) + .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(); + } + }) + .layoutWeight(1) + .height(40) + .shadow(ShadowStyle.OUTER_DEFAULT_LG) + + Button('Stop') + .id('CustomDrawStop') + .fontSize(14) + .fontWeight(500) + .margin({ left: 10 }) + .fontColor(Color.White) + .onClick((): void => { + if (this.backDisplaySyncSlow) { + this.backDisplaySyncSlow.stop(); + } + if (this.backDisplaySyncFast) { + this.backDisplaySyncFast.stop(); + } + }) + .layoutWeight(1) + .height(40) + .shadow(ShadowStyle.OUTER_DEFAULT_LG) + } + .width('80%') + .justifyContent(FlexAlign.SpaceEvenly) + .margin({ top: 30 }) } + .width('100%') + .height('100%') + .padding(16) + .onVisibleAreaApproximateChange({ratios: [0.0, 1.0], expectedUpdateInterval: 1000}, (isExpanding: boolean, currentRatio: number) => { + if (isExpanding && currentRatio >= 1.0) { + console.info('Component' + + ' is fully visible. currentRatio:' + currentRatio) + if (this.backDisplaySyncSlow = undefined) { + this.backDisplaySyncSlow = displaySync.create(); + this.backDisplaySyncSlow = undefined; + } + } + + if (!isExpanding && currentRatio <= 0.0) { + console.info('Component is completely invisible.') + if (this.backDisplaySyncSlow) { + this.backDisplaySyncSlow.stop(); + this.backDisplaySyncSlow = undefined; + } + if (this.backDisplaySyncFast) { + this.backDisplaySyncFast.stop(); + this.backDisplaySyncFast = undefined; + } + } + }) } -}) -// [End vsync_power_case_2] \ No newline at end of file +} \ No newline at end of file -- Gitee