Update docs (22623)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>

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)
   }
 }
 ```

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.