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

2021-04-04 12:51:02 佚名

需求分析

最近公司項目需要在懂表帝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。基本用法：

<code>const animation = lottie.loadAnimation({
      
container
: document
.getElementById('box'),
     renderer
: 'svg', 
     loop
: true,   
     autoplay
: true,  
     path
: ''   
})
/<code>

常用方法：

<code>animation
.play();  

animation
.stop();  

animation
.pause();  

animation
.goToAndStop(value, isFrame);  

animation
.goToAndPlay(value, isFrame);  

animation
.goToAndStop(30, true);  

 
animation
.goToAndPlay(300);  

animation
.playSegments(arr, forceFlag);  

animation
.playSegments
([10,20], false);  

animation
.playSegments
([[0,5]
,[10,18]], true);  

animation
.setSpeed(speed);  

animation
.setDirection
(direction);  

animation
.destroy();  
/<code>

常用監聽事件：

<code>animation.addEventListener('data_ready'
, 
()
 =>
 { console
.log('animation data has loaded'); });

 
 
 
 
 
 
 
 
 
 
 
/<code>

使用導出的動畫文件

項目H5是用vue開發的，先做一個測試頁面看看lottie的效果。安裝lottie-web

<code>npm install lottie-web
/<code>

在頁面中使用

<code><
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
>
/<code>

<code>import
 lottie from 'lottie-web';
export default {

    data () {
        return {
            hasBg:false,
        }
    },
    mounted(){
        this.aiRobot=lottie.loadAnimation({
            container: this.$refs.lottie,  
            renderer: 'svg',
            loop: false,
            autoplay: false,
            path: '/lottie/chest/coin-500.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)
        }
    }
}
/<code>