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

前言

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

相关推荐
归于尽9 分钟前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
小old弟10 分钟前
让对象保持定义的顺序来排列
前端
漫天星梦10 分钟前
前端列表页大数据内存优化的思考
前端·面试
爱学习的茄子11 分钟前
从0到1:揭秘前端网络请求的进化之路
前端·javascript·面试
欢乐时光c15 分钟前
常见请求头响应头的含义
前端·面试
wzyoung15 分钟前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js
用户730870117930816 分钟前
使用 CSS background-blend-mode 创造惊艳的视觉效果
前端
高端章鱼哥16 分钟前
Python 项目快速部署到 Linux 服务器基础教程
前端
李剑一17 分钟前
前端使用Web Cryptography API进行内容加密,几乎无法破解
前端
搬砖码18 分钟前
优雅实现!自定义滚动刻度选择器,精准选择无压力
前端