当前位置:首页 » 《我的小黑屋》 » 正文

lottie-web动画库实战详解

9 人参与  2024年09月11日 18:41  分类 : 《我的小黑屋》  评论

点击全文阅读


安装

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;


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/158447.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1