直接先上效果哈

有些动画效果 要很逼真的效果,不管是原生的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

// 关于跳转的有一个api方法goToAndStop

// 第二个参数为false的时候 表示第一个参数是 时间 毫秒
// 第二个参数是 true 表示第一个参数是 第几帧

//
this.animation.goToAndStop(5000, false) // 跳转到第五秒
this.animation.goToAndStop(500, true) // 跳转到第500针

// 第一个参数是个数组。表示开始到结束的帧数 播放到 300帧到500帧。
// 第二个参数是 表示是否关闭正在播放的动画
true 表示强制。 false 表示 表示不中断当前动画 播放 等待播放完成 在播放当前帧

lottie.playSegments([300, 500], true)

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