uni-app怎么使用Lottie动画 uni-app引入Json动画渲染教程【优化】

张开发
• 2026/4/16 20:52:54 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

uni-app怎么使用Lottie动画 uni-app引入Json动画渲染教程【优化】
uni-app中Lottie动画需分端实现H5用lottie-web需条件引入小程序用lottie-wxJSON放lottie目录组件带animation-pathApp端用uni-lottie原生插件JSON放nativeResources统一通过UNI_PLATFORM判断平台并封装LottiePlayer组件。uni-app 里直接用 lottie-web 渲染 JSON 动画行不通因为 lottie-web 依赖 DOM 和 Canvas API而 uni-app 的非 H5 平台如小程序、App不支持原生 DOM 操作。H5 端虽能跑但真机调试时容易白屏或报 document is not defined 错误。实操建议只在 H5 平台条件引入 lottie-web其他平台降级为静态图或使用原生组件避免在 onLoad 或 mounted 中无判断直接调用 Lottie.loadAnimation小程序端必须走 lottie-miniapp 或平台原生封装方案如微信的 lottie-wx微信小程序中用 lottie-wx 渲染动画的正确姿势这是目前最稳妥的微信小程序方案它把 Lottie JSON 编译成 WXML WXSS JS不依赖 Canvas兼容性好、性能稳。实操建议通过 npm 安装npm install lottie-wx --save再构建 npm开发者工具里勾选“使用 npm 模块”JSON 文件不能放 static 目录下——要放在 components/lottie-wx 同级的 lottie 文件夹并确保路径在 json 配置中声明组件写法必须带 animation-path 属性值是相对 app.js 的路径比如animation-path/lottie/loading.json别手动改 lottie-wx 组件里的 setData 调用它内部已做节流外部频繁触发 play 会卡顿App 端iOS/Android用 uni-app 原生插件加载 LottieApp 端没有 Web 渲染层lottie-web 或 lottie-wx 全部失效。必须用 DCloud 官方或社区维护的原生插件比如 uni-lottie。 Ideogram Ideogram是一个全新的文本转图像AI绘画生成平台擅长于生成带有文本的图像如LOGO上的字母、数字等。

更多文章