无限极服务
146.43MB · 2025-10-24
现有安卓项目需要用到喜、怒、哀、乐等多种动画表情，安卓方面决定使用 Lottie的方案。后台系统前端需要增加一个表情管理的功能，需要实现前端对Lottie 动画的预览。
本农也是初次接触Lottie，在使用Lottie动画过程中遇到了一些问题，故记录此过程。
Lottie 是一种轻量级、高性能的矢量动画格式，由 Airbnb 开发并开源，旨在让设计师和开发者能够轻松地在移动应用、网页和其他平台中使用高质量的动画效果。Lottie 的核心理念是：将 After Effects 中设计的动画直接导出为 JSON 文件，并在客户端（如 iOS、Android、Web、桌面端 等）原生渲染，无需使用 GIF、视频或复杂的帧动画。极大的简化了动画在多个平台开发的难度。
简单来说，它就是一个 跨平台播放动画的 动画播放器。只需要通过对应平台的 sdk，加载动画的 .json（描述动画的文件），即可控制动画的播放、暂停、速度、进度等，并且可以增加交互。
.json格式的。.json .lottie格式。并提供了多个框架的Lottie组件：
npm install @lottiefiles/dotlottie-vue <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>
npm install @lottiefiles/dotlottie-reactimport React from 'react';
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
const App = () => {
return (
<DotLottieReact
src="path/to/animation.lottie"
loop
autoplay
/>
);
};
npm install @lottiefiles/dotlottie-web <canvas id="dotlottie-canvas" style="width: 300px; height:300px;"></canvas>
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
});
<!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>
.jon格式动画，内联 base64图片导致无法播放动画页面无法正常播放动画
查看控制台可以发现，加载动画时，页面会加载base64图片资源，但是会出现404
.json 格式转成 .lottie 格式dotlottie-player.wasm失败导致无法播放动画dotlottie-player.wasm 文件dotlottie-player.wasm 失败，动画不能播放
@lottiefiles/dotlottie-vue库，这个库需要用到 @lottiefiles/dotlottie-web，该库中又用到了 dotlottie-player.wasm，而 dotlottie-player.wasm 是通过CDN的加载。dotlottie-player.wasm 失败dotlottie-player.wasmurl <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/dotlottie-* 系列库功能强大，支持现代的 .lottie 格式，是官方 lottie-web 的一个优秀替代品。.lottie 格式。它不仅能压缩文件体积，还能完美规避 JSON + base64 内联图片带来的路径问题。dotlottie-player.wasm 文件，并使用 setWasmUrl(‘/path/to/dotlottie-player.wasm’) 方法进行配置，这是成功运行的前提。
