分享一个动画制作网站 - 成就云开发者社区

cat

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

https://lottiefiles.com/

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

比如上图的猫咪动画：

代码语言：javascript

复制

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

加载完毕的动画

代码语言：javascript

复制

<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文件，也可以托管起来，直接在代码中引入, 十分方便：

代码语言：javascript

复制

<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>

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

感兴趣的可以去看一下 :)