1# Motion Path Animation (motionPath)
2
3The motion path animation is used to animate a component along a custom path.
4
5>  **NOTE**
6>
7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8
9## motionPath
10motionPath(value: MotionPathOptions)
11
12**Atomic service API**: This API can be used in atomic services since API version 11.
13
14**Parameters**
15
16| Name   | Type                               | Mandatory| Description                                   |
17| ----- | --------------------------------- | ---- | ------------------------------------- |
18| value | [MotionPathOptions](#motionpathoptions) | Yes   | Motion path of the component.            |
19
20## MotionPathOptions
21
22**Atomic service API**: This API can be used in atomic services since API version 11.
23
24| Name| Type| Mandatory| Description|
25| -------- | -------- | ---- | -------- |
26| path                         | string                     | Yes  | Motion path of the translation animation. The **svg** path string is used. In the value, **start** and **end** can be used in place of the start point and end point, for example, **'Mstart.x start.y L50 50 Lend.x end.y Z'**. For details, see [Path Drawing](../../../ui/ui-js-components-svg-path.md).<br>If this parameter is set to an empty string, the path animation is not set.      |
27| from                         | number                     | No  | Start point of the motion path.<br>Default value: **0.0**<br>Value range: [0, 1]<br>A value less than 0 or greater than 1 evaluates to the default value **0**.  |
28| to                           | number                     | No  | End point of the motion path.<br>Default value: **1.0**<br>Value range: [0, 1]<br>A value less than 0 or greater than 1 evaluates to the default value **1**, provided that the value of **to** is greater than or equal to the value of **from**.  |
29| rotatable                     | boolean                    | No  | Whether to rotate along the path.<br>Default value: **false**  |
30
31
32## Example
33
34```ts
35// xxx.ets
36@Entry
37@Component
38struct MotionPathExample {
39  @State toggle: boolean = true
40
41  build() {
42    Column() {
43      Button('click me').margin(50)
44        // Execute the animation: Move from the start point to (300,200), then to (300,500), and finally to the end point.
45        .motionPath({ path: 'Mstart.x start.y L300 200 L300 500 Lend.x end.y', from: 0.0, to: 1.0, rotatable: true })
46        .onClick(() => {
47          animateTo({ duration: 4000, curve: Curve.Linear }, () => {
48            this.toggle =! this.toggle // Use this.toggle to change the position of the component.
49          })
50        })
51    }.width('100%').height('100%').alignItems(this.toggle ? HorizontalAlign.Start : HorizontalAlign.Center)
52  }
53}
54```
55
56![en-us_image_0000001174104400](figures/en-us_image_0000001174104400.gif)
57