Html5頁面內(nèi)使用JSON動畫的實現(xiàn)

發(fā)布時間：2019-01-29 16:00:24 作者：羊羊羊

這篇文章主要介紹了Html5頁面內(nèi)使用JSON動畫的實現(xiàn)的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

問題背景

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

我：？？？？客戶端可以加json動畫，H5頁面沒聽說過可以讀json動畫哎

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

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

那問題來了，怎么在H5頁面里面使用json動畫呢

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

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

說了這么多，那怎么在H5頁面里面使用呢？

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

玩笑歸玩笑，其實在使用中還是碰到了很多坑的，這里記錄幾個使用時注意的地方

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

仔細看一下，其實demo.html把js和json都放進去了，這時候我們可以把js和json單獨分出來，js的話可以使用cdn上提供的地址

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

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

那如果你要在單獨的一個html里面使用script的方式引入json文件的話，會報錯，所以需要修改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進來就行了，如下：

import animationData from './data.json'

2.使動畫適配移動端

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

換成iPhone X的屏幕下，相反，表現(xiàn)出來是寬度100% 高度適配居中，上下漏出黑色背景色，見下圖藍色框起來的部分（究其原因是因為iphonex屏幕較長

這個布局好熟悉哇，跟img的object-fit屬性取值為contain的時候表現(xiàn)一致（object-fit也是寶藏，有興趣的同學(xué)可以去研究一下，非常好用）

我這里解決設(shè)計師的需求主要增加下面的代碼：

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;
}

最終效果：