---

每日一句正能量

“既然注定要经历风雨，何不让自己始终面向阳光。”
面向阳光，未必能挡雨，但至少不会让雨淋湿背影太久。

一、引言：为什么动画不是"锦上添花"

在移动应用开发中，动画往往被视为"锦上添花"的视觉装饰。然而，从人机交互（HCI）的专业视角来看，动画是状态转换的可视化语言——它帮助用户理解界面元素从何而来、到何处去，以及操作产生了什么后果。一个缺乏过渡动画的界面，就像一部没有剪辑的电影：信息虽然完整，但用户需要额外的认知负担去拼凑状态变化的全貌。

HarmonyOS ArkUI 提供了两套动画体系：**属性动画（.animation()）**作为隐式动画，在状态变更时自动触发；**显式动画（animateTo()）**则赋予开发者精确的控制权。当单一动画无法满足复杂交互场景时，**组合动画（并行执行）与序列动画（串行执行）**便成为构建流畅体验的核心工具。

本文将从原理剖析、代码实战、性能优化三个维度，深入讲解如何在 HarmonyOS 中构建高效、可维护的组合与序列动画系统。

---

二、核心概念：显式动画的状态驱动原理

在深入组合与序列动画之前，必须理解 ArkUI 动画的底层机制。与命令式框架（如 Android 的 ObjectAnimator）直接操作视图属性不同，ArkUI 的动画是声明式状态驱动的：

1. **状态变量（@State）**是动画的唯一数据源；
2. animateTo() 并不直接修改组件属性，而是定义了状态变化的插值过程；
3. 框架在 VSync 信号驱动下，根据缓动曲线（Curve）计算中间值，并触发 UI 重绘。

上图展示了从用户交互到屏幕呈现的完整链路。理解这一流程至关重要：动画卡顿的根源往往不是代码逻辑，而是状态更新与渲染管线之间的不必要同步。

---

三、组合动画：多属性协同的并行艺术

3.1 什么是组合动画

组合动画（Group Animation）指多个属性的变化在同一时间窗口内同步执行。例如，一个卡片展开时同时经历「缩放 + 透明度 + 旋转」的变化，这些变化共享相同的动画参数（时长、曲线、延迟），形成视觉上的整体感。

3.2 基础实现：单 animateTo 闭包内批量更新

最简单且最高效的组合动画，是在单个 animateTo 的闭包内同时修改多个状态变量：

import { animateTo, Curve } from '@kit.ArkUI';

@Entry
@Component
struct ComboAnimationDemo {
  @State cardScale: number = 1.0;
  @State cardOpacity: number = 1.0;
  @State cardRotation: number = 0;
  @State cardTranslateY: number = 0;

  private triggerCombo() {
    // 所有属性变化在同一个 animateTo 中，保证同步执行
    animateTo({
      duration: 600,
      curve: Curve.EaseInOut,
      iterations: 1,
      playMode: PlayMode.Normal
    }, () => {
      this.cardScale = 1.2;
      this.cardOpacity = 0.8;
      this.cardRotation = 15;
      this.cardTranslateY = -20;
    });
  }

