溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“如何在html5中通過JSON實現動畫效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何在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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
