鸿蒙开发教程实战案例源码分享-水波纹效果

鸿蒙开发教程实战案例源码分享-水波纹效果

一些雷达，匹配，或者等待时会用到水波纹效果，挺常用的。

一、思路：

弄三个圈的组件，配合animateTo，加点延迟。同时处理透明度即可

二、效果图：

三、关键代码：

@Component
export  struct OnlineChatWaterRipples {
  @Link isListening: boolean; // 控制组件状态 true：开启水波纹 false：停止水波纹
  @State immediatelyOpacity: number = 0.8;
  @State immediatelyScale: Scale = { x: 1, y: 1 };
  @State delayOpacity: number = 0.8;
  @State delayScale: Scale = { x: 1, y: 1 };

  @State delayOpacity2: number = 0.8;
  @State delayScale2: Scale = { x: 1, y: 1 };

  private readonly BUTTON_SIZE: number = 120;
  private readonly BUTTON_CLICK_SCALE: number = 0.8;
  private readonly ANIMATION_DURATION: number = 1500;

  @Styles
  ripplesStyle() {
    .width(this.BUTTON_SIZE * this.BUTTON_CLICK_SCALE)
    .height(this.BUTTON_SIZE * this.BUTTON_CLICK_SCALE)
    .borderRadius(this.BUTTON_SIZE * this.BUTTON_CLICK_SCALE / 2)
    .backgroundColor($r('app.color.color_white_80'))
  }

  build() {

    Stack() {
      Stack()
        .ripplesStyle()
        .opacity(this.immediatelyOpacity)
        .scale(this.immediatelyScale)
      Stack()
        .ripplesStyle()
        .opacity(this.delayOpacity)
        .scale(this.delayScale)

      Stack()
        .ripplesStyle()
        .opacity(this.delayOpacity2)
        .scale(this.delayScale2)

        Image($r("app.media.yishi4"))
          .width(120)
          .height(120)
          .borderRadius(64)
      .width(this.BUTTON_SIZE)
      .height(this.BUTTON_SIZE)
      .zIndex(1)
          .onAppear(()=>{
            if (this.isListening) {

              animateTo({ duration: this.ANIMATION_DURATION, iterations: -1, curve: Curve.EaseInOut }, () => {
                this.immediatelyOpacity = 0;
                this.immediatelyScale = { x: 6, y: 6 };
              })
              animateTo({ duration: this.ANIMATION_DURATION, iterations: -1, curve: Curve.EaseInOut, delay: 200 }, () => {
                this.delayOpacity = 0;
                this.delayScale = { x: 6, y: 6 };
              })
              animateTo({ duration: this.ANIMATION_DURATION, iterations: -1, curve: Curve.EaseInOut, delay: 400 }, () => {
                this.delayOpacity2 = 0;
                this.delayScale2 = { x: 6, y: 6 };
              })

四、项目demo源码结构图：

有问题或者完整源码的可以看简介联系我，也可以私信我，我每天都看私信的