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組件的網站