動畫道路上的新寵 -- Lottie

可以成爲新寵，一定是有他本身的獨特之處，那麼lottie究竟是什麼呢？

在沒有接觸lottie以前，要想作一個很炫酷的動畫效果要通過很複雜的計算，嗯，對於不善於這種高難度的計算的我來講，非常具備挑戰性啊，不過從今之後，製做一個動畫就很容易啦

1. lottie 簡介

Lottie是一個iOS，Android和React Native庫，能夠實時渲染After Effects動畫，而且容許本地app像靜態資源那樣輕鬆地使用動畫。Lottie使用名爲Bodymovin的開源After Effects的擴展程序導出的JSON文件格式的動畫數據。簡單來講就是利用一個json格式的動畫數據來渲染到頁面上，就是這麼簡單，官方文檔上就有不少的小demo，好比👇

2. lottie 能幫到咱們嗎？

答案是確定的，首先，設計同窗在Adobe After Effects上設計了動畫效果，經過bodymovin插件，能夠將動畫導出成一個json文件。

而後，開發同窗就能夠經過Lottie將前面生成的json文件渲染成動畫效果。
這樣就能夠高效的實現不少複雜動畫效果啦

是否是看着就頗有技術含量，不要急，下面咱們也來作一個

3. lottie 實例

• 第一步 安裝vue-cli 搭建一個基本的vue實例

npm install -g vue-cli

vue init webpack test   // 構建一個名爲test的文件

• 第二步 安裝vue-lottie

npm install --save vue-lottie

• 第三步 引入到你的文件中，固然你也能夠全局引入

import Lottie from 'vue-lottie' 

• 第四步 引入json文件

這一步非常關鍵，他決定了你動畫的成敗，在作練習的時候，你能夠到下面這個地方，也就是官網去找一個你喜歡的動畫，而後下載下來

神奇世界的大門

像這樣引入到你的文件中

import * as animationData from './assets/pumped_up.json'複製代碼

• 第五步 開始作動畫啦

    像引入canvas同樣寫入你的文件中

<lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>複製代碼

  不一樣於canvas的是他要有本身的方法

data () {
    return {
      defaultOptions: { animationData: animationData },
      animationSpeed: 1,
      anim: {}
    }
  },
  methods: {
    handleAnimation (anim) {
      this.anim = anim
    }
  }複製代碼

若是你想要加上暫停鍵，開始鍵等這些就這樣寫👇

<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 @click="stop">stop</button>
    <button @click="pause">pause</button>
    <button @click="play">play</button>
  </div>
</template>
<script>
import Lottie from 'vue-lottie'
import * as animationData from './assets/pumped_up.json'
export default {
  name: 'app',
  components: {    'lottie': Lottie  },
  data () {
    return {
      defaultOptions: { animationData: animationData },
      animationSpeed: 1,
      anim: {}
    }
  },
  methods: {
    handleAnimation (anim) { 
     this.anim = anim
    },
    // 中止動畫
    stop () {
      this.anim.stop()
    },
    // 開始動畫
    play: function () {
      this.anim.play()
    },
    // 暫停動畫
    pause: function () {
      this.anim.pause()
    },
    // 動畫速度
    onSpeedChange () {
      this.anim.setSpeed(this.animationSpeed)
    }
  }}
</script>複製代碼

好了，到了看效果的時候了👇（我認可這個動圖作得有點醜，可是相信我，運行的效果然的很贊👍）

• 第六步  感謝欣賞

上面的案例是否是很簡單呢，不知道這個新的分享有沒有讓你get到新世界的大門，反正我是領略到了，想要作更炫酷的效果能夠本身細細的研究一下哦☺️

最後附上開源地址：

• Android: Android地址
• iOS： iOS地址
• React Native：React Native地址
  
• lottie-web地址：github.com/airbnb/lott…