javascript - 网络中的lottiefiles动画性能问题

Question

嗨，我在我的网站上使用了一些 Telegram 贴纸，将它们上传到 Lottiefiles 网站并将它们导出为 json 文件。但是当我访问我的网站页面时，我的谷歌 Chrome 浏览器使用了大约 80% 的笔记本电脑 CPU，而且动画在笔记本电脑上播放时也有延迟！如何解决这个严重的性能问题？谢谢

标签： javascripthtmlanimationlottie

Answer 1

不要在你的网站上使用 Lottie 文件，我尝试使用 vue-lottie npm 包并意识到我的网站速度慢了很多倍，并且转换看起来很不稳定。

解决方案实际上是不使用 SVG 动画，除非它们是为 Web 构建的（使用 html 和 css，有时也使用 JavaScript）。

这就是为什么您在网站上看不到很多动画的原因，请一位技术网页设计师为其编写代码需要花费很多钱，因为它不能很好地从后期效果中移植。

您可以尝试将动画用作视频，但这仅适用于您的背景为白色（我从 UI8 购买的几乎所有动画都是白色背景）或者您是经验丰富的视频编辑器，能够将背景颜色更改为您需要的颜色。明显的缺点是如果您的网站设计发生变化，您必须重做视频编辑。