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

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

请参以下示例:

@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)
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS 曲线绘制
29浏览 • 1回复 待解决
有没有实现曲线的相关库?
192浏览 • 1回复 待解决
使用Promise实现一种串行调用方式
1096浏览 • 1回复 待解决
HarmonyOS一种类似总线通知的功能
371浏览 • 1回复 待解决
如何使用弹簧动画曲线
648浏览 • 1回复 待解决