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 start.y L50 50 Lend.x end.y 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```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 // 执行动画：从起点移动到(300,200)，再到(300,500)，再到终点 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 // 通过this.toggle变化组件的位置 49 }) 50 }) 51 }.width('100%').height('100%').alignItems(this.toggle ? HorizontalAlign.Start : HorizontalAlign.Center) 52 } 53} 54``` 55 56 57
