鸿蒙（HarmonyOS）ArkTS 实战： animateTo属性动画实现连续涟漪扩散

前言

前几日在使用华为手机和Mac传输文件时看到了鸿蒙星河互联的APP搜索动画觉得不错，正好这几日我一直在写动画相关的内容。不妨模仿一个试试。

星河互联动画效果

我做的动画效果

缺少有个好看的背景图+加上高斯模糊效果会更佳。

效果说明

• 双光圈从中心平滑放大并逐渐淡出
• 上一圈未消失，下一圈自动启动
• 无限循环、无跳动、无断层、无闪烁
• 原生属性动画，极低性能损耗
• 圆角/居中/层叠布局

核心原理

整个涟漪动画分为 三层结构 + 双动画驱动：

1. 底层：Stack 层叠容器，保证所有元素居中
2. 中层：两个相同的圆形波纹（负责扩散动画）
3. 上层：提示文字（固定居中显示）

动画流程

1. 波纹初始状态：缩放 0.0，透明度 1（完全显示）
2. 执行动画：放大到 1.8 倍，同时透明度变为 0
3. 第一个波纹动画立即启动，第二个波纹延迟延迟一半时间启动。这样就可以形成连续不间断的动画效果不会造成闪烁跳动。
4. iterations: -1 无限循环
5. Curve.EaseOut 缓动曲线，模拟真实物理扩散

完整代码实现

@Entry
@Component
struct RippleAnimationPage {
  private  timeId:number|null = null

  @State scaleValue1: number = 0.0;
  @State opacityValue1: number = 1;

  @State scaleValue2: number = 0.0;
  @State opacityValue2: number = 1;
  
  aboutToDisappear(): void {
    if ( this.timeId !== null) {
      clearTimeout(this.timeId)
      this.timeId = null
    }
  }
  build() {
    Stack({ alignContent: Alignment.Center }) {
      // 波纹 1
      Circle()
        .stroke(Color.White)
        .strokeWidth(2)
        .fill('rgba(255,255,255,0.6)')
        .width(300)
        .height(300)
        .scale({ x: this.scaleValue1, y: this.scaleValue1 })
        .opacity(this.opacityValue1)

      // 波纹 2
      Circle()
        .stroke(Color.White)
        .strokeWidth(2)
        .fill('rgba(255,255,255,0.6)')
        .width(300)
        .height(300)
        .scale({ x: this.scaleValue2, y: this.scaleValue2 })
        .opacity(this.opacityValue2)

      Text("正在搜索设备...")
        .fontSize(18)
        .fontColor(Color.White)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#1F3A58')
    .onAppear(() => {
      // 第一个圈
    this.getUIContext()?.animateTo({
        duration: 2000,
        iterations: -1,
        curve: Curve.EaseOut
      }, () => {
        this.scaleValue1 = 1.8;
        this.opacityValue1 = 0;
      });

      // 第二个圈延迟一半形成连续交替
    this.timeId = setTimeout(() => {
        this.getUIContext()?.animateTo({
          duration: 2000,
          iterations: -1,
          curve: Curve.EaseOut
        }, () => {
          this.scaleValue2 = 1.8;
          this.opacityValue2 = 0;
        });
      }, 1000);
    })
  }
}

知识点解析

1. scale 缩放属性

• scale({ x: 0.0, y: 0.0 })：光圈缩放到中心点（起始位置）
• scale({ x: 1.8, y: 1.8 })：光圈放大 1.8 倍
• 必须传入 x / y 双参数，保证等比缩放

2. opacity 透明度控制

• 透明度从 1 → 0 平滑过渡
• 配合缩放实现"扩散并消失"的视觉效果
• 无闪烁、无突变，过渡极度自然

3. 双波纹延迟为什么重要？

• 单波纹会出现"动画空档"
• 第二个波纹延迟 1000ms（总时长的一半）
• 实现上圈未消失、下圈已开始的连续流动感
• 视觉上形成源源不断的涟漪效果

4. Curve.EaseOut 缓动曲线

• 先快后慢，符合水波纹物理扩散规律
• 比匀速线性动画更柔和、更高级
• 是鸿蒙动画中最常用的自然动效曲线

扩展与优化

1. 调整动画速度 ：修改 duration（数值越大扩散越慢）
2. 调整扩散范围 ：修改 scale 目标值（1.5~2.0 最佳）
3. 调整光圈颜色/透明度 ：修改填充色 fill 颜色与 rgba 值
4. 多场景适配：可用于搜索、配对、雷达