vue中使用lottie动画

7597次阅读 623人点赞 作者: WuBin 发布时间: 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中的效果)

附件下载

相关资料

点赞 支持一下 觉得不错?客官您就稍微鼓励一下吧!
关键词:vue3,lottie
推荐阅读
  • uniapp实现被浏览器唤起的功能

    当用户打开h5链接时候,点击打开app若用户在已经安装过app的情况下直接打开app,若未安装过跳到应用市场下载安装这个功能在实现上主要分为两种场景,从普通浏览器唤醒以及从微信唤醒。

    8337次阅读 531人点赞 发布时间: 2022-12-14 16:34:53 立即查看
  • Vue

    盘点Vue2和Vue3的10种组件通信方式

    Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异;本文将通过选项式API组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式。

    3474次阅读 255人点赞 发布时间: 2022-08-19 09:40:16 立即查看
  • JS

    几个高级前端常用的API

    推荐4个前端开发中常用的高端API,分别是MutationObserver、IntersectionObserver、getComputedstyle、getBoundingClientRect、requ...

    13422次阅读 867人点赞 发布时间: 2021-11-11 09:39:54 立即查看
  • PHP

    【正则】一些常用的正则表达式总结

    在日常开发中,正则表达式是非常有用的,正则表达式在每个语言中都是可以使用的,他就跟JSON一样,是通用的。了解一些常用的正则表达式,能大大提高你的工作效率。

    12217次阅读 392人点赞 发布时间: 2021-10-09 15:58:58 立即查看
  • 【中文】免费可商用字体下载与考证

    65款免费、可商用、无任何限制中文字体打包下载,这些字体都是经过长期验证,经得住市场考验的,让您规避被无良厂商起诉的风险。

    10562次阅读 846人点赞 发布时间: 2021-07-05 15:28:45 立即查看
  • Vue

    Vue3开发一个v-loading的自定义指令

    在vue3中实现一个自定义的指令,有助于我们简化开发,简化复用,通过一个指令的调用即可实现一些可高度复用的交互。

    14437次阅读 1153人点赞 发布时间: 2021-07-02 15:58:35 立即查看
  • JS

    关于手机上滚动穿透问题的解决

    当页面出现浮层的时候,滑动浮层的内容,正常情况下预期应该是浮层下边的内容不会滚动;然而事实并非如此。在PC上使用css即可解决,但是在手机端,情况就变的比较复杂,就需要禁止触摸事件才可以。

    14342次阅读 1167人点赞 发布时间: 2021-05-31 09:25:50 立即查看
  • Vue

    Vue+html2canvas截图空白的问题

    在使用vue做信网单页专题时,有海报生成的功能,这里推荐2个插件:一个是html2canvas,构造好DOM然后转canvas进行截图;另外使用vue-canvas-poster(这个截止到2021年3月...

    27483次阅读 2157人点赞 发布时间: 2021-03-02 09:04:51 立即查看
  • Vue

    vue-router4过度动画无效解决方案

    在初次使用vue3+vue-router4时候,先后遇到了过度动画transition进入和退出分别无效的情况,搜遍百度没没找到合适解决方法,包括vue-route4有一些API都进行了变化,以前的一些操...

    23619次阅读 1820人点赞 发布时间: 2021-02-23 13:37:20 立即查看
交流 收藏 目录