  build() {
    Column({ space: 20 }) {
      Column() {
        Text('组合动画卡片')
          .fontSize(18)
          .fontColor('#FFFFFF')
      }
      .width(200)
      .height(120)
      .backgroundColor('#6C5CE7')
      .borderRadius(16)
      .justifyContent(FlexAlign.Center)
      .scale({ x: this.cardScale, y: this.cardScale })
      .opacity(this.cardOpacity)
      .rotate({ angle: this.cardRotation })
      .translate({ y: this.cardTranslateY })

      Button('触发动画')
        .width(160)
        .height(48)
        .backgroundColor('#00B894')
        .onClick(() => this.triggerCombo())
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

核心要点：同一 animateTo 闭包内的所有状态变更，ArkUI 会将其标记为同一批脏节点，在下一帧统一计算插值并渲染。这意味着四个属性的变化是原子性的——它们不会先后闪烁，而是同时进入过渡状态。

3.3 进阶场景：不同参数的子动画组合

当组合动画中的各个属性需要不同的时长或曲线时，可以使用多个 animateTo 嵌套调用，但需注意执行时机。更优雅的方式是利用 animation 属性方法为不同属性绑定独立的动画参数：

@Component
struct AdvancedComboDemo {
  @State scaleValue: number = 1;
  @State rotateValue: number = 0;

  build() {
    Column() {
      Circle()
        .width(100)
        .height(100)
        .fill('#E17055')
        .scale({ x: this.scaleValue, y: this.scaleValue })
        .animation({ duration: 300, curve: Curve.Spring })  // 缩放使用弹簧曲线
        .rotate({ angle: this.rotateValue })
        .animation({ duration: 800, curve: Curve.Linear })   // 旋转使用线性曲线
        .onClick(() => {
          this.scaleValue = this.scaleValue === 1 ? 1.5 : 1;
          this.rotateValue = this.rotateValue === 0 ? 360 : 0;
        })
    }
  }
}

此方案的优势在于声明式解耦：每个属性的动画参数与其绑定，代码可读性更高，且便于后续维护。

---

四、序列动画：精确编排的时序控制

4.1 什么是序列动画

序列动画（Sequence Animation）指多个动画按严格的时间顺序依次执行，前一个动画结束后才触发下一个。典型场景包括：引导页步骤提示、表单错误提示的逐级高亮、游戏技能的释放连招等。

4.2 实现方式一：onFinish 回调链

animateTo 提供了 onFinish 回调，这是实现序列动画最可靠的方式：

@Entry
@Component
struct SequenceAnimationDemo {
  @State step1Opacity: number = 0;
  @State step2Scale: number = 0.5;
  @State step3TranslateX: number = -100;

  private playSequence() {
    // 重置初始状态
    this.step1Opacity = 0;
    this.step2Scale = 0.5;
    this.step3TranslateX = -100;

    // 步骤1：淡入
    animateTo({
      duration: 400,
      curve: Curve.EaseOut,
      onFinish: () => {
        // 步骤2：缩放弹出
        animateTo({
          duration: 500,
          curve: Curve.BackOut,
          onFinish: () => {
            // 步骤3：滑入就位
            animateTo({
              duration: 600,
              curve: Curve.EaseInOut
            }, () => {
              this.step3TranslateX = 0;
            });
          }
        }, () => {
          this.step2Scale = 1.0;
        });
      }
    }, () => {
      this.step1Opacity = 1;
    });
  }

  build() {
    Column({ space: 16 }) {
      Text('步骤一：淡入显示')
        .fontSize(16)
        .opacity(this.step1Opacity)

      Text('步骤二：缩放弹出')
        .fontSize(16)
        .scale({ x: this.step2Scale, y: this.step2Scale })

      Text('步骤三：滑入就位')
        .fontSize(16)
        .translate({ x: this.step3TranslateX })

      Button('播放序列动画')
        .width(180)
        .height(48)
        .backgroundColor('#0984E3')
        .onClick(() => this.playSequence())
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

关键优势：onFinish 由动画引擎在渲染线程触发，不受 JavaScript 事件循环延迟影响，时序精度远高于 setTimeout。

4.3 实现方式二：Promise 封装与异步编排

对于复杂的多步骤序列，嵌套回调会导致"回调地狱"。通过 Promise 封装可大幅提升代码可维护性：

// 动画工具类
class AnimationHelper {
  static animateToPromise(param: AnimateParam, update: () => void): Promise<void> {
    return new Promise((resolve) => {
      animateTo({
        ...param,
        onFinish: resolve
      }, update);
    });
  }
}

// 使用 async/await 编排序列
async function playComplexSequence(component: SequenceAnimationDemo) {
  await AnimationHelper.animateToPromise(
    { duration: 300, curve: Curve.EaseIn },
    () => { component.step1Opacity = 1; }
  );

  await AnimationHelper.animateToPromise(
    { duration: 400, curve: Curve.Spring },
    () => { component.step2Scale = 1.2; }
  );

  await AnimationHelper.animateToPromise(
    { duration: 200, curve: Curve.Linear },
    () => { component.step2Scale = 1.0; }  // 回弹归位
  );

  await AnimationHelper.animateToPromise(
    { duration: 500, curve: Curve.EaseOut },
    () => { component.step3TranslateX = 0; }
  );
}

此模式将动画时序从 UI 组件中剥离，便于单元测试和复用。

---

五、实战案例：成就解锁的复合动画系统

以下是一个接近生产环境的案例——游戏成就解锁动画，融合了组合动画（图标同时缩放+旋转）与序列动画（整体按阶段推进）：

@Entry
@Component
struct AchievementUnlockPage {
  @State isUnlocked: boolean = false;
  @State iconScale: number = 0;
  @State iconRotation: number = 0;
  @State ringScale: number = 0;
  @State titleOpacity: number = 0;
  @State descOpacity: number = 0;
  @State confettiOffset: number = -50;

  private async playUnlockSequence() {
    this.isUnlocked = true;

    // 阶段1：光环扩散（组合动画：缩放+透明度）
    await AnimationHelper.animateToPromise(
      { duration: 600, curve: Curve.EaseOut },
      () => { this.ringScale = 2.0; }
    );

    // 阶段2：图标弹出（组合动画：缩放+旋转）
    await Promise.all([
      AnimationHelper.animateToPromise(
        { duration: 800, curve: Curve.BackOut },
        () => { this.iconScale = 1.0; }
      ),
      AnimationHelper.animateToPromise(
        { duration: 1000, curve: Curve.EaseInOut },
        () => { this.iconRotation = 360; }
      )
    ]);

    // 阶段3：文字逐级显示（序列动画）
    await AnimationHelper.animateToPromise(
      { duration: 400, curve: Curve.EaseOut },
      () => { this.titleOpacity = 1; }
    );

    await AnimationHelper.animateToPromise(
      { duration: 400, delay: 100, curve: Curve.EaseOut },
      () => { this.descOpacity = 1; }
    );

    // 阶段4：彩带飘落
    await AnimationHelper.animateToPromise(
      { duration: 800, curve: Curve.EaseIn },
      () => { this.confettiOffset = 200; }
    );
  }

  build() {
    Stack({ alignContent: Alignment.Center }) {
      // 背景光环
      Circle()
        .width(160)
        .height(160)
        .fill('rgba(255, 215, 0, 0.2)')
        .scale({ x: this.ringScale, y: this.ringScale })
        .opacity(this.ringScale > 1.5 ? 0 : 1)

      // 图标
      Column({ space: 12 }) {
        Text('🏆')
          .fontSize(64)
          .scale({ x: this.iconScale, y: this.iconScale })
          .rotate({ angle: this.iconRotation })

        Text('成就解锁！')
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .fontColor('#FFD700')
          .opacity(this.titleOpacity)

        Text('连续登录 7 天')
          .fontSize(14)
          .fontColor('#666666')
          .opacity(this.descOpacity)
      }

      // 触发按钮
      if (!this.isUnlocked) {
        Button('解锁成就')
          .width(140)
          .height(48)
          .backgroundColor('#007DFF')
          .onClick(() => this.playUnlockSequence())
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}

设计亮点：

• 阶段1 使用单一属性动画营造氛围；
• 阶段2 使用 Promise.all 实现组合动画（图标缩放与旋转并行）；
• 阶段3-4 使用 await 实现严格的序列控制；
• 每个阶段通过不同的缓动曲线传递不同的"物理质感"：光环扩散用 EaseOut（快速启动、缓慢停止），图标弹出用 BackOut（轻微回弹增强趣味性）。

---

六、性能优化：让动画在低端设备上也能丝滑

动画性能优化的核心原则是：减少每一帧的脏节点数量与布局计算量。

6.1 合并相同参数的 animateTo

当多个组件需要执行相同时长的动画时，将它们的状态变更放入同一个 animateTo 闭包：

// ❌ 低效：触发多次独立动画
animateTo({ duration: 300 }, () => { this.widthA = 200; });
animateTo({ duration: 300 }, () => { this.widthB = 200; });

// ✅ 高效：合并为一次动画
animateTo({ duration: 300 }, () => {
  this.widthA = 200;
  this.widthB = 200;
});

6.2 避免动画闭包间插入状态更新

在多个 animateTo 之间更新无关状态，会导致框架在动画执行前额外标记脏节点：

// ❌ 低效：中间插入无关状态更新
this.unrelatedColor = Color.Red;  // 额外脏节点！
animateTo({ duration: 300 }, () => { this.width = 200; });

// ✅ 高效：统一前置更新或后置更新
animateTo({ duration: 300 }, () => { this.width = 200; });
this.unrelatedColor = Color.Red;  // 动画结束后再更新

6.3 优先使用图形变换属性

ArkUI 的图形变换属性（scale、rotate、translate、opacity）由 GPU 直接合成，不触发布局重算。而修改 width、height、position 等布局属性会触发完整的 Measure-Layout-Draw 流程。

// ❌ 触发布局计算
animateTo({ duration: 300 }, () => { this.myWidth = 200; });

// ✅ GPU 直接合成，零布局开销
animateTo({ duration: 300 }, () => { this.myScale = 1.5; });

6.4 使用 renderGroup 缓存静态内容

当页面存在大量重复且内容固定的动画组件时，启用 .renderGroup(true) 可将组件及其子树的绘制结果缓存为位图，显著降低绘制负载：

@Component
struct CachedAnimationItem {
  @State scale: number = 1;

  build() {
    Column() {
      Image($r('app.media.icon'))
        .width(40)
        .height(40)
      Text('标签')
        .fontSize(12)
    }
    .scale({ x: this.scale, y: this.scale })
    .renderGroup(true)  // 启用离屏缓存
    .onClick(() => {
      animateTo({ duration: 200 }, () => { this.scale = 1.2; });
    })
  }
}

约束条件：启用 renderGroup 的组件，其内容（文本、图片）必须是静态的，子组件不能拥有独立动画，否则缓存频繁失效反而降低性能。

---

七、总结与最佳实践

场景	推荐方案	关键 API
多属性同时变化	组合动画	单 animateTo 闭包批量更新
多步骤依次执行	序列动画	onFinish 回调 / Promise 封装
不同属性不同参数	属性动画解耦	.animation() 绑定独立参数
大量重复元素动画	缓存优化	.renderGroup(true)
需要物理质感	缓动曲线选择	Curve.Spring / Curve.BackOut

组合动画与序列动画并非互斥，而是构建复杂交互的两种基本原子。优秀的动画设计应当像指挥家编排交响乐：组合动画是和声（多个声部同时奏响），序列动画是旋律（主题依次展开），而缓动曲线则是节奏与力度的精确控制。

掌握这两类动画的编排技巧，并配合性能优化策略，才能在 HarmonyOS 上构建出既美观又流畅的用户体验。

---

转载自：https://blog.csdn.net/u014727709/article/details/163417403
欢迎 👍点赞✍评论⭐收藏，欢迎指正