HarmonyOS APP开发---"祝福圈"节日贺卡App，需要用到这个库

做一个节日贺卡 App，春节烟花、生日蛋糕、圣诞树......设计师用 After Effects 做的动画怎么在鸿蒙上流畅播放？@ohos/lottie-turbo 声明式 API + 子线程渲染，性能比一代 Lottie 提升 30%+。
📦 仓库地址：gitcode.com/CPF-Applica... ｜安装：ohpm install @ohos/lottie-turbo

写在前面

"祝福圈"的卖点就是"动效好看"------用户选一张贺卡，上面有烟花绽放、蜡烛摇曳、花瓣飘落的精美动画。这些动画是设计师在 After Effects 里做的，通过 Bodymovin 插件导出 JSON，前端用 Lottie 库渲染。

但"祝福圈"有个性能挑战：贺卡预览页是一个瀑布流，同时展示 6-8 张贺卡的动画预览。如果 8 个 Lottie 动画同时在主线程渲染，UI 直接卡死。

@ohos/lottie-turbo 相比第一代 @ohos/lottie 有三大升级：

并行加载：多个动画同时加载不排队
子线程渲染：不占主线程，UI 永远流畅
内存缓存：重复使用的动画 JSON 自动缓存

实测性能优化 30%+，8 个动画同屏也不卡。

这篇文章聊什么

单张贺卡播放------声明式 LottieView 组件
瀑布流预览------多动画并行加载不卡顿
播放控制------暂停、跳转、倍速

flowchart TD A[贺卡瀑布流] --> B[8 个 LottieView 同时渲染] B --> C[并行加载 JSON] C --> D[子线程渲染帧] D --> E[主线程只负责合成] E --> F[UI 保持 60fps] F --> G[用户点击贺卡] G --> H[全屏播放 + 播放控制]

第一步：安装

bash 复制代码

ohpm install @ohos/lottie-turbo

1.0.2 起兼容 API 12+，无需额外权限。

第二步：单张贺卡全屏播放

用户点击一张贺卡，全屏播放动画：

typescript 复制代码

import { LottieController, LottieView } from '@ohos/lottie-turbo'

@Entry
@Component
struct GreetingCardPage {
  private controller: LottieController = new LottieController()

  build() {
    Stack() {
      // 声明式：一行加载本地 JSON 动画
      LottieView({
        lottieId: 'card_birthday',
        resource: $rawfile('lottie/birthday_cake.json'), // AE 导出的 JSON
        loop: true,
        autoplay: true,
        controller: this.controller,
        contentMode: 'AdaptiveHeight', // 自适应高度（v1.0.12 新增）
      })
        .width('100%').height('100%')

      // 祝福语文字叠加
      Text('生日快乐！')
        .fontSize(28).fontColor('#FFFFFF')
        .position({ x: '50%', y: '80%' })
    }
  }
}

声明式 API 是 lottie-turbo 的核心优势------跟 ArkUI 组件一样写，不用命令式调用。

第三步：瀑布流预览，8 个动画并行

贺卡列表页，8 个动画同时预览：

typescript 复制代码

@Entry
@Component
struct CardListPage {
  @State cards: Array<{ id: string; anim: Resource }> = [
    { id: 'c1', anim: $rawfile('lottie/birthday.json') },
    { id: 'c2', anim: $rawfile('lottie/newyear.json') },
    { id: 'c3', anim: $rawfile('lottie/christmas.json') },
    { id: 'c4', anim: $rawfile('lottie/valentine.json') },
    { id: 'c5', anim: $rawfile('lottie/midautumn.json') },
    { id: 'c6', anim: $rawfile('lottie/teacher.json') },
    { id: 'c7', anim: $rawfile('lottie/wedding.json') },
    { id: 'c8', anim: $rawfile('lottie/graduation.json') },
  ]

  build() {
    WaterFlow() {
      ForEach(this.cards, (card) => {
        FlowItem() {
          LottieView({
            lottieId: card.id,
            resource: card.anim,
            loop: true,
            autoplay: true,
          })
            .width('100%').aspectRatio(0.75)
        }
        .onClick(() => {
          // 点击进入全屏播放
          router.pushUrl({ url: 'pages/GreetingCardPage', params: { id: card.id } })
        })
      }, (card) => card.id)
    }
    .columnsTemplate('1fr 1fr')
    .width('100%').height('100%')
  }
}

8 个 LottieView 同时渲染------这在第一代 Lottie 上会严重卡顿，但 lottie-turbo 的并行加载 + 子线程渲染 让 UI 保持流畅。内存缓存还让用户滑回去时已加载过的动画秒出。

第四步：播放控制

全屏播放时，用户可以暂停、拖动进度、调倍速：

typescript 复制代码

// 暂停/继续
this.controller.pause()
this.controller.start()

// 拖动到 50% 位置
this.controller.setProgress(0.5)

// 2 倍速播放（快速预览效果）
this.controller.setSpeed(2.0)

// 倒放（从尾到头）
this.controller.setDirection(-1)

为什么"祝福圈"选了 lottie-turbo？

需求	@ohos/lottie（一代）	@ohos/lottie-turbo
多动画同屏	❌ 卡顿	✅ 并行加载
渲染线程	主线程	✅ 子线程
内存缓存	❌	✅ 自动缓存
声明式 API	⚠️ 偏命令式	✅ 与 ArkUI 一致
性能	基准	✅ +30%
自适应尺寸	❌	✅ AdaptiveHeight/Width

总结

"祝福圈"这个场景里，@ohos/lottie-turbo 解决了三件事：

多动画不卡------并行加载 + 子线程渲染，8 个动画同屏流畅
声明式集成------LottieView 跟 ArkUI 组件一样写，简洁直观
完整控制------暂停、跳转、倍速、倒放，交互全掌控

如果你也在做贺卡、启动动画、加载动画、活动页等需要 Lottie 动画的场景，@ohos/lottie-turbo 的性能优势和声明式 API 会让设计师的 AE 作品在鸿蒙上原汁原味地飞起来。