初探 lottie

初探 lottie

秋有話說

做爲一名 H5 前端程序員，在一些包含動畫的項目中，設計師老是要來問一下你"這個動畫是要導出序列幀仍是 GIF"，"導出 GIF 可能會有白邊"，"不能再壓縮，再壓就糊了「…...

使用序列幀的方式作動畫

在以前的一些項目中，動畫通常都是讓設計師導出序列幀，而後在前端經過 css 來實現動畫，可是你知道的，序列幀文件比較大，並且我是本身把這些序列幀在 ps 上作成 sprite 的，無疑又增長了本身的工做量，若是使用 TexturePacker 自動生成 sprite，可是序列幀是沒有按順序排放的，TexturePacker 爲了充分利用圖片空間，有些幀還會旋轉,這樣就沒法使用 css 的 steps 直接作序列幀動畫。再者，對於一些有用戶的交互的序列幀，操做起來更加麻煩，序列幀在某些機型上還會出現跳幀的狀況。

使用 GIF 作動畫

使用 GIF 作動畫，有着相同的一些問題，文件大，不可控，GIF 會一致循環播放，沒法作到單次播放，更不用說用戶交互了，有些 GIF 還會有白邊，顯示效果差。

使用 svg 作動畫

在前端本身用 svg 作動畫的方式只試過一次，設計師先在 AE 上導出 svg 的路徑座標，svg 的座標是根據設計畫的順序生成的，這就致使在一些路徑動畫中，維持成本至關大，並且前端直接使用 svg 作的一些動畫自己實現的成本也比較高。

總的來講，以上的三種方法，都有這着各自的或多或少的一些缺點。

初探 lottie

最近在 GitHub 上發現了 airbnb 一個開源項目 lottie-web，試了一下，這個庫能夠很方便地對動畫進行操做，直接在 AE 上導出 json 文件操做。可是仍是發現了一個問題，對於一些把一些圖片導入 AE 作成的動畫，在 AE 上導出 json 文件時同時還有導出一個 images 文件夾，裏面存放了一些動畫中的圖片，這個文件夾的大小也是有點大的。然而，這個庫仍是值得去試一下的。下面對 lottie 的使用方法作一些記錄。

AE 安裝 bodymovin 插件

1. 下載安裝 ZXP installer
2. 下載 bodymovin 插件
3. 把下載好的 bodymovin.zxp 拖到 ZXP installer 中
4. 在 AE 的首選項->常規中勾選容許腳本寫入文件和訪問網絡
5. 在 AE 中打開菜單窗口->擴展->Bodymovin，選擇要輸出的動畫和存放路徑，點擊render渲染輸出。
6. 渲染完畢就會看到輸出的 json 文件和 images 文件夾。

獲取 bodymovin 庫

你能夠在 html 頁面上直接調用靜態地址https://cdnjs.com/libraries/bodymovin，你也能夠下載 bodymovin 的 js 源文件，在 AE 打開 bodymovin 插件時有個Get Player按鈕，能夠點擊跳轉下載源文件。

<script src="js/bodymovin.js" type="text/javascript"></script>
<!-- 或者 -->
<script src="https://cdnjs.com/libraries/bodymovin" type="text/javascript"></script>

Bodymovin 在 npm 和 bower 上也可使用。

# NPM
npm install lottie-web

# Bower
bower install lottie-web

另外，文件lottie.light.js只支持播放以 svg 格式導出的動畫。

使用

調用 lottie.loadAnimation()方法啓動動畫。

var animation = bodymovin.loadAnimation({
  container: document.getElementById('lottie'), // Required
  path: 'data.json', // Required
  renderer: 'svg/canvas/html', // Required
  loop: true, // Optional
  autoplay: true, // Optional
  name: "Hello World", // Name for future reference. Optional.
})

• container：動畫容器，dom 元素
• path：從 AE 中導出的 json 文件
• renderer：動畫格式
• loop：是否循環播放動畫
• autoplay： 是否自動播放動畫
• name：動畫名稱

