分享一个动画制作网站

皮小蛋

发布于 2021-05-06 14:17:35

1.6K0

发布于 2021-05-06 14:17:35

文章被收录于专栏：前端皮小蛋前端皮小蛋

cat

今天看到一个不错的动画网站：

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 效果更有趣味：

加载完毕的动画

<FadeIn>
  <div class="d-flex justify-content-center align-items-center">
    <h1>fetching pizza</h1>
    <Lottie options={defaultOptions} height={120} width={120} />                      
  </div>
</FadeIn>

带有动画的列表

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

素材样例

另外，编辑之后的json文件，也可以托管起来，直接在代码中引入, 十分方便：

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets9.lottiefiles.com/datafiles/MUp3wlMDGtoK5FK/data.json" mode="bounce" background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop controls autoplay></lottie-player>

还有游戏模式供你把玩，十分有意思：