1# animateMotion 2 3The **<animateMotion\>** component is used to define the animation along a path. 4 5> **NOTE** 6> 7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9## Required Permissions 10 11None 12 13## Child Components 14 15Not supported 16 17## Attributes 18 19The **animate** attributes \(**values** does not take effect\) and the attributes in the following table are supported. 20 21| Name | Type | Default Value | Mandatory | Description | 22| --------- | ----------------------------------- | ------------- | --------- | ------------------------------------------------------------ | 23| keyPoints | string | - | Yes | Point position of a group of key frames. The value of each frame is the distance proportion of the object along the path. The function is the same as that of **values** in the **animate** attribute. | 24| path | string | - | Yes | Motion path. The syntax is the same as that of the **d** attribute of the **\<path>** component. | 25| rotate | [auto \| auto-reverse \| \<number>] | auto | - | Rotation direction of an animation object. | 26 27 28 29 30## Example 31 32``` 33<!-- xxx.hml --> 34<div class="container"> 35 <svg fill="white" width="400" height="400"> 36 <path fill="none" stroke="blue" stroke-width="3" d="m40,60 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path> 37 <path fill="none" stroke="blue" stroke-width="3" d="m40,130 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path> 38 <path fill="none" stroke="blue" stroke-width="3" d="m40,200 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path> 39 <path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z"> 40 <animateMotion dur="2000" repeatCount="indefinite" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m40,60 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"> 41 </animateMotion> 42 </path> 43 <path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z"> 44 <animateMotion dur="2000" repeatCount="indefinite" rotate="auto-reverse"path="m40,130 c0,-100 160,100 160,0 c0,-100,-160,100 -160,0 z"> 45 </animateMotion> 46 </path> 47 <path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z"> 48 <animateMotion dur="2000" repeatCount="indefinite" rotate="45"path="m40,200 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></animateMotion> 49 </path> 50 </svg> 51</div> 52``` 53 54 55 56
