如何在您的 Web 应用中轻松使用来自酷炫设计师的动画？

事实是，要在您的网络应用程序中添加像加载动画这样的酷炫动画，您不需要成为一名优秀的设计师，因为我们有这样做的设计师，您只需要从他们那里获得一些帮助。

听说过 Lottie 文件吗？

Lottie Files 是 Airbnb 的一个动画库，它是 Web 开发人员寻找精彩动画的首选网站，在我们的应用程序中使用它，然后假装我们对非技术人员来说是从头开始做的。

无论如何，这里介绍如何在你的 React 项目中使用它。

步骤1：

将此包添加到您的依赖项

npm i react-lottie

第 2 步：

前往https://lottiefiles.com/search?q=loading&category=animations并选择任意动画。下载 JSON 格式的文件并将其保存到项目目录中，最好保存在名为 assets 的文件夹中。

步骤3：

创建一个动画组件 - 在本例中为加载器组件（您可以直接复制并粘贴下面的代码片段，它会起作用，但请确保导入正确的 JSON 文件）。

import Lottie from "react-lottie";
import animationData from "../assets/6472-loading.json";

function Loader() {
  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: animationData,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice",
    },
  };

  return <Lottie options={defaultOptions} height={100} width={100} />;
}

export default Loader;

步骤4：

你现在可能知道怎么用了。一个常见的用例是使用一个像 isVisible 这样的布尔变量，并根据它的值来显示组件，例如：

{ isVisible && <Loader /> }