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 initial 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 12Sets a path animation for the component. 13 14**Atomic service API**: This API can be used in atomic services since API version 11. 15 16**System capability**: SystemCapability.ArkUI.ArkUI.Full 17 18**Parameters** 19 20| Name | Type | Mandatory| Description | 21| ----- | --------------------------------- | ---- | ------------------------------------- | 22| value | [MotionPathOptions](#motionpathoptions) | Yes | Motion path of the component. | 23 24## MotionPathOptions 25 26**Atomic service API**: This API can be used in atomic services since API version 11. 27 28**System capability**: SystemCapability.ArkUI.ArkUI.Full 29 30| Name| Type| Mandatory| Description| 31| -------- | -------- | ---- | -------- | 32| 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. | 33| 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**. | 34| 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**. | 35| rotatable | boolean | No | Whether to rotate along the path. The value **true** means to rotate along the path, and **false** means the opposite.<br>Default value: **false** | 36 37 38## Example 39 40This example demonstrates how to animate a component along a custom path. 41 42```ts 43// xxx.ets 44@Entry 45@Component 46struct MotionPathExample { 47 @State toggle: boolean = true; 48 49 build() { 50 Column() { 51 Button('click me').margin(50) 52 .motionPath({ 53 path: 'Mstart.x start.y L300 200 L300 500 Lend.x end.y', 54 from: 0.0, 55 to: 1.0, 56 rotatable: true 57 }) // Execute the animation: Move from the start point to (300,200), then to (300,500), and finally to the end point. 58 .onClick(() => { 59 this.getUIContext()?.animateTo({ duration: 4000, curve: Curve.Linear }, () => { 60 this.toggle = !this.toggle; // Change the component's position using this.toggle. 61 }); 62 }) 63 }.width('100%').height('100%').alignItems(this.toggle ? HorizontalAlign.Start : HorizontalAlign.Center) 64 } 65} 66``` 67 68 69
