免費(fèi)AI編程助手
有喜歡看動(dòng)畫(huà)的小伙伴們今天快來(lái)看看，小編為大家?guī)?lái)了：“怎么在頁(yè)面中通過(guò)JSON實(shí)現(xiàn)動(dòng)畫(huà)效果？html5頁(yè)面動(dòng)畫(huà)實(shí)現(xiàn)案例詳解！”這個(gè)問(wèn)題的相關(guān)內(nèi)容分享！大家就可以自己做簡(jiǎn)易的動(dòng)畫(huà)效果啦!
問(wèn)題背景
有一天我們的UI設(shè)計(jì)師找到我說(shuō)，要把頁(yè)面中我自己用程序?qū)懙膭?dòng)畫(huà)，換成他們給的json動(dòng)畫(huà)，原因是有的動(dòng)畫(huà)很復(fù)雜，自己寫(xiě)起來(lái)達(dá)不到他們的預(yù)期效果（寫(xiě)到這里我突然想到一個(gè)問(wèn)題，這么復(fù)雜的動(dòng)畫(huà)為什么不使用gif。。。。坐我對(duì)面的安卓開(kāi)發(fā)小哥答因?yàn)間if播放的時(shí)候可能質(zhì)量不高不流暢，好吧我信了）
我：？？？？客戶(hù)端可以加json動(dòng)畫(huà)，H5頁(yè)面沒(méi)聽(tīng)說(shuō)過(guò)可以讀json動(dòng)畫(huà)哎
設(shè)計(jì)師一臉肯定，說(shuō)可以的，有web版本。
寫(xiě)到這里，我真的要好好夸一波我們的設(shè)計(jì)師妹子了，幾乎很多蠻好的解決方法都是在他們的“逼迫”之下找到的（哦，她們還會(huì)寫(xiě)H5頁(yè)面。。。要我有何用系列
那問(wèn)題來(lái)了，怎么在H5頁(yè)面里面使用json動(dòng)畫(huà)呢
如何在H5頁(yè)面內(nèi)使用json動(dòng)畫(huà)
這時(shí)候設(shè)計(jì)師甩了一個(gè)鏈接給我，看這里lottie-web ；我點(diǎn)進(jìn)去了解了一下，是Airbnb開(kāi)源的一個(gè)動(dòng)畫(huà)庫(kù)，該庫(kù)可以完成很多酷炫動(dòng)畫(huà)，使用起來(lái)也很簡(jiǎn)單，設(shè)計(jì)師只需要通過(guò)AE做成的動(dòng)畫(huà)導(dǎo)出JSON文件，然后前端使用Lottie直接加載JSON文件生成動(dòng)畫(huà)，既不需要設(shè)計(jì)師切N多gif，也不需要前端去進(jìn)行復(fù)雜繪制了，一舉兩得，并且，Lottie全平臺(tái)可用，ios、Android、web、React Native都可以，且占用內(nèi)存少，加載流暢。（這么個(gè)神仙東西我為什么現(xiàn)在才發(fā)現(xiàn)。。
說(shuō)了這么多，那怎么在H5頁(yè)面里面使用呢？
很簡(jiǎn)單了，設(shè)計(jì)師生成的文件夾發(fā)給你(設(shè)計(jì)師那邊只用在AE中加個(gè)lottie插件，導(dǎo)出就行了)，打開(kāi)之后應(yīng)該是這樣子的，打開(kāi)demo.html就知道是怎么用的了（所以我還在這里寫(xiě)什么技術(shù)文章
玩笑歸玩笑，其實(shí)在使用中還是碰到了很多坑的，這里記錄幾個(gè)使用時(shí)注意的地方
1.demo.html里面有很多內(nèi)聯(lián)的東西，使用時(shí)堆積在頁(yè)面內(nèi)不好看
仔細(xì)看一下，其實(shí)demo.html把js和json都放進(jìn)去了，這時(shí)候我們可以把js和json單獨(dú)分出來(lái)，js的話可以使用cdn上提供的地址
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js">
</script>動(dòng)畫(huà)需要的json數(shù)據(jù)放在data.json文件里面，但是給出的json文件里面的數(shù)據(jù)格式是這樣的（太長(zhǎng)了 截不完
那如果你要在單獨(dú)的一個(gè)html里面使用script的方式引入json文件的話，會(huì)報(bào)錯(cuò)，所以需要修改json文件，在前面加上變量，賦值。如下圖：
這樣你可以通過(guò)像引入js文件的方式一樣的引入該json:
<script type="text/javascript" src="./data.json"></script>這樣可用的demo.html就縮減成了下面這樣:
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="UTF-8">
<head>
<style>
body{
background-color:black;
margin: 0px;
height: 100%;
overflow: hidden;
}
#lottie{
background-color:#fff;
width:100%;
height:100%;
display:block;
overflow: hidden;
transform: translate3d(0,0,0);
text-align: center;
opacity: 1;
}
</style>
</head>
<body>
<div id="lottie"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js"></script>
<script type="text/javascript" src="./data.json"></script>
<script>
var params = {
container: document.getElementById('lottie'),
renderer: 'svg',
loop: true,
autoplay: true,
animationData: animationData
};
var anim;
anim = lottie.loadAnimation(params);
</script>
</body>
</html>當(dāng)然，你如果使用的是js模塊化編程的話，可以不用更改data.json，直接import進(jìn)來(lái)就行了，如下：
import animationData from './data.json'2.使動(dòng)畫(huà)適配移動(dòng)端
之所以覺(jué)得這是個(gè)坑是因?yàn)椋O(shè)計(jì)師給我的動(dòng)畫(huà)是全屏且非透明底的，然后她要求我將這個(gè)動(dòng)畫(huà)以寬度100% 高度垂直居中截取的方式定位，我在瀏覽器里面試了下，360*640屏幕下，寬度100%，表現(xiàn)形式是這樣的（看上去是高度100% 寬度適配居中 兩邊漏出了黑色的背景色，見(jiàn)下圖藍(lán)色框起來(lái)的部分）
換成iPhone X的屏幕下，相反，表現(xiàn)出來(lái)是寬度100% 高度適配居中，上下漏出黑色背景色，見(jiàn)下圖藍(lán)色框起來(lái)的部分（究其原因是因?yàn)閕phonex屏幕較長(zhǎng)
這個(gè)布局好熟悉哇，跟img的object-fit屬性取值為contain的時(shí)候表現(xiàn)一致（object-fit也是寶藏，有興趣的同學(xué)可以去研究一下，非常好用）
我這里解決設(shè)計(jì)師的需求主要增加下面的代碼：
js部分：
setTimeout(function() {
document.getElementsByTagName('svg')[0].style.height = 'auto';
}, 50);
css部分：（給lottie增加flex布局）
#lottie {
width:100%;
height:100%;
transform: translate3d(0,0,0);
text-align: center;
opacity: 1;
position: absolute;
top: 0;
left: 0;
z-index: 3;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}最終效果：
總結(jié)
以上圖片截圖都是靜態(tài)的，實(shí)際是有一個(gè)動(dòng)態(tài)效果的，我不知道怎么添加動(dòng)圖就沒(méi)弄了，感興趣的可以試一下。
適用范圍：我感覺(jué)一般全屏的或者局部很復(fù)雜的動(dòng)畫(huà)可以使用這個(gè)方法一試，比gif要流暢，兼容性也做得不錯(cuò)，一些安卓產(chǎn)品比較酷炫的開(kāi)屏就是使用的這個(gè)方法，H5頁(yè)面的話，簡(jiǎn)單動(dòng)畫(huà)一般自己程序?qū)崿F(xiàn)就可以，還可以避免踩坑。
參考鏈接：
lottie官網(wǎng)
lottie-web github地址
在文章中我們可以知道一些有關(guān)于實(shí)現(xiàn)：“怎么在頁(yè)面中通過(guò)JSON實(shí)現(xiàn)動(dòng)畫(huà)效果？html5頁(yè)面動(dòng)畫(huà)實(shí)現(xiàn)案例詳解！”這個(gè)問(wèn)題的方法，當(dāng)然了我們?cè)诹私膺@個(gè)方法之后的收獲肯定不會(huì)這么少，更多相關(guān)的html5這方面的內(nèi)容我們也可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解！
