lottie-web的使用, 好看的动画使用

直接先上效果哈

有些动画效果 要很逼真的效果,不管是原生的css 还是 gif动图 可能效果都不是太理想吧

选来选去 最后选择使用了。lottie-web 这个插件
他这个是根据一个json文件渲染动画
如果json中有引用的图片的话,你用ae做出来的图片最好放到静态服务器上,然后更换json中的本地图片路径换成删除原来u的那个字段
使用方法

1. 安装

npm i lottie-web --save 
or 
yarn add lottie-web --save

2. 使用

import lottie from "lottie-web"

3. 在项目中使用 这里我使用react做了例子

import {
    
     useEffect, useRef, useState } from "react";
import lottie from "lottie-web";
function Home() {
    
    
  const lottieRef = useRef(null);
  const [stateLottie, setLottie] = useState(null);
  useEffect(() => {
    
    
      setLottie(
        lottie.loadAnimation({
    
    
          container: lottieRef.current ,
          renderer: "svg",
          loop: true,
          path: "https://assets2.lottiefiles.com/packages/lf20_ctwkstoj.json",
        })
      );
  }, []);
  return (
    <div>
      <div ref={
    
    lottieRef} className="lottie"></div>
    </div>
  );
}

使用主要方法是

let  stateLottie =  lottie.loadAnimation({
    
    
          container: "" ,  // 元素动画容器
          renderer: "svg",
          loop: true,
          path: "https://assets2.lottiefiles.com/packages/lf20_ctwkstoj.json",
        })

loop: true/ false/number    是否循环播放. 循环多少次
autoplay: true/false    是否自动播放

还可以监听动画的加载和结束 回调函数

lottie.play() // 动画播放
lottie.stop() // 动画暂停

lottie.addEventListener('complete', () => {
    
    
	console.log('动画加载完成')
})

更多细节 可以 去官网瞅瞅看
https://www.npmjs.com/package/lottie-web

更多的json动画文件地址。请查看

https://lottiefiles.com/getting-started

关注我 持续更新前端知识。