客户端内嵌webview时lottie播放方案

前言

在web中播放lottie基本都使用 lottie-web，本文会简单介绍该库的用法，以及针对lottie图片路径错误的问题处理

基本用法

安装

npm install lottie-web

使用

下面是个简单的例子，通过本地路径加载动画的json数据，然后使用loadAnimation指定dom节点，lottie会自己创建一个canvas作为子元素添加进去

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

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

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获取全部的路径，从中获取文件根目录，再拼接设置图片的资源路径

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时遇到的问题，希望能帮到大家