需求分析
最近公司項目需要在懂表帝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'
; exportdefault
{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>
運行效果如下:
效果圖
簡直秒殺gif對吧,可以自由控制開始暫停結束,可以正放倒放動畫,可以監聽播放事件(比如在需求中,動畫播放完成後,需要進行後續的邏輯操作和UI顯示),而且背景是透明的,完全可以適應任何界面UI。這種方法生成的動畫資源體積比gif小很多:上述動畫:
- gif:684k
- lottie:186k
動畫方案已經確定了,測試頁面也證明毫無問題,那麼剩下的就是繁瑣的UI佈局了,這裡就不再贅述了,直接上成品圖:
成品圖
最後,請允許我在這裡水一波廣告:土豪程序員們有帶手錶玩手錶的,可以下載【懂表帝】app玩一玩,羊毛黨也可以來玩玩,有很多積分兌換實物獎勵的,有名錶哦!