HarmonyOS APP开发—祝福圈节日贺卡App需要用到这个库做一个节日贺卡 App春节烟花、生日蛋糕、圣诞树……设计师用 After Effects 做的动画怎么在鸿蒙上流畅播放ohos/lottie-turbo声明式 API 子线程渲染性能比一代 Lottie 提升 30%。 仓库地址https://gitcode.com/CPF-ApplicationTPC/lottie_turbo 安装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 组件瀑布流预览——多动画并行加载不卡顿播放控制——暂停、跳转、倍速贺卡瀑布流8 个 LottieView 同时渲染并行加载 JSON子线程渲染帧主线程只负责合成UI 保持 60fps用户点击贺卡全屏播放 播放控制第一步安装ohpminstallohos/lottie-turbo1.0.2 起兼容 API 12无需额外权限。第二步单张贺卡全屏播放用户点击一张贺卡全屏播放动画import{LottieController,LottieView}fromohos/lottie-turboEntryComponentstruct GreetingCardPage{privatecontroller:LottieControllernewLottieController()build(){Stack(){// 声明式一行加载本地 JSON 动画LottieView({lottieId:card_birthday,resource:$rawfile(lottie/birthday_cake.json),// AE 导出的 JSONloop: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 个动画同时预览EntryComponentstruct CardListPage{Statecards: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 保持流畅。内存缓存还让用户滑回去时已加载过的动画秒出。第四步播放控制全屏播放时用户可以暂停、拖动进度、调倍速// 暂停/继续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 作品在鸿蒙上原汁原味地飞起来。