前言
在web中播放lottie基本都使用 lottie-web,本文会简单介绍该库的用法,以及针对lottie图片路径错误的问题处理
基本用法
安装
npm install lottie-web
使用
下面是个简单的例子,通过本地路径加载动画的json数据,然后使用loadAnimation
指定dom节点,lottie会自己创建一个canvas作为子元素添加进去
js
import lottie from 'lottie-web';
import lottieData from '../../public/static/lottie/data.json';
const animation = lottie.loadAnimation({
// 绑定dom节点
container: document.querySelector('body'),
// 渲染方式:svg、canvas
renderer: 'canvas',
// 是否循环播放,默认:false
loop: true,
// 是否自动播放, 默认true
autoplay: false,
// lottie的json数据
animationData: lottieData,
// 覆盖json中的图片资源路径
// assetsPath: `${url}static/lottie/images/`,
});
animation.play();
也可以将animationData
替换为path
字符串来播放在线lottie
js
const animation = lottie.loadAnimation({
// 绑定dom节点
container: document.querySelector('body'),
// 渲染方式:svg、canvas
renderer: 'canvas',
// 是否循环播放,默认:false
loop: true,
// 是否自动播放, 默认true
autoplay: false,
// lottie的json数据
path: 'data.json',
});
animation.play();
API
loadAnimation
会返回一个AnimationItem
实例,常用的有以下方法:
animation.play
: 播放动画animation.pause
: 暂停动画animation.setSpeed
:设置动画的播放速度animation.goToAndPlay
:在指定时间点或帧播放,一般用于暂停后重头播放
注意问题
请求拦截-json丢失
通过path指定lottie地址,其内部会使用axios来发送请求,如果设置响应拦截器时直接解包返回data,则无法通过path播放lottie
js
axios.interceptors.response.use((response:any) => {
console.log('接口响应', response);
// 这样会导致无法播放lottie
return response.data;
})
路径错误-图片丢失
在设计提供lottie时,很多时候不止有data.json
文件,在同级目录下还有一个images文件夹,来存放动画所用到的图片
在实际播放动画的时候,你有时会发现本地调试端好好的,但内嵌到客户端上或在一些其他场景时就加载不了资源图片,路径不对了
lottie-web提供了assetsPath
来覆盖json中的图片资源路径,项目中的lottie资源是放在public文件夹下的,加载的html不确定在哪个位置,而且客户端的路径前缀无法简单的使用window.location.origin
获取
我采取的方法是使用window.location.href
获取全部的路径,从中获取文件根目录,再拼接设置图片的资源路径
js
const url = window.location.href;
// 页面路径前缀
const routeName = 'xxx-pages';
const index = url.indexOf(routeName);
// 客户端内嵌包的根目录
// 本地调试时与window.location.origin相同
const originUrl = url.slice(0, index);
const animationimation = lottie.loadAnimation({
// 绑定dom节点
container: document.querySelector('body'),
// 渲染方式:svg、canvas
renderer: 'canvas',
// lottie的json数据
animationData: lottieData,
// 覆盖json中的图片资源路径
assetsPath: `${originUrl}static/lottie/images/`,
});
其他错误-兼容问题
lottie-web提供了三种渲染模式svg
canvas
html
,一般建议使用canvas
模式渲染,html
性能较差,svg
在一些设备上会出现兼容性问题,比如小度pad的浏览器svg元素与视频节点同时存在时会无法渲染动画
结语
以上就是个人在项目中使用lottie时遇到的问题,希望能帮到大家