我如何在我的项目中使用 useanimations.com 提供的图标

Question

我正在尝试在我的项目中使用由 useanimations.com 提供的图标，但在下载特定图标后，我不知道如何处理图标的 json 文件......不知何故动画没有运行？ 请帮忙

Answer 1

该站点解释了如何设置 Lottie Player 以运行动画，然后链接到动画。

https://lottiefiles.com/blog/working-with-lottie/how-to-add-lottie-animation-in-web-page

步骤1：在页面的head部分添加以下脚本：

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

第 2 步：通过将动画上传到您的网站或使用公共链接来获取动画的 URL

第 3 步：将以下代码复制并粘贴到您希望它出现在您网站上的位置。 URL 应该是 Lottie 动画文件的链接。

<lottie-player src="<URL HERE>" background="transparent"  speed="1"  style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>

而已。

Answer 2

使用Lotties播放器

来源： https : //lottiefiles.com/web-player

 <script src="https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/lottie-player.js"></script> <lottie-player id="firstLottie" src="https://assets8.lottiefiles.com/packages/lf20_rx3jheuy.json" style="width:200px; height: 200px;" autoplay loop></lottie-player>