Vue-lottie 简介及应用

一、什么是Vue-lottie

Vue-lottie 是一种在Vue应用程序中使用 LottieWeb动画的简便方法。Lottie是一个以JSON格式呈现Adobe After Effects动画的开源JavaScript库，具有在多个平台上呈现高质量矢量动画的能力。Vue-lottie是利用Lottie实现在 Vue.js 中呈现复杂动画的插件，带来了非常不错的用户体验。

二、vue-lottie 的应用

Vue-lottie 是在Vue项目中引用的, 要使用 vue-lottie 需要用到以下几步：

1.使用 Vue CLI创建Vue工程项目

vue init webpack vue-lottie-demo

2.通过 npm 在项目中安装 vue-lottie 插件

npm install vue-lottie --save

3.引入 Vue-lottie 到项目中

import Vue from 'vue'
import App from './App.vue'
import LottieAnimation from 'vue-lottie';
Vue.component('LottieAnimation', LottieAnimation)
new Vue({
  el: '#app',
  render: h => h(App)
})

4.将JSON格式的Lottie 动画导入到项目中

在项目src目录下创建资源文件夹 assets，将JSON格式的Lottie动画文件放到 assets 文件夹中。动画文件可以从 Lottie官方网站 中获取。

5.在Vue组件中使用Vue-lottie组件

在组件中使用 Vue-lottie 组件，并将导入的JSON格式的Lottie动画文件路径作为属性传递给组件，就可以在页面上看到该动画了。

<lottie-animation
  :animation-path="require('./../assets/animation.json')"
  :speed="1"
  :loop="true"
  :autoplay="true"
/>

三、vue-lottie 的实例

下面通过一个实例来说明 vue-lottie 如何使用。实例需求：我们需要在添加某一产品成功之后，弹出一个悬浮层，在其中添加一个从左向右飞行的小鸟动画，体现添加产品成功后的喜悦。

1. 在Vue组件中使用 Vue-lottie 组件

在 Vue 组件中引入 Vue-lottie 组件，并将导入的 JSON 格式的 Lottie 动画文件作为属性传递给组件，如下所示：

<template>
  <div class="page">
    <div class="alert" v-show="alert.status">
      <h4>增加产品功能</h4>
       <lottie-animation 
        :animation-path="lottie"
        :speed="1"
        :loop="true"
        :autoplay="true"
        :style="{width: '100%'}"
        className="logo"
      />
    </div>
    ...

</template>

<script>
  import LottieAnimation from 'vue-lottie';
  import successAnimation from '@/assets/json/success.json';
  export default {
    data() {
      return {
        lottie: successAnimation,
      };
    },
    components: {
      LottieAnimation,
    },
  };
</script>

2、在用户添加产品成功之后显示动画

当用户添加产品成功后，我们可以通过一个 alert 组件来显示动画效果，如下所示:

<template>
  <form class="form-horizontal">
    <div class="form-group has-feedback">
      ...
    </div>
    <button type="submit" @click="add" class="btn btn-primary">添加产品&nbsp;&nbsp;&nbsp;&nbsp;</button>
  </form>
  <div class="alert" v-show="alert.status">
    <h4>增加产品功能</h4>
    <lottie-animation 
      :animation-path="lottie"
      :speed="1"
      :loop="true"
      :autoplay="true"
      :style="{width: '100%'}"
      className="logo"
    />
  </div>
</template>

<script>
  import LottieAnimation from 'vue-lottie';
  import successAnimation from '@/assets/json/success.json';
  export default {
    data() {
      return {
        alert: {
          status: false,
        },
        name: '',
        lottie: successAnimation,
      };
    },
    methods: {
      add() {
        this.alert.status = true;
      }
    },
    components: {
      LottieAnimation,
    },
  };
</script>

上述代码实现该过渡效果，效果如下：


四、vue-lottie的插件API：

除了上述使用方式外，vue-lottie 还提供了一些API，可以帮助我们更好的进行开发。

1. animate()

该方法提供了从外部控制Lottie动画的能力：停止，开始，暂停，重置，seak，在我们的组件中可以根据用户的交互事件来触发相应的方法呈现相应的动画。

<template>
  <div>
    <lottie-animation 
      ref="lottieAnimation"
      :animation-path="require('@/assets/animation.json')"
      :speed="1"
      :loop="true"
      :autoplay="false"
      :style="{width: '100%'}"
      className="logo"
    />
    <button @click="play">Play</button>
    <button @click="stop">stop</button>
    <button @click="pause">pause</button>
  </div>
</template>

<script>
  import LottieAnimation from 'vue-lottie';
  export default {
    methods: {
      play() {
        this.$refs.lottieAnimation.animation.play();
      },
      stop() {
        this.$refs.lottieAnimation.animation.stop();
      },
      pause() {
        this.$refs.lottieAnimation.animation.pause();
      },
    },
    components: {
      LottieAnimation,
    },
  };
</script>

2. addEventListener()

该方法提供了用来处理每个与Lottie动画相关的事件的能力，预设了三个事件参数：complete, loopComplete 和 enterFrame。例如：监听动画的播放完成事件

<lottie-animation 
  ref="lottieAnimation"
  :animation-path="require('@/assets/animation.json')"
  :speed="1"
  :loop="false"
  :autoplay="false"
  :style="{width: '100%'}"
  className="logo"
/>

<script>
  import LottieAnimation from 'vue-lottie';
  export default {
    mounted() {
      this.$refs.lottieAnimation.animation.addEventListener('complete', () => {
        console.log('动画播放完成');
      });
    },
    components: {
      LottieAnimation,
    },
  };
</script>

总结

通过vue-lottie我们可以轻松集成Adobe After Effects的矢量动画，让动画变得更加简单、快捷，同时也可以通过API方法来实现一些动画的控制功能，相比较于其他的播放插件更具有灵活性和适用性。在实际的开发中，我们可以结合项目的实际需求，对动画进行更进一步的优化。