前端复杂炫酷动画，哎，我就不用css写，哎，就用Lottie玩儿

去年今日有闻Lottie，对于前端来说使用起来非常简单，json文件导一导再定个位，你想在哪炫酷我就在哪炫酷。

今时今日来上手一个栗子?

动画原理

通过把每一帧（瞬间）的静止图像组合起来，以一定频率（速率）播放这些图像形成动画。

如何实现

这得考验设计师了。

用AE（Adobe After Effects）制作动画，结合bodymovin插件把动画导出json文件，网上很多导出案列，这里不再展开。然后加载lottie库和下面几行代码就可以实现一个lottie动画。

import React from "react";
import Lottie from "lottie-react-web";
import animation from "./demo.json"; //引入对应的json文件
import "./index.less";

export default function BodyLottie() {
  return (
    <div id="demo" className="demo"> //定义动画css样式
      <Lottie
        options={{
          animationData: animation,
        }}
      />
    </div>
  );
}

复制代码

动画效果是这样的

还有这样的

亦或是