動畫利器-lottie在懂表帝App中的實戰應用

需求分析

最近公司項目須要在懂表帝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玩一玩，羊毛黨也能夠來玩玩，有不少積分兌換實物獎勵的，有名錶哦！