vue中使用lottie动画
7853次阅读
637人点赞
发布时间: 2021-03-05 13:30:44
扫码到手机查看
![]()
lottie-player-vue
Lottie是一个JSON动画形式的插件，可以快速流畅的播放动画，但是在使用VUE3+官方的lottie-player-vue时候，提示组件错误（估计是组件不支持VUE3，毕竟VUE3换了很多语法）。这时只能换一种方法去使用了。
在index.html中引用
在项目的public/index.html中引入
<script src="http://vip.qdxin.cn/lin/wb/json/lottie-player.js"></script>然后在加载的loading中使用
<lottie-player src="http://vip.qdxin.cn/lin/wb/json/xinzt-loading.json"
speed="1"
id="lott"
style="position:fixed;width: 100%;height: 100%;z-index: 5;background: #fff;"
class="lottie-player"
autoplay
loop
>
</lottie-player>然后可怕的事情就出现了，安卓上表现正常，但是在IOS上出现了莫名的闪屏！
经过多种尝试，在public/index.html中一起引入
<lottie-player src="http://...xinzt-loading.json">
<script src="http://vip.qdxin.cn/lin/wb/json/lottie-player.js"></script>效果是好了一些，但是还是会因为加载慢而导致有明显的顿挫感！
使用iframe
于是乎单独做了一个文件，仅仅为了测试是不是插件的问题，结果发现不是！单独的文件在ios上顺畅的不要不要的！没办法，需求摆在哪里，只有使用iframe去嵌套一下，然后在loading组件中引用了。
1、被iframe引用文件：
<style type="text/css">
*{padding: 0;margin: 0}
.lottie-wrapper{position: fixed;width: 100%;height: 100%;}
</style>
<body ontouchstart>
<div class="lottie-wrapper">
<lottie-player src="xinzt-loading.json"
speed="1"
id="lott"
style="width: 100%;height: 100%;"
class="lottie-player"
autoplay
loop
>
</lottie-player>
</div>
<script src="lottie-player.js"></script>
</body>2、在组件中使用
<template>
<transition name="fadeout">
<section class="loading" v-show="showLoading">
<iframe :src="`${publicPath}iframe/loading/index.html`"
frameborder="0"
class="lottie-player"
></iframe>
</section>
</transition>
</template>
// js
data() {
return {
showLoading: true,
// 引用public文件夹的路径
publicPath: process.env.BASE_URL
}
}关于publicPath请参见我的另一篇文章：Vue常用备忘1.5
结论：VUE-CLI中如果使用LOTTIE动画请使用iframe嵌套一下，当然如果是script src引用的VUE，那么与lottie不会冲突~（另附上iframe中的效果）
目录