Lottie动画在前端web、vue、react中使用详解

本文用于记录Lottie 动画使用详细过程及使用中遇到的问题

背景

现有安卓项目需要用到喜、怒、哀、乐等多种动画表情，安卓方面决定使用 Lottie的方案。后台系统前端需要增加一个表情管理的功能，需要实现前端对Lottie 动画的预览。

本农也是初次接触Lottie，在使用Lottie动画过程中遇到了一些问题，故记录此过程。

一.Lottie

1.什么是Lottie

Lottie 是一种轻量级、高性能的矢量动画格式，由 Airbnb 开发并开源，旨在让设计师和开发者能够轻松地在移动应用、网页和其他平台中使用高质量的动画效果。Lottie 的核心理念是：将 After Effects 中设计的动画直接导出为 JSON 文件，并在客户端（如 iOS、Android、Web、桌面端等）原生渲染，无需使用 GIF、视频或复杂的帧动画。极大的简化了动画在多个平台开发的难度。

简单来说，它就是一个 跨平台播放动画 的 动画播放器 。只需要通过对应平台的 sdk ，加载动画的 .json（描述动画的文件），即可控制动画的播放、暂停、速度、进度等，并且可以增加交互。

2.Lottie优势

1.文件体积小：JSON 是文本文件，相比于 GIF、视频或图片序列，体积非常小，通常只有几十 KB，极大地节省了网络资源和应用包大小。
2.动画质量高：因为是矢量渲染，所以在任何分辨率下都不会失真，完美支持 Retina 屏幕和更高分辨率的设备。
3.开发效率极高：开发者无需关心动画的实现细节，只需简单地加载 JSON 文件即可。动画的修改也只需替换 JSON 文件，无需重新发版（如果 JSON 来自网络）。
4.性能优异：Lottie 使用底层图形 API（如 Core Animation on iOS, Canvas on Web）进行渲染，利用了硬件加速，动画流畅，CPU 和内存占用低。
5.跨平台一致性：同一个 JSON 文件在不同平台上呈现的效果完全一致，保证了用户体验的统一。
6.强大的交互性：开发者可以通过代码控制动画的播放、暂停、速度、进度等，轻松实现与用户的交互（例如：点击开始播放，滚动到某个位置触发动画等）。

二.如何使用Lottie

Lottie是跨平台的（iOS、Android、Web、桌面端），这里只分享web前端方面的使用 ，其他平台使用详情查看官方文档：developers.lottiefiles.com/docs/dotlot...

1.Lottie支持库

lottie-web：： 官方传统的lottie库，只支持.json格式的。
@lottieflies： 第三方社区开源库，支持.json .lottie格式。并提供了多个框架的Lottie 组件：
- vue: @lottiefiles/dotlottie-vue
- react: @lottiefiles/dotlottie-react
- react-native: @lottiefiles/dotlottie-react-native
- svelte: @lottiefiles/dotlottie-svelte
- ...

2.lottiefiles使用

lottie-web 使用跟 lottiefiles 差不多，lottiefiles 支持原生web及框架使用，所以这里只分享lottieflies 的使用。lottie-web详情查看官方文档：airbnb.io/lottie/#/we...

2.1.vue中使用

1.安装 @lottiefiles/dotlottie-vue npm install @lottiefiles/dotlottie-vue

2.组件中使用

js 复制代码

   <script setup>
   import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
   </script>

   <template>
     <DotLottieVue style="height: 500px; width: 500px" autoplay loop src="https://path-to-lottie.lottie" />
   </template>

2.2.react中使用

1.安装 @lottiefiles/dotlottie-react npm install @lottiefiles/dotlottie-react

2.组件中使用

js 复制代码

import React from 'react';
import { DotLottieReact } from '@lottiefiles/dotlottie-react';

   const App = () => {
     return (
       <DotLottieReact
         src="path/to/animation.lottie"
         loop
         autoplay
       />
     );
   };

2.3.原生web中使用

1.安装 @lottiefiles/dotlottie-web npm install @lottiefiles/dotlottie-web

1.准备容器

html 复制代码

    <canvas id="dotlottie-canvas" style="width: 300px; height:300px;"></canvas>

2.使用

js 复制代码

   import { DotLottie } from '@lottiefiles/dotlottie-web';

   const dotLottie = new DotLottie({
       autoplay: true,
       loop: true,
       canvas: document.querySelector('#dotlottie-canvas'),
       src: "https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie", // or .json file
   });

3.CDN引入使用

html 复制代码

