H5頁面內使用JSON動畫

時間 2019-11-08

原文原文鏈接

問題背景

有一天咱們的UI設計師找到我說，要把頁面中我本身用程序寫的動畫，換成他們給的json動畫，緣由是有的動畫很複雜，本身寫起來達不到他們的預期效果（寫到這裏我忽然想到一個問題，這麼複雜的動畫爲何不使用gif。。。。坐我對面的安卓開發小哥答由於gif播放的時候可能質量不高不流暢，好吧我信了）
我：？？？？客戶端能夠加json動畫，H5頁面沒據說過能夠讀json動畫哎
設計師一臉確定，說能夠的，有web版本。
寫到這裏，我真的要好好誇一波咱們的設計師妹子了，幾乎不少蠻好的解決方法都是在他們的「逼迫」之下找到的（哦，她們還會寫H5頁面。。。要我有何用系列
那問題來了，怎麼在H5頁面裏面使用json動畫呢javascript

如何在H5頁面內使用json動畫

這時候設計師甩了一個連接給我，看這裏lottie-web ；我點進去了解了一下，是Airbnb開源的一個動畫庫，該庫能夠完成不少酷炫動畫，使用起來也很簡單，設計師只須要經過AE作成的動畫導出JSON文件，而後前端使用Lottie直接加載JSON文件生成動畫，既不須要設計師切N多gif，也不須要前端去進行復雜繪製了，一箭雙鵰，而且，Lottie全平臺可用，ios、Android、web、React Native均可以，且佔用內存少，加載流暢。（這麼個神仙東西我爲何如今才發現。。css

說了這麼多，那怎麼在H5頁面裏面使用呢？
很簡單了，設計師生成的文件夾發給你(設計師那邊只用在AE中加個lottie插件，導出就好了)，打開以後應該是這樣子的，打開demo.html就知道是怎麼用的了（因此我還在這裏寫什麼技術文章

玩笑歸玩笑，其實在使用中仍是碰到了不少坑的，這裏記錄幾個使用時注意的地方html

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文件的方式同樣的引入該jsonjava

<script type="text/javascript" src="./data.json"></script>

這樣可用的demo.html就縮減成了下面這樣ios

<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進來就好了，以下：git

import animationData from './data.json'

2.使動畫適配移動端

之因此以爲這是個坑是由於，設計師給個人動畫是全屏且非透明底的，而後她要求我將這個動畫以寬度100% 高度垂直居中截取的方式定位，我在瀏覽器裏面試了下，360*640屏幕下，寬度100%，表現形式是這樣的（看上去是高度100% 寬度適配居中兩邊漏出了黑色的背景色，見下圖藍色框起來的部分）

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

這個佈局好熟悉哇，跟img的object-fit屬性取值爲contain的時候表現一致（object-fit也是寶藏，有興趣的同窗能夠去研究一下，很是好用）github

我這裏解決設計師的需求主要增長下面的代碼：web

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

最終效果：
面試

總結

以上圖片截圖都是靜態的，實際是有一個動態效果的，我不知道怎麼添加動圖就沒弄了，感興趣的能夠試一下。
適用範圍：
我感受通常全屏的或者局部很複雜的動畫可使用這個方法一試，比gif要流暢，兼容性也作得不錯，一些安卓產品比較酷炫的開屏就是使用的這個方法，H5頁面的話，簡單動畫通常本身程序實現就能夠，還能夠避免踩坑。

參考連接：
lottie官網
 lottie-web github地址

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。