如何利用OpenHarmony创建动画

OpenHarmony 创建动画的实用路径

一 选择技术路径

• ArkUI 声明式动画：用状态驱动 + animateTo 做显式动画，适合绝大多数 UI 动效（位移、缩放、透明度、旋转、路径等），上手快、可编排、性能好。
• CSS 动画与关键帧：在 .hml + .css 场景可用 @keyframes 与 animation 实现位移动画、雪碧图帧动画等，适合简单动效或 Web 技术栈迁移。
• LottieArkTS：通过 @ohos/lottie 直接渲染 AE 导出的 JSON，矢量动画清晰、体积小、跨端一致，适合复杂品牌动效与交互动画。
• 逐帧/定时器动画：用 setInterval/clearInterval 驱动 translate/backgroundPosition 等属性，适合像素风或帧序列，注意帧率与性能控制。

二 快速上手 ArkUI 显式动画 animateTo

• 思路：用 @State 变量描述动画起点/终点，借助 animateTo 在指定时长与插值曲线下把状态从起点“动画到”终点；在组件出现时自动开播。
• 示例（Logo 渐显 + 放大，进入后自动播放，1s 后跳转）：

import router from '@ohos.router'
import Curves from '@ohos.curves'

@Entry
@Component
struct Logo {
  @State opacityValue: number = 0
  @State scaleValue: number = 0
  private curve1 = Curves.cubicBezier(0.4, 0, 1, 1)

  build() {
    Column() {
      Image($r('app.media.logo'))
        .width(120).height(120)
        .scale({ x: this.scaleValue, y: this.scaleValue })
        .opacity(this.opacityValue)
    }
    .width('100%').height('100%').justifyContent(FlexAlign.Center)
    .onAppear(() => {
      animateTo({
        duration: 1000,     // 动画时长
        delay: 100,        // 延迟
        curve: this.curve1, // 先慢后快
        onFinish: () => {
          setTimeout(() => router.replaceUrl({ url: 'pages/Main' }), 1000) // 定格1s后跳转
        }
      }, () => {
        this.opacityValue = 1
        this.scaleValue = 1
      })
    })
  }
}

• 要点：
  • 用 @State 标记参与动画的属性；在 animateTo 的闭包里只写“终点状态”，过程由系统插值完成。
  • 通过 Curves 选择曲线（如 cubicBezier、spring 等），控制节奏与弹性。
  • 在 onAppear 触发首播，在 onFinish 做收尾（跳转、回调、串联动画）。

三 其他常见做法

• CSS 关键帧动画（.hml/.css）
  • 适用：位移动画、雪碧图帧动画（steps 步进）。
  • 示例（雪碧图奔跑，8 帧，无限循环）：

.bear {
  position: absolute;
  width: 200px; height: 100px;
  background-image: url('./imgs/xiong.png');
  animation: bearRun 1s steps(8) infinite;
}
@keyframes bearRun {
  0%   { background-position: 0 0; }
  100% { background-position: -1600px 0; }
}

• LottieArkTS（复杂矢量动效）
  • 安装：ohpm install @ohos/lottie
  • 渲染到 Canvas，播放/暂停/停止可控，支持事件监听与速度调节：

import lottie, { AnimationItem } from '@ohos/lottie'

@Entry
@Component
struct LottieDemo {
  private ctx: CanvasRenderingContext2D
  private anim: AnimationItem | null = null

  build() {
    Column() {
      Canvas(this.ctx = new CanvasRenderingContext2D(new RenderingContextSettings(true)))
        .width('100%').height(300).backgroundColor('#f5f5f5')
        .onReady(() => this.load())
      Row({ space: 10 }) {
        Button('播放').onClick(() => this.anim?.play())
        Button('暂停').onClick(() => this.anim?.pause())
        Button('停止').onClick(() => this.anim?.stop())
      }.margin({ top: 10 })
    }.padding(15)
  }

  private load() {
    this.ctx.imageSmoothingEnabled = true
    this.ctx.imageSmoothingQuality = 'high'
    this.anim = lottie.loadAnimation({
      container: this.ctx,
      renderer: 'canvas',
      loop: true, autoplay: false,
      name: 'demo',
      path: 'common/animations/loading.json'
    })
    this.anim.addEventListener('DOMLoaded', () => this.anim?.setSpeed(1.2))
  }
}

• 逐帧/定时器（简单帧动画）
  • 适用：像素风、序列帧。
  • 思路：用 setInterval 定时更新 translate/backgroundPosition，在组件销毁时 clearInterval 释放资源。

四 性能与体验建议

• 优先使用 ArkUI 属性动画/animateTo 或 Lottie，减少在动效过程中做重计算与布局抖动。
• 合理设置 duration/delay/curve，避免过短导致“闪”，过长导致“拖”。
• 尽量使用 硬件加速 的绘制路径（如 Canvas 2D、矢量渲染），控制图层与节点复杂度。
• 循环与事件：循环优先用声明式的 loop/iterationCount 或 animateTo 编排；定时器方案务必在 aboutToDisappear/onDestroy 清理，避免内存泄漏与后台耗电。