lottie-web动画库实战详解

Abao

于 2024-09-04 11:28:35 发布

阅读量123

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/weixin_72439307/article/details/141888782

版权

安装

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;