HarmonyOS 如何让组件\(Image\)沿着贝塞尔曲线运动，行成一种飘屏动画效果？

Question

如题：HarmonyOS 如何让组件(Image)沿着贝塞尔曲线运动，行成一种飘屏动画效果？

Answer 1

请参以下示例：

@Entry
@Component
struct MotionPathExample {
  @State toggle: boolean = true
  @State marginLeft: number = 50

  build() {
    Column() {
      Image($r('app.media.startIcon')).margin({ left: this.marginLeft, top: 50 }).width(50).height(50)
        .motionPath({
          path: 'M 300 300 Q 600 1000 100 2000',
          from: 0.0,
          to: 1.0,
          rotatable: false
        })
        .onClick(() => {
          animateTo({ duration: 4000, curve: Curve.Linear }, () => {
            this.marginLeft = 51
          })
        })

      Text('测试')
        .margin({ left: 20, top: 30 })
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Start)
  }
}