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