lottie-web动画库实战详解

安装

npm install lottie-web
pnpm install lottie-web
yarn add lottie-web
 

 

import lottie from "lottie-web";
import loginJson from "../../../public/loginjson.json";

lottie.loadAnimation({
      container: document.getElementById("animation"),
      renderer: "svg",
      loop: false,
      autoplay: true,
      animationData: loginJson,
    });

json数据来源---官网svg转json工具
https://lottiefiles.com/svg-to-lottie?preset=1&svg_url=https%3A%2F%2Fassets-v2.lottiefiles.com%2Ftmp%2Fsvg-to-lottie%2F4eHyuDdeXgMe4PW5tEIRk.svg

 API

lottie.loadAnimation：加载动画文件并返回一个动画实例。
animation.play: 播放动画。
animation.stop: 停止动画。
animation.setSpeed：设置动画的播放速度。
animation.setDirection：设置动画的播放方向。
animation.goToAndStop：跳转到指定时间点或帧，并暂停。
animation.destroy：销毁动画实例。
animationData------Lottie动画数据
path---------Lottie动画的JSON文件路径
renderer----------------Lottie动画渲染方式，支持'canvas'和'svg'
loop-------------------是否循环播放动画
autoplay---------------是否自动播放动画
name---------------------Lottie动画的名称
assetsPath-----------------------Lottie动画资源文件夹的路径
rendererSettings---------------------Lottie动画渲染的一些配置

 
React中如何使用Lottie-web

npm install --save lottie-web
 

import React, { useEffect } from "react";
import lottie from 'lottie-web';
import animationData from "./animation.json";

const App = () => {
	useEffect(() => {
		lottie.loadAnimation({
			container: document.getElementById("lottie"),
			renderer: "svg",
			loop: true,
			autoplay: true,
			animationData: animationData,
		});
	}, []);

	return 
;
};

export default App;