阅读 459

前端复杂炫酷动画,哎,我就不用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>
  );
}

复制代码

动画效果是这样的

在这里插入图片描述

还有这样的

在这里插入图片描述

亦或是

在这里插入图片描述

文章分类
前端
文章标签