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