客户端内嵌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时遇到的问题,希望能帮到大家

相关推荐
小镇程序员7 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐9 分钟前
前端图像处理(一)
前端
程序猿阿伟17 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒18 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪27 分钟前
AJAX的基本使用
前端·javascript·ajax
力透键背30 分钟前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M41 分钟前
node.js第三方Express 框架
前端·javascript·node.js·express
盛夏绽放1 小时前
Node.js 和 Socket.IO 实现实时通信
前端·后端·websocket·node.js
想自律的露西西★1 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
白墨阳1 小时前
vue3:瀑布流
前端·javascript·vue.js