如何在html5中通過(guò)JSON實(shí)現(xiàn)動(dòng)畫效果

發(fā)布時(shí)間：2022-02-22 15:34:00 來(lái)源：億速云閱讀：600 作者：iii 欄目：開(kāi)發(fā)技術(shù)

本篇內(nèi)容主要講解“如何在html5中通過(guò)JSON實(shí)現(xiàn)動(dòng)畫效果”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何在html5中通過(guò)JSON實(shí)現(xiàn)動(dòng)畫效果”吧!

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ù)格式是這樣的

那如果你要在單獨(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)畫適配移動(dòng)端

之所以覺(jué)得這是個(gè)坑是因?yàn)?，設(shè)計(jì)師給我的動(dòng)畫是全屏且非透明底的，然后她要求我將這個(gè)動(dòng)畫以寬度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;
}

到此，相信大家對(duì)“如何在html5中通過(guò)JSON實(shí)現(xiàn)動(dòng)畫效果”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

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

如何在html5中通過(guò)JSON實(shí)現(xiàn)動(dòng)畫效果

猜你喜歡

最新資訊

相關(guān)推薦

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