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 实现动画
241浏览 • 1回复 待解决
HarmonyOS canvas动画如何实现逐帧动画
64浏览 • 1回复 待解决
HarmonyOS 如何实现WaveView动画
434浏览 • 1回复 待解决
HarmonyOS 动画效果实现
284浏览 • 1回复 待解决
HarmonyOS 组合动画如何实现
145浏览 • 1回复 待解决
HarmonyOS 如何实现RippleView动画
490浏览 • 1回复 待解决
HarmonyOS Canvas的动画实现
46浏览 • 1回复 待解决
属性动画如何实现宽高动画效果
2178浏览 • 1回复 待解决
HarmonyOS 如何实现呼吸灯动画
181浏览 • 1回复 待解决
HarmonyOS Navigation实现Dialog转场动画
215浏览 • 1回复 待解决
HarmonyOS如何实现动态缩放动画
639浏览 • 1回复 待解决
HarmonyOS 如何实现动画集合?
443浏览 • 1回复 待解决
HarmonyOS动画用什么实现
260浏览 • 1回复 待解决
HarmonyOS 如何实现音频声浪动画
903浏览 • 1回复 待解决
HarmonyOS 如何实现旋转动画
563浏览 • 1回复 待解决
HarmonyOS 点赞动画实现方案
226浏览 • 1回复 待解决
如何应用属性动画实现宽高的动画
543浏览 • 1回复 待解决
HarmonyOS router跳转动画如何实现
153浏览 • 1回复 待解决
HarmonyOS 如何实现放大缩小的动画
503浏览 • 1回复 待解决
如何实现动画转场效果
1064浏览 • 1回复 待解决
HarmonyOS 怎样实现开屏动画或图片?
565浏览 • 1回复 待解决
HarmonyOS 实现按钮长按动画效果
326浏览 • 1回复 待解决
panGesture结合动画实现fling效果
992浏览 • 1回复 待解决
鸿蒙如何实现动画值变化
9529浏览 • 1回复 待解决
求教ArkUI如何实现组合动画
5661浏览 • 1回复 待解决