HarmonyOS 动画实现

APP列表中现有一个优惠券领取列表,每一条数据上有一个领取按钮,点击领取会有一个领取动画,动画是从点击的按钮位置呈现一个半弧形到右上角消失,这个动画实现是怎么个流程?

HarmonyOS
2024-12-26 13:19:44
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
fox280

可以使用路径动画motionPath实现的功能,参考下面demo:

详细参考链接:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-motion-path-animation-V5

@Entry
@Component
struct Page6255 {
  @State message: string = 'Hello World';

  @State toggle: boolean = true

  build() {
    Column() {
      Button('click me').margin(50)
        // 执行动画:从起点移动到(300,200),再到(300,500),再到终点
        .motionPath({ path: 'M 1005 193 C 204 739 37 1614 1040 2142', from: 0.0, to: 1.0, rotatable: true })
        .onClick(() => {
          animateTo({ duration: 400, curve: Curve.Linear }, () => {
            this.toggle = !this.toggle // 通过this.toggle变化组件的位置
          })
        })
    }.width('100%').height('100%').alignItems(this.toggle ? HorizontalAlign.Start : HorizontalAlign.Center)
  }
}
分享
微博
QQ
微信
回复
2024-12-26 16:09:42
相关问题
HarmonyOS Canvas 实现动画
1518浏览 • 1回复 待解决
HarmonyOS canvas动画如何实现逐帧动画
1207浏览 • 1回复 待解决
HarmonyOS Canvas的动画实现
744浏览 • 1回复 待解决
HarmonyOS 如何实现RippleView动画
1224浏览 • 1回复 待解决
HarmonyOS 如何实现WaveView动画
1115浏览 • 1回复 待解决
HarmonyOS 组合动画如何实现
839浏览 • 1回复 待解决
HarmonyOS 动画效果实现
1500浏览 • 1回复 待解决
属性动画如何实现宽高动画效果
3253浏览 • 1回复 待解决
HarmonyOS 如何实现旋转动画
1434浏览 • 1回复 待解决
HarmonyOS动画用什么实现
1208浏览 • 1回复 待解决
HarmonyOS如何实现动态缩放动画
1270浏览 • 1回复 待解决
HarmonyOS 如何实现音频声浪动画
2041浏览 • 1回复 待解决
HarmonyOS clipShape 动画效果实现
1265浏览 • 0回复 待解决
HarmonyOS 点赞动画实现方案
1336浏览 • 1回复 待解决
HarmonyOS 如何实现动画集合?
1292浏览 • 1回复 待解决
如何应用属性动画实现宽高的动画
1315浏览 • 1回复 待解决
HarmonyOS Navigation实现Dialog转场动画
986浏览 • 1回复 待解决
HarmonyOS 如何实现呼吸灯动画
1802浏览 • 1回复 待解决
HarmonyOS 实现按钮长按动画效果
1472浏览 • 1回复 待解决
HarmonyOS 怎样实现开屏动画或图片?
1652浏览 • 1回复 待解决
如何实现动画转场效果
2160浏览 • 1回复 待解决
HarmonyOS 如何实现放大缩小的动画
1607浏览 • 1回复 待解决
HarmonyOS router跳转动画如何实现
774浏览 • 1回复 待解决
HarmonyOS 换成model后动画放大实现不了
657浏览 • 1回复 待解决
鸿蒙如何实现动画值变化
10175浏览 • 1回复 待解决