如何实现组件水波纹动画案例

组件水波纹动画案例

HarmonyOS
2024-05-26 12:28:15
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
mzshj

希望在组件(如按钮,列表项等)按压时实现从中间向两边扩散的水波纹动画效果如下图效果

使用的核心API

transition

核心代码解释

上述效果中使用Stack组件来让水波纹与组件层叠来实现这个效果,水波纹动画元素显示时没有动画,创建一毫秒后消失(这个可以根据实际需求来微调),消失的时候添加动画代码如下:

transition(TransitionEffect.asymmetric( 
  TransitionEffect.IDENTITY, 
  TransitionEffect.OPACITY.animation({ duration: 1000, curve: Curve.EaseInOut }).combine( 
    TransitionEffect.scale({ x: 100, y: 100 }) 
  ) 
))

完整实现代码如下:

@Entry 
@Component 
struct Index { 
  @State message: string = 'Hello World'; 
  @State flag: boolean = false 
  @State ballX: number = 0 
  @State ballY: number = 0 
 
  build() { 
    Column() { 
      Column() { 
      }.layoutWeight(1).backgroundColor(Color.Pink).width("100%") 
 
      Stack() { 
        Button("按钮").width("100%").height("100%").stateEffect(false) 
        if (this.flag) { 
          Row() 
            .width(5) 
            .height(5) 
            .position({ 
              x: this.ballX, 
              y: this.ballY 
            }) 
            .backgroundColor("rgba(0,0,0,0.7)") 
            .transition(TransitionEffect.asymmetric( 
              TransitionEffect.IDENTITY, 
              TransitionEffect.OPACITY.animation({ duration: 1000, curve: Curve.EaseInOut }).combine( 
                TransitionEffect.scale({ x: 100, y: 100 }) 
              ) 
            )) 
            .borderRadius(15) 
        } 
      }.width("100%").height(60).clip(true) 
      .onClick((e) => { 
        this.ballX = e.x - 3 
        this.ballY = e.y - 3 
        this.flag = !this.flag; 
        setTimeout(() => { 
          this.flag = !this.flag; 
        }, 100) 
      }) 
 
      Column() { 
      }.layoutWeight(1).backgroundColor(Color.Pink).width("100%") 
    } 
    .width('100%') 
    .height('100%') 
  } 
}

实现效果

注明适配的版本信息

IDE:4.1.1.300

SDK:4.1.2.1

分享
微博
QQ
微信
回复
2024-05-27 16:13:02
相关问题
属性动画如何实现宽高动画效果
649浏览 • 1回复 待解决
如何实现动画转场效果
379浏览 • 1回复 待解决
文字动画效果如何实现
790浏览 • 0回复 待解决
鸿蒙如何实现动画值变化
8140浏览 • 1回复 待解决
求教ArkUI如何实现组合动画
4223浏览 • 1回复 待解决
如何实现从底部缓慢上升的弹窗动画
648浏览 • 1回复 待解决
如何实现上下切换的页面间跳转动画
766浏览 • 0回复 待解决
panGesture结合动画实现fling效果
392浏览 • 1回复 待解决
如何实现自定义应用入场动画
391浏览 • 1回复 待解决
鸿蒙中怎么实现动画翻转效果
8924浏览 • 2回复 待解决
lottie动画组件存在严重的内存泄漏
709浏览 • 1回复 待解决
Refresh结合lottie实现下拉刷新动画
481浏览 • 1回复 待解决
animateTo动画如何暂停
377浏览 • 1回复 待解决
二级浮层的出场动画实现
333浏览 • 1回复 待解决
如何使用弹簧动画曲线
184浏览 • 1回复 待解决
animateTo动画如何直接停止
890浏览 • 1回复 待解决