1# 路径动画 (motionPath)
2
3设置组件进行位移动画时的运动路径。
4
5>  **说明：**
6>
7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9## motionPath
10motionPath(value: MotionPathOptions)
11
12**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
13
14**参数：**
15
16| 参数    | 类型                                | 是否必填 | 描述                                    |
17| ----- | --------------------------------- | ---- | ------------------------------------- |
18| value | [MotionPathOptions](#motionpathoptions) | 是    | 设置组件的运动路径。             |
19
20## MotionPathOptions
21
22**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
23
24| 名称 | 参数类型 | 必填 | 描述 |
25| -------- | -------- | ---- | -------- |
26| path                         | string                     | 是   | 位移动画的运动路径，使用svg路径字符串。path中支持使用start和end进行起点和终点的替代，如：'Mstart.x&nbsp;start.y&nbsp;L50&nbsp;50&nbsp;Lend.x&nbsp;end.y&nbsp;Z'，更多说明请参考[绘制路径](../../../ui/ui-js-components-svg-path.md)。<br/>设置为空字符串时相当于不设置路径动画。       |
27| from                         | number                     | 否   | 运动路径的起点。<br/>默认值：0.0<br/>取值范围：[0, 1]<br/>设置小于0或大于1的值时，按默认值0处理。   |
28| to                           | number                     | 否   | 运动路径的终点。<br/>默认值：1.0<br/>取值范围：[0, 1]<br/>设置小于0或大于1的值时，按默认值1处理，且满足to值 >= 异常值处理后的from值。   |
29| rotatable                     | boolean                    | 否   | 是否跟随路径进行旋转。<br/>默认值：false   |
30
31
32## 示例
33
34该示例主要演示如何设置组件进行位移动画时的运动路径。
35
36```ts
37// xxx.ets
38@Entry
39@Component
40struct MotionPathExample {
41  @State toggle: boolean = true
42
43  build() {
44    Column() {
45      Button('click me').margin(50)
46        .motionPath({
47          path: 'Mstart.x start.y L300 200 L300 500 Lend.x end.y',
48          from: 0.0,
49          to: 1.0,
50          rotatable: true
51        }) // 执行动画：从起点移动到(300,200)，再到(300,500)，再到终点
52        .onClick(() => {
53          animateTo({ duration: 4000, curve: Curve.Linear }, () => {
54            this.toggle = !this.toggle // 通过this.toggle变化组件的位置
55          })
56        })
57    }.width('100%').height('100%').alignItems(this.toggle ? HorizontalAlign.Start : HorizontalAlign.Center)
58  }
59}
60```
61
62![zh-cn_image_0000001174104400](figures/zh-cn_image_0000001174104400.gif)
63