HarmonyOS 动画实现

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

HarmonyOS
20h前
浏览
收藏 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
微信
回复
18h前
相关问题
HarmonyOS Canvas 实现动画
64浏览 • 1回复 待解决
HarmonyOS 如何实现WaveView动画
367浏览 • 1回复 待解决
HarmonyOS 组合动画如何实现
33浏览 • 1回复 待解决
HarmonyOS 动画效果实现
38浏览 • 1回复 待解决
HarmonyOS 如何实现RippleView动画
340浏览 • 1回复 待解决
属性动画如何实现宽高动画效果
2067浏览 • 1回复 待解决
HarmonyOS 如何实现呼吸灯动画
23浏览 • 1回复 待解决
HarmonyOS Navigation实现Dialog转场动画
36浏览 • 1回复 待解决
HarmonyOS如何实现动态缩放动画
572浏览 • 1回复 待解决
HarmonyOS 如何实现音频声浪动画
710浏览 • 1回复 待解决
HarmonyOS 如何实现动画集合?
180浏览 • 1回复 待解决
HarmonyOS 如何实现旋转动画
483浏览 • 1回复 待解决
HarmonyOS 点赞动画实现方案
81浏览 • 1回复 待解决
HarmonyOS动画用什么实现
28浏览 • 1回复 待解决
如何应用属性动画实现宽高的动画
438浏览 • 1回复 待解决
如何实现动画转场效果
873浏览 • 1回复 待解决
HarmonyOS router跳转动画如何实现
30浏览 • 1回复 待解决
HarmonyOS 如何实现放大缩小的动画
412浏览 • 1回复 待解决
HarmonyOS 怎样实现开屏动画或图片?
414浏览 • 1回复 待解决
HarmonyOS 实现按钮长按动画效果
86浏览 • 1回复 待解决
panGesture结合动画实现fling效果
922浏览 • 1回复 待解决
鸿蒙如何实现动画值变化
9454浏览 • 1回复 待解决
文字动画效果如何实现
1927浏览 • 0回复 待解决
求教ArkUI如何实现组合动画
5541浏览 • 1回复 待解决