# 路径动画 设置组件进行位移动画时的运动路径。 ## 属性

名称

参数类型

默认值

描述

motionPath

{

path: string,

from?: number,

to?: number,

rotatable?: boolean

}

说明：

path中支持通过start和end进行起点和终点的替代，如：

'Mstart.x start.y L50 50 Lend.x end.y Z'。

{

"",

0.0,

1.0,

false

}

设置组件的运动路径，入参说明如下：

  • path：位移动画的运动路径，使用svg路径字符串。
  • from：运动路径的起点，默认为0.0。
  • to：运动路径的终点，默认为1.0。
  • rotatable：是否跟随路径进行旋转。
## 示例 ``` @Entry @Component struct MotionPathExample { @State offsetX: number = 0 @State offsetY: number = 0 @State toggle: boolean = true build() { Column() { Button('click me') .motionPath({ path: 'Mstart.x start.y L300 200 L300 500 Lend.x end.y', from: 0.0, to: 1.0, rotatable: true }) .onClick((event: ClickEvent) => { animateTo({ duration: 4000, curve: Curve.Linear }, () => { this.toggle = !this.toggle; }) }).backgroundColor(0x317aff) }.width('100%').height('100%').alignItems(this.toggle ? HorizontalAlign.Start : HorizontalAlign.Center) } } ``` ![](figures/motion.gif)