!12803 翻译完成 12502

Merge pull request !12803 from ester.zhou/TR-12502

en/application-dev/ui/ui-js-animate-component.md

@@ -6,7 +6,7 @@ Create and run an animation shortcut on the component. For details, see [Univers
 
 ## Obtaining an Animation Object
 
-Call the animate method to obtain an animation object, which supports animation attributes, methods, and events.
+Call the **animate** method to obtain an animation object, which supports animation attributes, methods, and events.
 
 ```html
 <!-- xxx.hml -->
@@ -84,6 +84,7 @@ After obtaining an animation object, you can set its style working on the compon
   justify-content: center;
   align-items: center;
   width: 100%;
+  height: 100%;
 }
 .box{
   width: 200px;
@@ -104,7 +105,7 @@ export default {
   onInit() {
     this.options = {
       duration: 4000,
-    };
+    }
     this.keyframes = [
     {
       transform: {
@@ -128,11 +129,11 @@ export default {
           width: 300,
           height: 300   
       }    
-    ];
+    ]
   },
   Show() {
-    this.animation = this.$element('content').animate(this.keyframes, this.options);
-    this.animation.play();
+    this.animation = this.$element('content').animate(this.keyframes, this.options)
+    this.animation.play()
   }
 }
 ```
@@ -140,11 +141,11 @@ export default {
 ![en-us_image_0000001267647897](figures/en-us_image_0000001267647897.gif)
 
 > **NOTE**
-> - The sequence of translate, scale, and rotate affects the animation effect.
+> - The sequence of **translate**, **scale**, and **rotate** affects the animation effect.
 > 
-> - transformOrigin works only for scale and rotate.
+> - **transformOrigin** works only for scale and rotate.
 
-Set the animation attributes by using the options parameter.
+Set the animation attributes by using the **options** parameter.
 
 ```html
 <!-- xxx.hml -->
@@ -209,15 +210,15 @@ export default {
 
 > **NOTE**
 >
-> direction: mode of playing the animation.
+> **direction**: mode of playing the animation.
 >
-> normal: plays the animation in forward loop mode.
+> **normal**: plays the animation in forward loop mode.
 >
-> reverse: plays the animation in reverse loop mode.
+> **reverse**: plays the animation in reverse loop mode.
 >
-> alternate: plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in reverse direction.
+> **alternate**: plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in reverse direction.
 >
-> alternate-reverse: plays the animation in reverse alternating loop mode. When the animation is played for an odd number of times, the playback is in reverse direction. When the animation is played for an even number of times, the playback is in forward direction.
+> **alternate-reverse**: plays the animation in reverse alternating loop mode. When the animation is played for an odd number of times, the playback is in reverse direction. When the animation is played for an even number of times, the playback is in forward direction.
 
 
 ## Adding an Event and Calling a Method
@@ -227,16 +228,16 @@ Animation objects support animation events and methods. You can achieve the inte
 ```html
 <!-- xxx.hml -->
 <div class="container">
- <div id="content" style="width: 350px;height: 350px;margin-top: 100px;background: linear-gradient(pink, purple);">
- </div>
-   <div class="row">
-      <button type="capsule" value="play" onclick="playAnimation"></button>
-      <button type="capsule" value="pause" onclick="pauseAnimation"></button>
-   </div>
-   <div class="row1">
-      <button type="capsule" value="reverse" onclick="reverseAnimation"></button>
-      <button type="capsule" value="cancel" onclick="cancelAnimation"></button>
-   </div>
+    <div id="content" style="width: 350px;height: 350px;margin-top: 100px;background: linear-gradient(pink, purple);">
+    </div>
+    <div class="row">
+        <button type="capsule" value="play" onclick="playAnimation"></button>
+        <button type="capsule" value="pause" onclick="pauseAnimation"></button>
+    </div>
+    <div class="row1">
+        <button type="capsule" value="reverse" onclick="reverseAnimation"></button>
+        <button type="capsule" value="cancel" onclick="cancelAnimation"></button>
+    </div>
 </div>
 ```
 
@@ -246,6 +247,8 @@ Animation objects support animation events and methods. You can achieve the inte
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  width: 100%;
+  height: 100%;
 }
 button{
   width: 200px;
@@ -274,75 +277,64 @@ button{
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
 export default {
-  data: {
-    animation: '',
-  },
-  onInit() {
-  },
-  onShow() {
-    var options = {
-      duration: 1500,
-      easing:'ease-in',
-      elay:5,
-      direction:'normal',
-      iterations:2
-    };
-    var frames = [
-      {
-        transform: {
-          translate: '-150px -0px'
-        },
-        opacity: 0.1,
-        offset: 0.0,
-        width: 200,
-        height: 200,
-      },
-      {
-        transform: {
-          translate: '150px 0px'
-        },
-        opacity: 1.0,
-        offset: 1.0,
-        width: 300,
-        height: 300,
-      }
-    ];
-    this.animation = this.$element('content').animate(frames, options);
-    this.animation.onstart = function(){
-      prompt.showToast({
-        message: "start"
-      });
-    }; // Add a start event.
-    this.animation.onrepeat = function(){
-      prompt.showToast({
-        message: " repeated"
-      });
-    };// Add a repeat event.
-    this.animation.oncancel = function(){
-      prompt.showToast({
-        message: "canceled"
-      });
-    };// Add a cancellation event.
-    this.animation.onfinish = function(){
-      prompt.showToast({
-        message: "finish"
-      });
-    };// Add a finish event.
-  },
-  playAnimation() {
-    this.animation.play();// Start this animation.
-  },
-  pauseAnimation() {
-    this.animation.pause();// Pause this animation.
-  },
-  reverseAnimation() {
-    this.animation.reverse();// Reverse this animation.
-  },
-  cancelAnimation() {
-    this.animation.cancel();// Cancel this animation.
-  }
+    data: {
+        animation: '',
+    },
+    onShow() {
+        var options = {
+            duration: 1500,
+            easing:'ease-in',
+            delay:5,
+            direction:'normal',
+            iterations:2
+        };
+        var frames = [
+            {
+                transform: {
+                    translate: '-150px -0px'
+                },
+                opacity: 0.1,
+                offset: 0.0,
+                width: 200,
+                height: 200,
+            },
+            {
+                transform: {
+                    translate: '150px 0px'
+                },
+                opacity: 1.0,
+                offset: 1.0,
+                width: 300,
+                height: 300,
+            }
+        ];
+        this.animation = this.$element('content').animate(frames, options);
+        this.animation.onstart = function() {
+            console.info('animation start')
+        }  // Add a start event.
+        this.animation.onrepeat = function() {
+            console.info('animation repeated')
+        }  // Add a repeat event.
+        this.animation.oncancel = function() {
+            console.info('animation canceled')
+        }   // Add a cancel event.
+        this.animation.onfinish = function() {
+            console.info('animation finish')
+        }   // Add a finish event.
+    },
+    playAnimation() {
+        this.animation.play()  // Start this animation.
+    },
+    pauseAnimation() {
+        this.animation.pause()  // Pause this animation.
+    },
+    reverseAnimation() {
+        this.animation.reverse()  // Reverse this animation.
+    },
+    cancelAnimation() {
+        this.animation.cancel()  // Cancel this animation.
+    }
 }
 ```
 
@@ -398,7 +390,7 @@ button{
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   data: {
     animation: '',
@@ -437,17 +429,17 @@ export default {
       ];
       this.animation = this.$element('content').animate(frames, options);
       this.animation.onstart = function(){
-        prompt.showToast({
+        promptAction.showToast({
           message: "start"
         });
       };
       this.animation.onrepeat = function(){
-        prompt.showToast({
+        promptAction.showToast({
           message: " repeated"
         });
       };
       this.animation.onfinish = function(){
-        prompt.showToast({
+        promptAction.showToast({
           message: " finished"
       });
     };