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

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

阅读 539
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)
  }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进