Lottie&vue-lottie--更简单的动画实现方式

什么是Lottie

Lottie是一个可以通过bodymovin插件来解析Adobe After Effects动画，并生成json格式的文件。该json文件可以通过Lottie开源库在iOS,Android,macOS,React Native中进行解析生成动画效果。

下面是一些官网给出的动画效果：

为什么使用Lottie

一直以来我们的设计同学都是使用设计软件，设计动画效果，开发同学再通过代码来实现动效。对于复杂的动画，开发同学要用很长的时间来实现，并且还有可能无法达到设计同学的最初的效果。
还有一种实现动画的方式就是gif图。然而Android并不支持gif图，而且gif图对于移动端还有占用过多空间的问题。

那么，Lottie为我们做了什么呢。
首先，设计同学在Adobe After Effects上设计了动画效果，通过bodymovin插件，可以将动画导出成一个json文件。
然后，开发同学就可以通过Lottie将前面生成的json文件渲染成动画效果。
这样就可以高效的实现很多复杂动画效果啦。

在vuejs中使用Lottie

对于现在十分流行的前端框架vuejs，当然有支持Lottie的组件。

vue-lottie是一个基于vuejs的动画效果实现组件。它基于lottie开源项目，可以将After Effects导出的json文件渲染成svg/canvas/html动画效果。

vue-lottie安装

通过NPM安装

npm install --save vue-lottie

vue-lottie使用

<template>
    <div id="app">
        <lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>
        <div>
            <p>Speed: x{{animationSpeed}}</p>
            <input type="range" value="1" min="0" max="3" step="0.5"
                   v-on:change="onSpeedChange" v-model="animationSpeed">
        </div>
        <button v-on:click="stop">stop</button>
        <button v-on:click="pause">pause</button>
        <button v-on:click="play">play</button>
    </div>
</template>

<script>
  import Lottie from './lottie.vue';
  import * as animationData from './assets/pinjump.json';

  export default {
    name: 'app',
    components: {
      'lottie': Lottie
    },
    data() {
      return {
        defaultOptions: {animationData: animationData},
        animationSpeed: 1
      }
    },
    methods: {
      handleAnimation: function (anim) {
        this.anim = anim;
      },

      stop: function () {
        this.anim.stop();
      },

      play: function () {
        this.anim.play();
      },

      pause: function () {
        this.anim.pause();
      },

      onSpeedChange: function () {
        this.anim.setSpeed(this.animationSpeed);
      }
    }
  }
</script>

轮子工厂--一个分享优秀的vue,angular组件的网站