需求分析
最近公司項目需要在懂表帝App中內嵌H5活動頁，其中有一個開寶箱的動畫（如下圖）：
一般遇到動畫第一反應是使用gif動態圖，由UI小姐姐直接做好gif放到頁面上就可以了。但是在這個需求中，動畫是運行在半透明彈出層上，而gif不支持alpha通道，而且在本頁面的需求中需要在動畫結束后進行后續的邏輯操作，gif不能有效的監聽動畫完成事件。
所以就輪到lottie登場了！
lottie簡介
Lottie一個適用于Web，Android，iOS，React Native和Windows 的移動庫，它可以使用Bodymovin解析以json 格式導出的Adobe After Effects動畫，并在設備上進行本地渲染！(如下圖)
傳送門：lottie官網
上手
安裝 Bodymovin AE插件
首先，去github倉庫看文檔，根據文檔下載好Bodymovin插件。傳送門：github
這是一個接觸ui小姐姐的機會，摸著她的鼠標，給她安裝AE插件，并且手把手的教她如何在制作動畫完成后導出json文件。
動畫導出后得到：
- data.json
- images文件夾（如果動畫是使用圖層制作的就有這個文件夾）
把這兩個文件放到項目里。
lottie使用說明
因為是做H5網頁，我們使用lottie-web。
基本用法：
const animation = lottie.loadAnimation({
container: document.getElementById('box'),
renderer: 'svg',// 渲染方式:svg、canvas
loop: true, //循環播放，默認：false
autoplay: true, //自動播放 ，默認true
path: '' // json 路徑
})
常用方法：
animation.play(); // 播放，從當前幀開始播放
animation.stop(); // 停止，并回到第0幀
animation.pause(); // 暫停，并保持當前幀
animation.goToAndStop(value, isFrame); // 跳到某個時刻/幀并停止isFrame(默認false)指示value表示幀還是時間(毫秒)
animation.goToAndPlay(value, isFrame); // 跳到某個時刻/幀并進行播放
animation.goToAndStop(30, true); // 跳轉到第30幀并停止
animation.goToAndPlay(300); // 跳轉到第300毫秒并播放
animation.playSegments(arr, forceFlag); // arr可以包含兩個數字或者兩個數字組成的數組，forceFlag表示是否立即強制播放該片段
animation.playSegments([10,20], false); // 播放完之前的片段，播放10-20幀
animation.playSegments([[0,5],[10,18]], true); // 直接播放0-5幀和10-18幀
animation.setSpeed(speed); // 設置播放速度，speed為1表示正常速度
animation.setDirection(direction); // 設置播放方向，1表示正向播放，-1表示反向播放
animation.destroy(); // 刪除該動畫，移除相應的元素標簽等。在unmount的時候，需要調用該方法
常用監聽事件：
animation.addEventListener('data_ready', () => { console.log('animation data has loaded'); });
//data_ready:動畫數據加載完畢
//config_ready:完成初始配置后
//data_failed:當無法加載動畫的一部分時
//loaded_images:當所有圖像加載成功或錯誤時
//DOMLoaded:將元素添加到DOM時
//config_ready:完成初始配置后
//complete:動畫執行完成
//loopComplete:動畫循環周期執行完成
//destroy:動畫銷毀
//enterFrame
//segmentStart
使用導出的動畫文件
項目H5是用vue開發的，先做一個測試頁面看看lottie的效果。
安裝lottie-web
npm install lottie-web
在頁面中使用
<template>
<div class="share-ai" :class="{bg:hasBg}">
<div ref="lottie" class="lottie" ></div>
<button @click="play">播放</button>
<button @click="pause">暫停</button>
<button @click="stop">停止</button>
<button @click="hasBg=!hasBg">測試透明動畫</button>
<button @click="changeSpeed(1.5)">1.5倍速</button>
<button @click="changeSpeed(2)">2倍速</button>
<button @click="changeSpeed(0.5)">0.5倍速</button>
<button @click="goToAndStop()">直接到最后一幀</button>
</div>
</template>
import lottie from 'lottie-web';
export default {
data () {
return {
hasBg:false,
}
},
mounted(){
this.aiRobot=lottie.loadAnimation({
container: this.$refs.lottie, // the dom element that will contain the animation
renderer: 'svg',
loop: false,
autoplay: false,
path: '/lottie/chest/coin-500.json' // the path to the animation json
});
},
methods: {
play(){
this.aiRobot.stop()
this.aiRobot.play()
},
stop(){
this.aiRobot.stop()
},
pause(){
this.aiRobot.pause()
},
changeSpeed(value){
this.aiRobot.setSpeed(value)
this.aiRobot.stop()
this.aiRobot.play()
},
goToAndStop(){
this.aiRobot.goToAndStop(3920)
}
}
}
運行效果如下：
簡直秒殺gif對吧，可以自由控制開始暫停結束，可以正放倒放動畫，可以監聽播放事件（比如在需求中，動畫播放完成后，需要進行后續的邏輯操作和UI顯示），而且背景是透明的，完全可以適應任何界面UI。
這種方法生成的動畫資源體積比gif小很多：
上述動畫：
- gif:684k
- lottie:186k
動畫方案已經確定了，測試頁面也證明毫無問題，那么剩下的就是繁瑣的UI布局了，這里就不再贅述了，直接上成品圖：
最后，請允許我在這里水一波廣告：土豪程序員們有帶手表玩手表的，可以下載【懂表帝】app玩一玩，羊毛黨也可以來玩玩，有很多積分兌換實物獎勵的，有名表哦！
