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

小小包子發表於2020-03-21
動畫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玩一玩，羊毛黨也可以來玩玩，有很多積分兌換實物獎勵的，有名錶哦！

相關文章