分享一个动画制作网站

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>

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

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

json 游戏 cat loading 动画

0 人点赞