如何在ReactJS中使用自定义动画的Lottie（附代码示例）

在这篇文章中，我们将抛开ReactJS的技术层面，通过使用一个自定义的动画Lottie，使我们的应用程序的体验更好。我们将尝试为我们的应用程序提供更好的UI/UX，使用户更长时间地坚持使用你的应用程序。

为什么是自定义动画？

假设你正在构建你的应用程序，你想添加一些你自己构建的动画，将它们注入整个屏幕或子组件内，使懒人加载看起来更有吸引力。

Lottie动画

Lottie动画是高质量的JSON编码的动画，你可以将其注入到你的Web应用程序和移动应用程序中，无论是Android还是iOS，它们都支持。

开始使用

你可以去LottieFiles挑选一个你最喜欢的免费动画，或者对你自己的动画进行JSON编码来使用，大多数情况下是这样的。对于这个动画，我非常喜欢下面这个，所以我们要用它来工作。

配置

npm i lottie-react

一旦你安装了软件包，将你下载的Lottie文件中的JSON移到你的项目目录中。

消耗Lottie动画

现在我们已经完成了配置，是时候将加载器注入我们的代码了。

// import useLottie hook from package
import { useLottie } from "lottie-react"

// import your json animation inside assets directory
import animation from "./assets/119896-toaster.json";


// use it inside your functional component
function App() {

// set default options for your animations
  const defaultOptions = {
  loop: true,
  autoplay: true,
  animationData: animation,
  rendererSettings: {
    preserveAspectRatio: "xMidYMid slice",
    },
  };

  // extract from view by using useLottie hook and passing options as args
  const { View: lottie } = useLottie(defaultOptions);

  // use it as simple as this
  return (
    <div>
      {lottie}
    </div>
 );
}

真相时刻

总结

我们已经介绍了如何配置Lottie包，获取Lottie文件，并在几分钟内开始在你的应用程序中使用它们，使你的应用程序更加漂亮，你还可以对你的应用程序的标志进行动画和JSON编码，并将其作为你所有组件的加载器 。这将是很好的，对吗？我知道 。说实话，Lottie是我的最爱之一，你有什么想法？在下一次会议上见。保重。