当前位置:主页 > 查看内容

分享一个提升 Loading 体验的小工具

发布时间:2021-04-15 00:00| 位朋友查看

简介:今天看到一个不错的动画网站: https://lottiefiles.com/ 可以自己编辑生成动画,并且能十分方便的引入到你的项目中。 比如上图的猫咪动画: import Lottie from "react-lottie";import * as catData from "./cat.json";const defaultOptions = { loop: true……

animation_200_knfp3c5s.gif

今天看到一个不错的动画网站https://lottiefiles.com/

可以自己编辑生成动画,并且能十分方便的引入到你的项目中。

比如上图的猫咪动画:

import Lottie from "react-lottie";
import * as catData from "./cat.json";

const defaultOptions = {
  loop: true,
  autoplay: true,
  animationData: catData.default,
  rendererSettings: {
    preserveAspectRatio: "xMidYMid slice"
  }
};

//...
<Lottie options={defaultOptions} height={120} width={120} />

借用这个能力, 我们可以让loading效果更有趣味:

hello.gif

load.gif

lott.gif

网站中还有大量的素材可以免费使用:

ex.gif

感兴趣的可以去看一下。


本文转自网络,版权归原作者所有,原文链接:https://segmentfault.com/a/1190000039816348
本站部分内容转载于网络,版权归原作者所有,转载之目的在于传播更多优秀技术内容,如有侵权请联系QQ/微信:153890879删除,谢谢!

推荐图文


随机推荐