動畫實例的主要方法

anim.play() — 播放動畫。

anim.stop() — 中止動畫。

anim.pause() — 暫停動畫。

anim.setSpeed(speed) — 設置播放速度，參數 speed 爲 Number ，1爲正常速度。

$('.speed-slow').click(function () {
    anim.setSpeed(0.5);
});

$('.speed-normal').click(function () {
    anim.setSpeed(1);
});

$('.speed-fast').click(function () {
    anim.setSpeed(2);
});

anim.goToAndStop(value, isFrame) — 跳到某一幀並暫停播放。第一個參數是 Number 。第二個參數是 Boolean，設置true則代表第一個參數表明的是幀數，false表明第一個參數爲時間值（單位毫秒），默認 false。

$('.gostop').click(function () {
    anim.goToAndStop(3000, false);
});

anim.goToAndPlay(value, isFrame) — 跳到某一幀並播放。同上。

$('.goplay').click(function () {
    anim.goToAndPlay(1000, true);
});

anim.setDirection(direction) — 設置播放方向。1 爲正着播，-1反着播。

$('.dirc').click(function () {
    anim.setDirection(-1);
});

anim.playSegments(segments, forceFlag) — 播放某一片斷。第一個參數爲一維數組或多維數組，每一個數組包含兩個值（開始幀，結束幀），第二個參數是一個 Boolean ，決定是否當即強制播放該片斷。

$('.seg1').click(function () {
    anim.playSegments([10, 20], false);
});

$('.seg2').click(function () {
    anim.playSegments([[0, 10], [70, 80]], true);
});

anima.destroy() — 註銷動畫。

lottie 的主要方法

lottie.play(<name>) — 播放全部動畫，name爲動畫名稱，播放該動畫。

lottie.stop(<name>) — 中止因此動畫，name爲動畫名稱，中止該動畫。

lottie.setSpeed(speed, <name>) — 設置動畫播放速度，speed指定速度，1爲正常值，name爲動畫名稱，只設定該動畫的速度。

$('.lottie-slow').click(function () {
    lottie.setSpeed(0.5);
});

$('.lottie-normal').click(function () {
    lottie.setSpeed(1);
});

$('.lottie-fast').click(function () {
    lottie.setSpeed(2);
});

lottie.setDirection(direction, <name>) — 設置動畫播放方向，direction指定方向，1爲正向，-1爲反向，name爲動畫名稱，只設定該動畫。

lottie.loadAnimation(obj) — 加載動畫

lottie.destroy() — 註銷動畫釋放資源，同時清空 dom 節點。

lottie.registerAnimation() — 能夠給一個節點直接註冊一個動畫，該節點必須包含有指向 json 文件的data-animation-path屬性。

lottie.setQuality() — 設置播放質量，默認 high，能夠設置爲 high、medium、low 或者一個大於 1 的數值。在有些動畫中，數值低於 2 時不會有區別。

事件監聽

complete — 動畫播放結束時觸發（循環播放不會觸發）

anim.addEventListener('complete', function () {
    console.log('complete');
});

loopComplete — 進入下一個循環時觸發

anim.addEventListener('loopComplete', function () {
    console.log('loop complete');
});

enterFrame — 每進入一幀觸發一次

anim.addEventListener('enterFrame', function () {
    console.log('enter frame');
});

segmentStart — 進入片斷播放時觸發

anim.addEventListener('segmentStart', function () {
    console.log('segment start');
});

config_ready — 初始化配置完成時觸發

anim.addEventListener('config_ready', function () {
    console.log('config ready');
});

data_ready — 動畫全部部分加載完成時觸發

anim.addEventListener('data_ready', function () {
    console.log('data ready');
});

DOMLoaded — dom 元素加載完成時觸發

anim.addEventListener('DOMLoaded', function () {
    console.log('dom loaded');
});

destroy — 註銷動畫時觸發

anim.addEventListener('destroy', function () {
    console.log('destroy');
});

code