<!DOCTYPE html>
   <html lang="en">
     <head>
       <meta charset="utf-8" />
       <meta
         name="viewport"
         content="width=device-width, initial-scale=1, shrink-to-fit=no"
       />
       <title>@lottiefiles/dotlottie-web | basic example</title>
     </head>
     <body>
       <!-- Canvas element where the Lottie animation will be rendered -->
       <canvas id="canvas" width="300" height="300"></canvas>
       <script type="module">
         import { DotLottie } from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm";

         new DotLottie({
           autoplay: true,
           loop: true,
           canvas: document.getElementById("canvas"),
           src: "https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie", // or .json file
         });
       </script>
     </body>
   </html>

三.遇到的问题

1.`.jon`格式动画，内联 `base64`图片导致无法播放动画

1.1.现象

页面无法正常播放动画
查看控制台可以发现，加载动画时，页面会加载base64图片资源，但是会出现404

1.2.原因

检查Lottie动画的 .json 文件，发现文件内部有内联base64图片，页面加载动画时加载base64图片的url有问题。把IP地址也加上上了，导致加载图片 404

1.3.解决

将动画的 .json 格式转成 .lottie 格式
lottiefiles 官网提供了工具，地址：lottiefiles.com/tools/lotti...

.lottie 格式类似于 .zip 压缩文件，转成 .lottie 后，lottiefiles 内部会解压处理就不会出现加载base64图片 404 问题

2.内网部署（无网络）加载 `dotlottie-player.wasm`失败导致无法播放动画

2.1.现象

首次加载动画时会通过CDN 加载 dotlottie-player.wasm 文件
加载 dotlottie-player.wasm 失败，动画不能播放

2.2.原因

本项目中用的是 @lottiefiles/dotlottie-vue库，这个库需要用到 @lottiefiles/dotlottie-web，该库中又用到了 dotlottie-player.wasm，而 dotlottie-player.wasm 是通过CDN的加载。
内网部署环境没有网络，导致加载 dotlottie-player.wasm 失败

2.3.解决

其实看到这个问题首先想到是看看官网有没有提供对应的啥配置或者解决方案啥的，但是很遗憾，官网并没有😥
后面想了想， @lottiefiles/dotlottie-vue 应该有提供修改加载 dotlottie-player.wasmurl的啥配置项吧。总不可能写死只能通过内部定义的CDN的方式，一看还真是。

看到导出了函数setWasmUrl，看名字应该就是用来修改url的，后面经过验证就是用来修改加载dotlottie-player.wasmurl

但是这里需要将 @lottiefiles/dotlottie-web dist 中的 dotlottie-player.wasm包，复制到项目根目录的 public下面。不然 '/dotlottie-player.wasm' 路径无法加载到该包。更多 vite中静态资源的加载规则可查看官网：cn.vitejs.dev/guide/asset...

js 复制代码

    <script setup>
    import { DotLottieVue,setWasmUrl } from '@lottiefiles/dotlottie-vue'
    setWasmUrl('/dotlottie-player.wasm');
    </script>

    <template>
      <DotLottieVue style="height: 500px; width: 500px" autoplay loop src="https://path-to-lottie.lottie" />
    </template>

该问题后面通过 lottiefiles 的github的issues中找到了对应的多个解决方案。github.com/LottieFiles...

四.总结

技术选型：Lottie 是一种高效、跨平台的矢量动画解决方案，能极大提升开发效率并保证多端体验一致。
库的选择 ：@lottiefiles/dotlottie-* 系列库功能强大，支持现代的 .lottie 格式，是官方 lottie-web 的一个优秀替代品。
格式选择 ：强烈推荐使用 .lottie 格式 。它不仅能压缩文件体积，还能完美规避 JSON + base64 内联图片带来的路径问题。
内网部署 ：在内网（无外网）环境下，必须自托管 dotlottie-player.wasm 文件 ，并使用 setWasmUrl('/path/to/dotlottie-player.wasm') 方法进行配置，这是成功运行的前提。
问题排查： 先看现象，页面、日志、控制台、开发环境终端。结合多个方面现象去定位排查问题。
资源查找：官方文档和项目的 GitHub Issues 是解决问题的宝贵资源，绝大多数常见问题都能在其中找到答案。

Lottie动画在前端web、vue、react中使用详解

本文用于记录Lottie 动画使用详细过程及使用中遇到的问题

背景

一.Lottie

1.什么是Lottie

2.Lottie优势

二.如何使用Lottie

1.Lottie支持库

2.lottiefiles使用

2.1.vue中使用

2.2.react中使用

2.3.原生web中使用

三.遇到的问题

1..jon格式动画，内联 base64图片导致无法播放动画

1.1.现象

1.2.原因

1.3.解决

2.内网部署（无网络） 加载 dotlottie-player.wasm失败导致无法播放动画

2.1.现象

2.2.原因

2.3.解决

四.总结

1.`.jon`格式动画，内联 `base64`图片导致无法播放动画

2.内网部署（无网络）加载 `dotlottie-player.wasm`失败导致无法播放动画