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