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