安装
npm install lottie-web
pnpm install lottie-web
yarn add lottie-web
<div id="animation" style="width: 700px; height: 440px; margin-top: 80px" ></div>
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 <div id='lottie' />;};export default App;