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 784d89cb71566309756b634f5c77a43db0ea01f0..0856e9ba12bea6dd5848f3ed7a096fcda75538a4 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
@@ -2,24 +2,185 @@
  * 最佳实践：Vsync低功耗优化
  */
 
-// [Start vsync_power_case_1]
-aboutToDisappear() {
-  if (this.backDisplaySyncSlow) {
-    this.backDisplaySyncSlow.stop();
-    this.backDisplaySyncSlow = undefined;
+import { displaySync } from '@kit.ArkGraphics2D';
+
+@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)
   }
-}
-// [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.`);
+
+  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);
+  }
+
+  // [Start vsync_power_case_1]
+  aboutToDisappear() {
     if (this.backDisplaySyncSlow) {
       this.backDisplaySyncSlow.stop();
+      this.backDisplaySyncSlow = undefined;
+    }
+    if (this.backDisplaySyncFast) {
+      this.backDisplaySyncFast.stop();
+      this.backDisplaySyncFast = undefined;
+    }
+  }
+  // [End vsync_power_case_1]
+
+  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)
+    // [Start vsync_power_case_2]
+    .onVisibleAreaChange([0.0, 1.0], (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();
+        }
+      }
+
+      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]
   }
-})
-// [End vsync_power_case_2]
\ No newline at end of file
+}
\ No newline at end of file