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

相关推荐
开心工作室_kaic14 分钟前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿33 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具1 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo2 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v2 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript