溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關怎么在Html5頁面中使用JSON實現一個動畫，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
1.demo.html里面有很多內聯的東西，使用時堆積在頁面內不好看
仔細看一下，其實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數據放在data.json文件里面，但是給出的json文件里面的數據格式是這樣的（太長了 截不完
那如果你要在單獨的一個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>當然，你如果使用的是js模塊化編程的話，可以不用更改data.json，直接import進來就行了，如下：
import animationData from './data.json'
2.使動畫適配移動端
之所以覺得這是個坑是因為，設計師給我的動畫是全屏且非透明底的，然后她要求我將這個動畫以寬度100% 高度垂直居中截取的方式定位，我在瀏覽器里面試了下，360*640屏幕下，寬度100%，表現形式是這樣的（看上去是高度100% 寬度適配居中 兩邊漏出了黑色的背景色，見下圖藍色框起來的部分）
換成iPhone X的屏幕下，相反，表現出來是寬度100% 高度適配居中，上下漏出黑色背景色，見下圖藍色框起來的部分（究其原因是因為iphonex屏幕較長
這個布局好熟悉哇，跟img的object-fit屬性取值為contain的時候表現一致（object-fit也是寶藏，有興趣的同學可以去研究一下，非常好用）
我這里解決設計師的需求主要增加下面的代碼：
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頁面中使用JSON實現一個動畫有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
