怎么在Html5頁(yè)面中使用JSON實(shí)現(xiàn)一個(gè)動(dòng)畫

發(fā)布時(shí)間：2021-03-25 16:20:58 來(lái)源：億速云閱讀：479 作者：Leah 欄目：web開發(fā)

今天就跟大家聊聊有關(guān)怎么在Html5頁(yè)面中使用JSON實(shí)現(xiàn)一個(gè)動(dòng)畫，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

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)畫需要的json數(shù)據(jù)放在data.json文件里面，但是給出的json文件里面的數(shù)據(jù)格式是這樣的（太長(zhǎng)了截不完

怎么在Html5頁(yè)面中使用JSON實(shí)現(xiàn)一個(gè)動(dòng)畫

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

怎么在Html5頁(yè)面中使用JSON實(shí)現(xiàn)一個(gè)動(dòng)畫

這樣你可以通過(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)畫適配移動(dòng)端

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

怎么在Html5頁(yè)面中使用JSON實(shí)現(xiàn)一個(gè)動(dòng)畫

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

怎么在Html5頁(yè)面中使用JSON實(shí)現(xiàn)一個(gè)動(dò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;
}

最終效果：

怎么在Html5頁(yè)面中使用JSON實(shí)現(xiàn)一個(gè)動(dòng)畫

看完上述內(nèi)容，你們對(duì)怎么在Html5頁(yè)面中使用JSON實(shí)現(xiàn)一個(gè)動(dòng)畫有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問(wèn)一下細(xì)節(jié)

怎么在Html5頁(yè)面中使用JSON實(shí)現(xiàn)一個(gè)動(dòng)畫

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