From 9cf51a3d88bf8164a20bc4469b17cee5c15e734d Mon Sep 17 00:00:00 2001
From: "ester.zhou" <ester.zhou@huawei.com>
Date: Wed, 30 Aug 2023 17:59:33 +0800
Subject: [PATCH] Update docs (22623) Signed-off-by: ester.zhou
 <ester.zhou@huawei.com>

---
 .../arkts-ui-widget-page-animation.md            | 16 ++++++++++------
 .../arkts-ui-widget-page-custom-drawing.md       |  2 +-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/en/application-dev/application-models/arkts-ui-widget-page-animation.md b/en/application-dev/application-models/arkts-ui-widget-page-animation.md
index ff479a47e1..8764b64a48 100644
--- a/en/application-dev/application-models/arkts-ui-widget-page-animation.md
+++ b/en/application-dev/application-models/arkts-ui-widget-page-animation.md
@@ -17,25 +17,29 @@ The following sample code implements the animation effect of button rotation:
 
 ![WidgetAnimation](figures/WidgetAnimation.gif)
 
+
+
 ```ts
 @Entry
 @Component
-struct AttrAnimationExample {
+struct AnimationCard {
   @State rotateAngle: number = 0;
 
   build() {
-    Column() {
+    Row() {
       Button('change rotate angle')
+        .height('20%')
+        .width('90%')
+        .margin('5%')
         .onClick(() => {
-          this.rotateAngle = 90;
+          this.rotateAngle = (this.rotateAngle === 0 ? 90 : 0);
         })
-        .margin(50)
         .rotate({ angle: this.rotateAngle })
         .animation({
           curve: Curve.EaseOut,
-          playMode: PlayMode.AlternateReverse
+          playMode: PlayMode.Normal,
         })
-    }.width('100%').margin({ top: 20 })
+    }.height('100%').alignItems(VerticalAlign.Center)
   }
 }
 ```
diff --git a/en/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md b/en/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md
index 3fb8349897..a9d0495b7d 100644
--- a/en/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md
+++ b/en/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md
@@ -6,7 +6,7 @@ You can apply custom drawing in your ArkTS widget to create a more vibrant exper
 ```ts
 @Entry
 @Component
-struct WidgetCard {
+struct CanvasCard {
   private canvasWidth: number = 0;
   private canvasHeight: number = 0;
   // Initialize CanvasRenderingContext2D and RenderingContextSettings.
-- 
GitLab