1.基本介绍

「useAnimations」是一个基于 Lottie Framework 的微动画图标库，可以立即将它应该到你的应用程序和网站。在日常开发中，好的用户交互体验会给产品相关指标带来正向的收益，假如我们开发的时候能加入一些微型动效来提升用户操作效果，将会给用户带来更多惊喜。

2.四大特性

• 跨平台：支持所有设备、网站、安卓和 iOS。
• 响应式设计：在各种尺寸的设备上实现无损的动画质量。
• 基于 32px 网格：可编辑的 Lottie.json 文件。整个图标完全是响应式。
• 导出格式：动画包包含 SVG 和 Lottie 文件格式

3.如何使用

1. 网站上鼠标 hover 到 icon 上会出现 Download 下载按钮
2. 点击下载按钮，会创建 .zip 文件，解压后会包含 .json 和 .svg 文件
3. .json 文件即 Lottie 文件格式，.svg 文件是一个矢量图形文件

<div id="alertCircle"></div>

<!-- lottie.js 来自 https://github.com/airbnb/lottie-web 库-->
<script src="./lottie.js"></script>
<script>
  const animation = window.bodymovin.loadAnimation({
    container: document.getElementById("alertCircle"),
    renderer: "svg",
    loop: true,
    autoplay: true,
    path: "alertCircle.json",
  });
</script>

<!-- 参考示例：https://codepen.io/airnan/project/editor/ZeNONO -->