摘要:問題背景有一天我們的設(shè)計(jì)師找到我說,要把頁面中我自己用程序?qū)懙膭?dòng)畫,換成他們給的動(dòng)畫,原因是有的動(dòng)畫很復(fù)雜,自己寫起來達(dá)不到他們的預(yù)期效果寫到這里我突然想到一個(gè)問題,這么復(fù)雜的動(dòng)畫為什么不使用。。。。
問題背景
有一天我們的UI設(shè)計(jì)師找到我說,要把頁面中我自己用程序?qū)懙膭?dòng)畫,換成他們給的json動(dòng)畫,原因是有的動(dòng)畫很復(fù)雜,自己寫起來達(dá)不到他們的預(yù)期效果(寫到這里我突然想到一個(gè)問題,這么復(fù)雜的動(dòng)畫為什么不使用gif。。。。坐我對(duì)面的安卓開發(fā)小哥答因?yàn)間if播放的時(shí)候可能質(zhì)量不高不流暢,好吧我信了)
我:????客戶端可以加json動(dòng)畫,H5頁面沒聽說過可以讀json動(dòng)畫哎
設(shè)計(jì)師一臉肯定,說可以的,有web版本。
寫到這里,我真的要好好夸一波我們的設(shè)計(jì)師妹子了,幾乎很多蠻好的解決方法都是在他們的“逼迫”之下找到的(哦,她們還會(huì)寫H5頁面。。。要我有何用系列
那問題來了,怎么在H5頁面里面使用json動(dòng)畫呢
這時(shí)候設(shè)計(jì)師甩了一個(gè)鏈接給我,看這里lottie-web ;我點(diǎn)進(jìn)去了解了一下,是Airbnb開源的一個(gè)動(dòng)畫庫,該庫可以完成很多酷炫動(dòng)畫,使用起來也很簡單,設(shè)計(jì)師只需要通過AE做成的動(dòng)畫導(dǎo)出JSON文件,然后前端使用Lottie直接加載JSON文件生成動(dòng)畫,既不需要設(shè)計(jì)師切N多gif,也不需要前端去進(jìn)行復(fù)雜繪制了,一舉兩得,并且,Lottie全平臺(tái)可用,ios、Android、web、React Native都可以,且占用內(nèi)存少,加載流暢。(這么個(gè)神仙東西我為什么現(xiàn)在才發(fā)現(xiàn)。。
說了這么多,那怎么在H5頁面里面使用呢?
很簡單了,設(shè)計(jì)師生成的文件夾發(fā)給你(設(shè)計(jì)師那邊只用在AE中加個(gè)lottie插件,導(dǎo)出就行了),打開之后應(yīng)該是這樣子的,打開demo.html就知道是怎么用的了(所以我還在這里寫什么技術(shù)文章
玩笑歸玩笑,其實(shí)在使用中還是碰到了很多坑的,這里記錄幾個(gè)使用時(shí)注意的地方
仔細(xì)看一下,其實(shí)demo.html把js和json都放進(jìn)去了,這時(shí)候我們可以把js和json多帶帶分出來,js的話可以使用cdn上提供的地址
動(dòng)畫需要的json數(shù)據(jù)放在data.json文件里面,但是給出的json文件里面的數(shù)據(jù)格式是這樣的(太長了 截不完
那如果你要在多帶帶的一個(gè)html里面使用script的方式引入json文件的話,會(huì)報(bào)錯(cuò),所以需要修改json文件,在前面加上變量,賦值。如下圖:
這樣你可以通過像引入js文件的方式一樣的引入該json
這樣可用的demo.html就縮減成了下面這樣
當(dāng)然,你如果使用的是js模塊化編程的話,可以不用更改data.json,直接import進(jìn)來就行了,如下:
import animationData from "./data.json"2.使動(dòng)畫適配移動(dòng)端
之所以覺得這是個(gè)坑是因?yàn)椋O(shè)計(jì)師給我的動(dòng)畫是全屏且非透明底的,然后她要求我將這個(gè)動(dòng)畫以寬度100% 高度垂直居中截取的方式定位,我在瀏覽器里面試了下,360*640屏幕下,寬度100%,表現(xiàn)形式是這樣的(看上去是高度100% 寬度適配居中 兩邊漏出了黑色的背景色,見下圖藍(lán)色框起來的部分)
換成iPhone X的屏幕下,相反,表現(xiàn)出來是寬度100% 高度適配居中,上下漏出黑色背景色,見下圖藍(lán)色框起來的部分(究其原因是因?yàn)閕phonex屏幕較長
這個(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; }
最終效果:
以上圖片截圖都是靜態(tài)的,實(shí)際是有一個(gè)動(dòng)態(tài)效果的,我不知道怎么添加動(dòng)圖就沒弄了,感興趣的可以試一下。
適用范圍:
我感覺一般全屏的或者局部很復(fù)雜的動(dòng)畫可以使用這個(gè)方法一試,比gif要流暢,兼容性也做得不錯(cuò),一些安卓產(chǎn)品比較酷炫的開屏就是使用的這個(gè)方法,H5頁面的話,簡單動(dòng)畫一般自己程序?qū)崿F(xiàn)就可以,還可以避免踩坑。
參考鏈接:
lottie官網(wǎng)
lottie-web github地址
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/108929.html
摘要:問題背景有一天我們的設(shè)計(jì)師找到我說,要把頁面中我自己用程序?qū)懙膭?dòng)畫,換成他們給的動(dòng)畫,原因是有的動(dòng)畫很復(fù)雜,自己寫起來達(dá)不到他們的預(yù)期效果寫到這里我突然想到一個(gè)問題,這么復(fù)雜的動(dòng)畫為什么不使用。。。。 問題背景 有一天我們的UI設(shè)計(jì)師找到我說,要把頁面中我自己用程序?qū)懙膭?dòng)畫,換成他們給的json動(dòng)畫,原因是有的動(dòng)畫很復(fù)雜,自己寫起來達(dá)不到他們的預(yù)期效果(寫到這里我突然想到一個(gè)問題,這么...
摘要:問題背景有一天我們的設(shè)計(jì)師找到我說,要把頁面中我自己用程序?qū)懙膭?dòng)畫,換成他們給的動(dòng)畫,原因是有的動(dòng)畫很復(fù)雜,自己寫起來達(dá)不到他們的預(yù)期效果寫到這里我突然想到一個(gè)問題,這么復(fù)雜的動(dòng)畫為什么不使用。。。。 問題背景 有一天我們的UI設(shè)計(jì)師找到我說,要把頁面中我自己用程序?qū)懙膭?dòng)畫,換成他們給的json動(dòng)畫,原因是有的動(dòng)畫很復(fù)雜,自己寫起來達(dá)不到他們的預(yù)期效果(寫到這里我突然想到一個(gè)問題,這么...
摘要:本文將從以下幾個(gè)方面闡述架構(gòu)設(shè)計(jì)的一些經(jīng)驗(yàn)和思考。原文及討論請(qǐng)到通訊作為一種跨語言開發(fā)模式,通訊層是架構(gòu)首先應(yīng)該考慮和設(shè)計(jì)的,往后所有的邏輯都是基于通訊層展開。 關(guān)于Hybrid模式開發(fā)app的好處,網(wǎng)絡(luò)上已有很多文章闡述了,這里不展開。 本文將從以下幾個(gè)方面闡述Hybrid app架構(gòu)設(shè)計(jì)的一些經(jīng)驗(yàn)和思考。 原文及討論請(qǐng)到 github issue 通訊 作為一種跨語言開發(fā)模式,通訊...
摘要:年前放假的最后一天,我們上線了獨(dú)家記憶活動(dòng)宣傳頁。微信分享主要代碼參考獨(dú)家記憶當(dāng)時(shí)光凝固,當(dāng)回憶定格。這是屬于我和的獨(dú)家記憶。 年前放假的最后一天,我們上線了「My Flyme 獨(dú)家記憶」 H5 活動(dòng)宣傳頁。 因種種原因,直到放假前幾天,才突然要求我們參與并開始項(xiàng)目的前端部分。此時(shí)大概的情況是:所有數(shù)據(jù)已計(jì)算完畢;后端接口已完成待聯(lián)調(diào);交互視覺只出了不到四分之一(一共二十多個(gè)頁面);我...
閱讀 1778·2023-04-25 14:33
閱讀 3378·2021-11-22 15:22
閱讀 2176·2021-09-30 09:48
閱讀 2684·2021-09-14 18:01
閱讀 1740·2019-08-30 15:55
閱讀 3004·2019-08-30 15:53
閱讀 2139·2019-08-30 15:44
閱讀 648·2019-08-30 10:58