HarmonyOS 5 动画开发实战：从基础动效到高级交互动画

🎯 一、HarmonyOS动画系统概述

HarmonyOS提供了强大而灵活的动画系统，支持多种动画类型和交互效果：

动画类型	适用场景	核心API
属性动画	组件尺寸、位置、透明度等属性变化	animateTo(), Animation()
转场动画	组件出现/消失、页面切换效果	transition(), if/else条件渲染
路径动画	复杂运动路径、曲线运动	animator模块
Lottie动画	复杂矢量动画、设计师制作动画	Lottie组件
粒子动画	特效、庆祝效果、自然现象	Canvas绘制

动画设计原则：

• 性能优先：确保动画流畅，帧率稳定在60fps
• 用户体验：动画应有明确目的，增强而非干扰用户体验
• 一致性：保持应用内动画风格一致
• 可访问性：提供减少动画或关闭动画的选项

⚙️ 二、开发准备与配置

1. 模块导入

在ArkTS文件中导入必要的动画模块：

import animator from '@ohos.animator';
import lottie from '@ohos.lottie';
import canvas from '@ohos.graphics.canvas';
import { Curve, FillMode, PlayMode } from '@ohos.animator';

2. 基础动画组件配置

在 module.json5中配置必要的资源：

{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.GRAPHICS",
        "reason": "$string:graphics_permission_reason",
        "usedScene": {
          "abilities": ["MainAbility"],
          "when": "always"
        }
      }
    ],
    "abilities": [
      {
        "name": "MainAbility",
        "srcEntry": "./ets/MainAbility/MainAbility.ets",
        "animation": {
          "entrance": "fade_in",
          "exit": "fade_out"
        }
      }
    ]
  }
}

🧩 三、属性动画开发

1. 基础属性动画

使用 animateTo实现简单的属性变化动画：

@Component
struct ScaleAnimationExample {
  @State scaleValue: number = 1.0;
  @State opacityValue: number = 1.0;
  @State rotationValue: number = 0;

  build() {
    Column() {
      // 缩放动画
      Text('缩放动画')
        .fontSize(20)
        .scale({ x: this.scaleValue, y: this.scaleValue })
        .onClick(() => {
          animateTo({
            duration: 300,
            curve: Curve.EaseInOut
          }, () => {
            this.scaleValue = this.scaleValue === 1.0 ? 1.5 : 1.0;
          });
        })

      // 透明度动画
      Text('淡入淡出')
        .fontSize(20)
        .opacity(this.opacityValue)
        .margin({ top: 20 })
        .onClick(() => {
          animateTo({
            duration: 500,
            curve: Curve.EaseIn
          }, () => {
            this.opacityValue = this.opacityValue === 1.0 ? 0.3 : 1.0;
          });
        })

      // 旋转动画
      Text('旋转动画')
        .fontSize(20)
        .rotate({ angle: this.rotationValue })
        .margin({ top: 20 })
        .onClick(() => {
          animateTo({
            duration: 600,
            curve: Curve.EaseOut
          }, () => {
            this.rotationValue += 45;
          });
        })
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

2. 高级动画配置

使用 Animation构造函数进行更精细的动画控制：

@Component
struct AdvancedAnimationExample {
  @State translateX: number = 0;
  @State translateY: number = 0;
  private animationController: animator.AnimatorResult | null = null;

  // 创建复杂动画
  createComplexAnimation(): void {
    const options: animator.AnimatorOptions = {
      duration: 1000,
      delay: 200,
      curve: Curve.Spring,
      iterations: 3,
      fillMode: FillMode.Forwards,
      direction: PlayMode.Alternate
    };

    this.animationController = animateTo(options, () => {
      this.translateX = 100;
      this.translateY = 50;
    });
  }

  // 控制动画播放
  controlAnimation(): void {
    if (this.animationController) {
      // 暂停动画
      this.animationController.pause();
      
      // 继续播放
      setTimeout(() => {
        this.animationController?.resume();
      }, 1000);
    }
  }

  build() {
    Column() {
      Text('高级动画控制')
        .fontSize(20)
        .translate({ x: this.translateX, y: this.translateY })
        .onClick(() => {
          this.createComplexAnimation();
        })

      Button('暂停/继续')
        .onClick(() => {
          this.controlAnimation();
        })
        .margin({ top: 20 })
    }
  }
}

🔄 四、转场动画与页面过渡

1. 组件显隐转场

使用 transition实现平滑的组件出现和消失效果：

@Component
struct TransitionAnimationExample {
  @State isVisible: boolean = true;
  @State currentView: string = 'viewA';

  build() {
    Column() {
      // 条件渲染与转场
      if (this.isVisible) {
        Text('我会优雅地出现和消失')
          .fontSize(18)
          .p