26

animation_200_knfp3c5s.gif

I saw a good animation website today: https://lottiefiles.com/

You can edit and generate animation by yourself, and it can be easily introduced into your project.

For example, the cat animation above:

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

Borrowing this ability, we can make the loading effect more interesting:

hello.gif

load.gif

lott.gif

There are also a lot of materials in the website that can be used for free:

ex.gif

Those who are interested can take a look.


皮小蛋
8k 声望12.8k 粉丝

积跬步,至千里。