App下載

怎么在頁面中通過JSON實(shí)現(xiàn)動(dòng)畫效果?html5頁面動(dòng)畫實(shí)現(xiàn)案例詳解!

猿友 2021-07-27 15:54:22 瀏覽數(shù) (5747)
反饋

有喜歡看動(dòng)畫的小伙伴們今天快來看看,小編為大家?guī)砹耍骸霸趺丛陧撁嬷型ㄟ^JSON實(shí)現(xiàn)動(dòng)畫效果?html5頁面動(dòng)畫實(shí)現(xiàn)案例詳解!”這個(gè)問題的相關(guān)內(nèi)容分享!大家就可以自己做簡(jiǎn)易的動(dòng)畫效果啦!

問題背景

有一天我們的UI設(shè)計(jì)師找到我說,要把頁面中我自己用程序?qū)懙膭?dòng)畫,換成他們給的json動(dòng)畫,原因是有的動(dòng)畫很復(fù)雜,自己寫起來達(dá)不到他們的預(yù)期效果(寫到這里我突然想到一個(gè)問題,這么復(fù)雜的動(dòng)畫為什么不使用gif。。。。坐我對(duì)面的安卓開發(fā)小哥答因?yàn)間if播放的時(shí)候可能質(zhì)量不高不流暢,好吧我信了)

我:????客戶端可以加json動(dòng)畫,H5頁面沒聽說過可以讀json動(dòng)畫哎

設(shè)計(jì)師一臉肯定,說可以的,有web版本。

寫到這里,我真的要好好夸一波我們的設(shè)計(jì)師妹子了,幾乎很多蠻好的解決方法都是在他們的“逼迫”之下找到的(哦,她們還會(huì)寫H5頁面。。。要我有何用系列

那問題來了,怎么在H5頁面里面使用json動(dòng)畫呢

如何在H5頁面內(nèi)使用json動(dòng)畫

這時(shí)候設(shè)計(jì)師甩了一個(gè)鏈接給我,看這里lottie-web ;我點(diǎn)進(jìn)去了解了一下,是Airbnb開源的一個(gè)動(dòng)畫庫,該庫可以完成很多酷炫動(dòng)畫,使用起來也很簡(jiǎn)單,設(shè)計(jì)師只需要通過AE做成的動(dòng)畫導(dǎo)出JSON文件,然后前端使用Lottie直接加載JSON文件生成動(dòng)畫,既不需要設(shè)計(jì)師切N多gif,也不需要前端去進(jìn)行復(fù)雜繪制了,一舉兩得,并且,Lottie全平臺(tái)可用,ios、Android、web、React Native都可以,且占用內(nèi)存少,加載流暢。(這么個(gè)神仙東西我為什么現(xiàn)在才發(fā)現(xiàn)。。

說了這么多,那怎么在H5頁面里面使用呢?

很簡(jiǎn)單了,設(shè)計(jì)師生成的文件夾發(fā)給你(設(shè)計(jì)師那邊只用在AE中加個(gè)lottie插件,導(dǎo)出就行了),打開之后應(yīng)該是這樣子的,打開demo.html就知道是怎么用的了(所以我還在這里寫什么技術(shù)文章

玩笑歸玩笑,其實(shí)在使用中還是碰到了很多坑的,這里記錄幾個(gè)使用時(shí)注意的地方

1.demo.html里面有很多內(nèi)聯(lián)的東西,使用時(shí)堆積在頁面內(nèi)不好看

仔細(xì)看一下,其實(shí)demo.html把js和json都放進(jìn)去了,這時(shí)候我們可以把js和json單獨(dú)分出來,js的話可以使用cdn上提供的地址

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js">
</script>

動(dòng)畫需要的json數(shù)據(jù)放在data.json文件里面,但是給出的json文件里面的數(shù)據(jù)格式是這樣的(太長(zhǎng)了 截不完

那如果你要在單獨(dú)的一個(gè)html里面使用script的方式引入json文件的話,會(huì)報(bào)錯(cuò),所以需要修改json文件,在前面加上變量,賦值。如下圖:

這樣你可以通過像引入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)來就行了,如下:

import animationData from './data.json'

2.使動(dòng)畫適配移動(dòng)端

之所以覺得這是個(gè)坑是因?yàn)?,設(shè)計(jì)師給我的動(dòng)畫是全屏且非透明底的,然后她要求我將這個(gè)動(dòng)畫以寬度100% 高度垂直居中截取的方式定位,我在瀏覽器里面試了下,360*640屏幕下,寬度100%,表現(xiàn)形式是這樣的(看上去是高度100% 寬度適配居中 兩邊漏出了黑色的背景色,見下圖藍(lán)色框起來的部分)

換成iPhone X的屏幕下,相反,表現(xiàn)出來是寬度100% 高度適配居中,上下漏出黑色背景色,見下圖藍(lán)色框起來的部分(究其原因是因?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)圖就沒弄了,感興趣的可以試一下。

適用范圍:我感覺一般全屏的或者局部很復(fù)雜的動(dòng)畫可以使用這個(gè)方法一試,比gif要流暢,兼容性也做得不錯(cuò),一些安卓產(chǎn)品比較酷炫的開屏就是使用的這個(gè)方法,H5頁面的話,簡(jiǎn)單動(dòng)畫一般自己程序?qū)崿F(xiàn)就可以,還可以避免踩坑。

參考鏈接:
lottie官網(wǎng)
lottie-web github地址

在文章中我們可以知道一些有關(guān)于實(shí)現(xiàn):“怎么在頁面中通過JSON實(shí)現(xiàn)動(dòng)畫效果?html5頁面動(dòng)畫實(shí)現(xiàn)案例詳解!”這個(gè)問題的方法,當(dāng)然了我們?cè)诹私膺@個(gè)方法之后的收獲肯定不會(huì)這么少,更多相關(guān)的html5這方面的內(nèi)容我們也可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解! 



0 人點(diǎn)贊