简介

路径动画用于设置组件进行位移动画时的运动路径！这个一般使用量比较少，但是简单的讲讲吧。

motionPath是一个UI组件顶级类的方法，就意味着，任何组件其实都具备，motionPath的能力。并且这个方法就是来描述运动路径用的，具体还得配合动画来使用，比如animateTo函数。这样动画在运动的时候，就会按照motionPath的路径来了。

其具体API及属性解释如图所示：

上图中，MotionPathOptions类中的path属性，是一个运动路径描述。这个一般是Svg开发技术里面的内容。一般来说，我们开发Svg会使用专门的其他库去做。 下文中的案例有一部分这种语言描述，但是详细了解这个语言，需要参考官方文档： 文档中心 。此处不做赘述。

代码使用示例

重点就是，motionPath是描述运动路径的，需要配合动画来使用才能出效果！

@Entry
@Component
//路径动画
struct MotionPathTest1 {
  @State toggle: boolean = true
  build() {
    Column(){
        Button('Click me')
          .margin(50)
          .motionPath({
            path:'Mstart.x start.y L300 200 L300 500 Lend.x end.y',
            from: 0.0,
            to:1.0,
            rotatable: true
          })
          .onClick(()=>{
            this.getUIContext().animateTo({ //动画得有
              duration: 4000,
              curve: Curve.Linear
            }, ()=>{
              this.toggle = !this.toggle
            })
          })
    }
    .height('100%')
    .width('100%')
    .alignItems(this.toggle? HorizontalAlign.Start : HorizontalAlign.End)
  }
}

真机运行效果