這時候設計師甩了乙個鏈結給我，看這裡lottie-web ；我點進去了解了一下，是airbnb開源的乙個動畫庫，該庫可以完成很多酷炫動畫，使用起來也很簡單，設計師只需要通過ae做成的動畫匯出json檔案，然後前端使用lottie直接載入json檔案生成動畫，既不需要設計師切n多gif，也不需要前端去進行複雜繪製了，一舉兩得，並且，lottie全平台可用，ios、android、web、react native都可以，且占用記憶體少，載入流暢。（這麼個神仙東西我為什麼現在才發現。。
說了這麼多，那怎麼在h5頁面裡面使用呢？
很簡單了，設計師生成的資料夾發給你(設計師那邊只用在ae中加個lottie外掛程式，匯出就行了)，開啟之後應該是這樣子的，開啟demo.html就知道是怎麼用的了（所以我還在這裡寫什麼技術文章
玩笑歸玩笑，其實在使用中還是碰到了很多坑的，這裡記錄幾個使用時注意的地方
仔細看一下，其實demo.html把js和json都放進去了，這時候我們可以把js和json單獨分出來，js的話可以使用cdn上提供的位址
那如果你要在單獨的乙個html裡面使用script的方式引入json檔案的話，會報錯，所以需要修改json檔案，在前面加上變數，賦值。如下圖：
這樣你可以通過像引入js檔案的方式一樣的引入該json
import animationdata from './data.json'換成iphone x的螢幕下，相反，表現出來是寬度100% 高度適配居中，上下漏出黑色背景色，見下圖藍色框起來的部分（究其原因是因為iphonex螢幕較長
這個布局好熟悉哇，跟img的object-fit屬性取值為contain的時候表現一致（object-fit也是寶藏，有興趣的同學可以去研究一下，非常好用）
我這裡解決設計師的需求主要增加下面的**：
js部分：
settimeout(function() , 50);
css部分：（給lottie增加flex布局）
#lottie
以上截圖都是靜態的，實際是有乙個動態效果的，我不知道怎麼新增**就沒弄了，感興趣的可以試一下。
適用範圍：
我感覺一般全屏的或者區域性很複雜的動畫可以使用這個方法一試，比gif要流暢，相容性也做得不錯，一些安卓產品比較酷炫的開屏就是使用的這個方法，h5頁面的話，簡單動畫一般自己程式實現就可以，還可以避免踩坑。
lottie-web github位址
h5頁面開發
相信大家在做h5頁面開發的時候，也會遇到一些問題。筆者將h5開發過程中常見的一些問題和解決辦法列舉出來，有需要的朋友可以參考一下。1.安卓瀏覽器看背景，有些裝置會模糊。同等比例的在pc端頁面和移動手機端頁面的解析度差很多，原因和devicepixelratio有關。手機解析度比pc端的解析度小，按照...
H5及H5頁面是什麼意思？如何製作H5頁面？
h5是html5的簡稱。html5是html最新的修訂版本，是一種超文字標記語言。h5有兩大特點 首先，強化了 web 網頁的表現效能。其次，追加了本地資料庫等 web 應用的功能。第二步 選擇 高階模式 點 建立應用。第三步 進入製作頁面。九個控制項，通過點選新增到製作介面，控制項的選擇使用按照你...
h5頁面的寫法 移動端h5頁面寫法
1.頁面寬度320，所有元素尺寸設一半 缺點 不自能適應全屏 2.頁面寬度640，元素尺寸正常 暫未發現問題 3.頁面寬度640，js控制自適應全屏 adaptuilayout.adapt initviewportwidth 缺點 qq空間分享後點開頁面套在qq預設瀏覽器裡有相容性問題 4.rem寫...