Lottie 简析

”Lottie”是一种可以实现矢量图像动画的技术和文件格式。

使用lottie-web实现

创建了一个将 Lottie 合并到 UI 中的演示。我会重点关注使用Lottie的部分。

① 导入库
使用cdn

<script
  type="module"
  src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"
></script>

使用包管理

npm install lottie-web

② 准备一个空的DOM元素并添加一个id属性
准备一个空 DOM 元素并id添加属性以从 JavaScript 引用它。在示例中，我们button在元素内span准备了一个空元素，将其显示为图标按钮。

<button>
  <span id="lottie"></span>
</button>

在③lottie.loadAnimation()中初始化
id在字段中container指定准备好的DOM元素，并path写入数据的文件路径。由于播放过程是手动完成的，所以autoplay: false添加了。

const lottieContainer = document.querySelector("#lottie");

const anim = lottie.loadAnimation({
  container: lottieContainer,
  path: "./assets/search.json",
  autoplay: false, // 自动播放 （默认true。省略可）
});

lottie.loadAnimation()可以指定的主要选项有：全文请参见官方文档中的“ loadAnimation-option s ”。

④动画操作
参考动画实例 操作方法 列表调整动画。

请注意，可以为 Lottie 播放指定的方法会略有不同，具体取决于您将它们用于动画实例还是 Lottie 实例（项目中的整个 Lottie）

参考： 全局方法

例子中，原来的Lottie是动画数据，感觉很慢很慢，所以setSpeed()用该方法调整了播放速度。

anim.setSpeed(1.7); // 调整播放速度

此外，我们还向按下按钮时调用的函数添加了管理动画播放的处理。

play()方法开始播放动画，等待随机秒数，然后将loop属性false更改为 。这将在完成时自动停止正在播放的动画。

const onSearch = async (anim) => {
  anim.loop = true; 
  anim.play();
  await wait(Math.random() * 5000);

  //  搜索完成后关闭
  anim.loop = false;
};

⑤根据Lottie的事件添加处理
通过向动画实例complete添加事件监听器，您可以在动画完成后执行一些处理。

anim.addEventListener("complete", () => {
  // 动画完成后进行的处理 
  result.classList.remove("isLoading");
});

关于 Lottie 性能优化

如果它作为 UI 的一部分合并到一个小部分中，如上面的例子，看起来可能不会有太大的问题，但如果它作为演示合并到一个网站中，性能问题是不可避免的。

正如文章开头提到的，Lottie 的文件大小只有几 KB，因此在加载页面时的数据容量方面可以说是非常出色的。然而，播放和渲染动画需要大量负载，这往往会降低网站的性能。

高 CPU 使用率和负载可能会导致闪烁和帧速率延迟。外观因浏览器而异，但在 Chrome 中，帧速率得以维持，但某些部分不显示，屏幕看起来有问题，而在 Safari 中，帧速率显着下降，看起来很卡顿。是。如果您使用移动设备，浏览器可能会崩溃。

我们建议您进行优化以确保用户体验不受影响。

具体来说，如果绘图变得很慢，您可能需要考虑以下事项。

1. 在屏幕上不可见的 Lottie 将停止播放动画或释放 DOM 元素。
2. 请勿将不必要的路径数据放置在因遮罩等原因而未显示的区域中。
3. 对于复杂的 Lottie 数据，请在数据中包含背景
4. 考虑画布渲染
5. 关于渐变 （使用渐变时 换成canvas 性能更好些）