水波纹脉冲动画实现分析

一、效果描述

水波纹脉冲动画是一种视觉效果，模拟水面被扰动后产生的层层波纹向外扩散的效果。在 ClockInPage 中，这个动画围绕中心的时间显示区域，形成了三层同心圆脉冲效果。

具体表现为：

1. 三个同心圆层以不同时间间隔依次扩散
2. 圆形逐渐变大，同时透明度逐渐降低
3. 动画循环播放，形成连续的波纹效果
4. 使用EaseOut缓动函数使动画更加自然

二、问题抛出

在实现水波纹脉冲动画时，需要解决以下几个关键技术问题：

1. 动画同步问题
   • 如何确保三个脉冲层按照特定时间间隔启动
   • 如何控制每个脉冲的动画周期和节奏
2. 状态管理问题
   • 如何管理每个脉冲圆的大小和透明度状态
   • 如何在动画结束后重置状态以准备下一轮动画
3. 性能优化问题
   • 如何避免动画影响页面其他功能的性能
   • 如何合理使用内存资源管理多个定时器
4. 视觉一致性问题
   • 如何确保动画在不同设备上表现一致
   • 如何处理动画暂停和恢复等边界情况

三、解决方案

1. 状态变量定义

使用多个状态变量来控制每层脉冲的大小和透明度：

@State rippleSize1: number = this.mSize; // 第一层脉冲大小

@State rippleOpacity1: number = 1; // 第一层脉冲透明度

@State rippleSize2: number = this.mSize; // 第二层脉冲大小

@State rippleOpacity2: number = 1; // 第二层脉冲透明度

@State rippleSize3: number = this.mSize; // 第三层脉冲大小

@State rippleOpacity3: number = 1; // 第三层脉冲透明度

1. 动画启动函数

通过 startRippleAnimation() 函数控制整个水波动画的启动和调度：

startRippleAnimation(): void {

  // 第一层脉冲动画
  setInterval(() => {
    animateTo({
      duration: 3000,
      curve: Curve.EaseOut
    }, () => {
      this.rippleSize1 = this.maxRadius;
      this.rippleOpacity1 = 0;
    });
    // 重置状态
    setTimeout(() => {
      this.rippleSize1 = this.minRadius;
      this.rippleOpacity1 = 1;
    }, 3000);
  }, 4500);

  // 第二层脉冲动画，延迟150ms启动
  setTimeout(() => {
    setInterval(() => {
      animateTo({
        duration: 3000,
        curve: Curve.EaseOut
      }, () => {
        this.rippleSize2 = this.maxRadius;
        this.rippleOpacity2 = 0;
      });
      // 重置状态
      setTimeout(() => {
        this.rippleSize2 = this.minRadius;
        this.rippleOpacity2 = 1;
      }, 3000);
    }, 4500);
  }, 1500);

  // 第三层脉冲动画，延迟3000ms启动
  setTimeout(() => {
    setInterval(() => {
      animateTo({
        duration: 3000,
        curve: Curve.EaseOut
      }, () => {
        this.rippleSize3 = this.maxRadius;
        this.rippleOpacity3 = 0;
      });
      // 重置状态
      setTimeout(() => {
        this.rippleSize3 = this.minRadius;
        this.rippleOpacity3 = 1;
      }, 3000);
    }, 4500);
  }, 3000);
}

1. UI 构建

使用 Stack 布局将多个脉冲层叠在一起，并通过状态变量控制其外观：

// 打卡时间展示
Stack() {
  // 基础圆形
  Column()
    .width(this.mSize)
    .height(this.mSize)
    .backgroundColor(this.color)
    .borderRadius(this.mSize / 2)
    .justifyContent(FlexAlign.Center);
  // 第一层脉冲
  Column()
    .width(this.rippleSize1)
    .height(this.rippleSize1)
    .backgroundColor(this.color)
    .borderRadius(this.rippleSize1 / 2)
    .opacity(this.rippleOpacity1)
    .justifyContent(FlexAlign.Center);
  // 第二层脉冲
  Column()
    .width(this.rippleSize2)
    .height(this.rippleSize2)
    .backgroundColor(this.color)
    .borderRadius(this.rippleSize2 / 2)
    .opacity(this.rippleOpacity2)
    .justifyContent(FlexAlign.Center);
  // 第三层脉冲
  Column()
    .width(this.rippleSize3)
    .height(this.rippleSize3)
    .backgroundColor(this.color)
    .borderRadius(this.rippleSize3 / 2)
    .opacity(this.rippleOpacity3)
    .justifyContent(FlexAlign.Center);
  // 中心文字内容
  Column() {
    Text("外勤打卡")
      .fontSize($r('app.float.font_size_16'))
      .fontColor($r('app.color.public_color_white'))
      .fontWeight(FontWeight.Bold);
    TextClock()
      .fontSize($r('app.float.font_size_24'))
      .fontColor($r('app.color.public_color_white'))
      .fontWeight(FontWeight.Bold)
      .format("HH:mm:ss")
      .dateTimeOptions({ hour: "2-digit" });
  }
}

1. 动画初始化

在组件的 aboutToAppear 生命周期方法中初始化动画参数并启动动画：

async aboutToAppear(): Promise<void> {
  // 初始化水波动画参数
  this.rippleSize1 = this.minRadius;
  this.rippleOpacity1 = 1;
  this.rippleSize2 = this.minRadius;
  this.rippleOpacity2 = 1;
  this.rippleSize3 = this.minRadius;
  this.rippleOpacity3 = 1;

  // 启动水波纹动画
  this.startRippleAnimation();

  // ... 其他初始化代码
}

这种实现方式的优势在于：

• 分层控制：每层脉冲独立控制，便于调整各自的效果
• 时间差设计：通过不同延迟启动各层动画，营造立体感
• 状态驱动：利用ArkTS的状态管理机制自动更新UI
• 循环播放：使用 setInterval 实现动画的无限循环

效果如图：