随笔- 1069 文章- 0 评论- 89 阅读- 285万

lottie-web动画库在HTML5页面中和在vue项目中的两种使用方式

本文主要介绍lottie-web动画库在HTML5页面中和在vue项目中的两种使用方式。

1、在HTML5页面中的使用方式

具体使用步骤详见下面的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>lottie 极简Demo</title>
    <!-- 第一步: 引入CDN -->
    <script src="https://gw.alipayobjects.com/os/lib/lottie-web/5.5.6/build/player/lottie.min.js"></script>
  </head>
  <body>
    <!-- 第二步: 创建容器 -->
    <div id="container"></div>
    <div id="status">循环播放3次后停止</div>
    <div id="loop"></div>
  </body>
  <script>
    // 第三步: 实例化
    var anim = lottie.loadAnimation({
      container: document.getElementById("container"), // 容器
      renderer: "svg",
      loop: true,
      autoplay: true,
      // animationData: {}, //如果使用的是JSON
      path:
        "https://gw.alipayobjects.com/os/sage/10726a69-0e6a-484f-a784-d57a812af9a6/lottie.json" // the path to the animation json
    });
    var loopCount = 0;
    anim.onLoopComplete = function() {
      loopCount += 1;
      document.getElementById("loop").textContent = `播放了${loopCount}次`;
      if (loopCount >= 3) {
        anim.stop();
      }
    };
  </script>
</html>

在HBuilder.exe编译器中切换到“边改边看模式”或者直接点击按钮在chrome浏览器，会自动显示页面动画效果：是一个跳动的红心。

但是在搜狗浏览器中会报出“跨域访问”的问题，稍后再解决。

2、在vue项目中的使用方式

2.1 按照常规的流程创建Vue项目，具体步骤省略（如在指定的目录打开命令行窗口，使用vue create 项目铭创建项目，然后用VSCode打开项目文件夹，即可进行相关编辑和开发）。

2.2 安装 Lottie

npm install lottie-web -S

2.3引入动画库

import lottie from 'lottie-web';

2.4使用动画库

this.anim = lottie.loadAnimation({
  container: this.$refs[`animation${i}`][0], //渲染的容器
  renderer: 'svg', // 渲染方式:svg、canvas
  loop: false, //循环播放，默认：false
  autoplay: true, //自动播放 ，默认true
  animationData: data, //动画json
});

2.5具体的使用步骤：

1、在components目录下面创建组件loadding.vue，内部代码如下：

<template>
    <!-- 为容器绑定样式 -->
    <div :style="style" ref="lavContainer"></div>
</template>

<script>
//引入lottie
import lottie from 'lottie-web'
//引入json数据
// import animationData from '../../static/bitcoin.json'

export default {
    props: { //接收父元素传入的参数
      options: {
        type: Object,
        required: true
      },
      height: Number, 
      width: Number
    },
    data() {
      return {
        style: {  //设置容器的样式
          width: this.width ? `${this.width}px` : '40%', //如果父元素有传参则使用传参的值，没有则=40%
          height: this.height ? `${this.height}px` : '100%',//如果父元素有传参则使用传参的值，没有则=100%
          overflow: 'hidden',//超出容器隐藏
          margin: '0 auto' //水平居中
        }
      }
    },
    mounted() {
      lottie.loadAnimation({ //初始化
        container: this.$refs.lavContainer,//在哪个dom容器中生效
        renderer: 'svg',//渲染方式svg
        loop: true,//this.options.loop !== false,//是否循环 如果传入的参数options.loop不为false 则一直循环 即默认循环
        autoplay: true,//this.options.autoplay !== false,//是否自动播放  如果传入的参数options.autoplay不为false 则自动播放 即默认自动播放
        // animationData: animationData,//动画数据，这个必须要有
        path: "/packages/lf20_sF7uci.json",
        rendererSettings: this.options.rendererSettings
      })
    }
  }
</script>

2、修改home.vue组件，修改后的代码如下：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <!-- 显示动画的容器 -->
    <div class="test_wrap">
        <loadding :options="defaultOptions" />
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import lottie from 'lottie-web'

//引入子组件
import loadding from '@/components/loadding.vue'

export default {
  name: 'Home',
  components: {
    'loadding': loadding
  },

  data () {
        return {
          show:true,
          defaultOptions: {
            autoplay: true,//自动播放
            loop: true,//循环播放
            height: 512, 
            width: 512
          },
        }
    }
}
</script>

3、解决跨域访问的问题。在vue项目中添加vue.config.js文件，内部代码如下：

module.exports = {
    // 代理配置
    devServer: {
        port: 8080,
        proxy: {
            '/': {
                target: 'https://assets7.lottiefiles.com',
                changeOrigin: true,
            }
        }
    }
};

注意：其中，https://assets7.lottiefiles.com/packages/lf20_sF7uci.json是在线json资源链接。当然了也可以用将path: "/packages/lf20_sF7uci.json"更换为animationData:animationData，以便使用本地的json动画资源。

运行结果如下：