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