動(dòng)效落地可能最好的幾個(gè)方案源内,分享給你葡粒!

前言

相信打開這篇文章的你,多多少少都接觸過動(dòng)效設(shè)計(jì)膜钓,但不知落地方案你知多少嗽交,本期就分享幾個(gè)業(yè)內(nèi)設(shè)計(jì)大佬們常用,但還舍不得告訴人呻此,超級(jí)好用的落地方案轮纫!

?質(zhì)量更高的GIF?

GIF圖是我們最熟悉的動(dòng)圖格式,它是一種有損格式焚鲜,只支持8位256色掌唾,但它有著極強(qiáng)的兼容性,這讓設(shè)計(jì)師又愛又恨忿磅,尤其輸出透明的元素常常伴有鋸齒和白邊糯彬,所以對(duì)于透明的元素要慎用此格式,后面會(huì)介紹更好的方案葱她。

對(duì)于一些需要輸出GIF格式的動(dòng)圖撩扒,有幾個(gè)技巧能助你輸出更高質(zhì)量的畫質(zhì),首先在能接受動(dòng)圖大小的前提下吨些,盡可能的調(diào)大幀速率搓谆,這樣導(dǎo)出的動(dòng)畫更細(xì)膩柔和。

當(dāng)在AE設(shè)計(jì)好的動(dòng)畫后一般是導(dǎo)出視頻或序列幀豪墅,再用PS導(dǎo)出GIF圖泉手,這里推薦導(dǎo)出序列幀再用ps導(dǎo)出GIF圖的方案,這樣動(dòng)圖相對(duì)質(zhì)量更高內(nèi)存也更小一些偶器。

還有一種比較快捷的方式就是用AE插件gifGun斩萌,一鍵導(dǎo)出GIF圖,內(nèi)存相對(duì)較小屏轰,質(zhì)量次于序列幀導(dǎo)出的方式颊郎,如果只是導(dǎo)出效果觀看,可以用這種快捷的方式霎苗,如果要落實(shí)到產(chǎn)品上姆吭,最好能夠用序列幀輸出更高品質(zhì)的GIF。

AE插件gifGun

當(dāng)輸出的gif圖過大時(shí)唁盏,這里推薦一個(gè)不錯(cuò)的壓縮軟件PPDuck猾编,能夠很好的壓縮到更小的內(nèi)存瘤睹,對(duì)畫質(zhì)影響也較小升敲。

軟件PPDuck

?apng和webp動(dòng)圖格式

apng格式

apng格式誕生于2004年答倡,是基于png格式的動(dòng)畫格式圖片,它的動(dòng)圖后綴依然是.png驴党,apng格式相對(duì)GIF格式有更多的優(yōu)勢(shì)瘪撇,在色彩方面它完美支持1600萬種顏色,對(duì)于漸變透明的元素港庄,有著非常優(yōu)秀的成像效果倔既,下圖所示apng格式元素完整呈現(xiàn)。

apng與gif對(duì)比

apng品質(zhì)大大超越GIF圖鹏氧,并且相對(duì)GIF內(nèi)存也非常更低渤涌,在web端對(duì)于主流的瀏覽器Firefox、Safari把还、Chrome都能夠兼容实蓬,在移動(dòng)設(shè)備上通過代碼也同樣可以完美支持,所以對(duì)于透明漸變的動(dòng)畫吊履,推薦apng格式動(dòng)畫安皱。

預(yù)覽apng動(dòng)圖需要拖拽到瀏覽器中才可以查看動(dòng)畫,所以傳播性沒有GIF圖強(qiáng)艇炎。

apng的導(dǎo)出有兩種方式:

第一種是通過iSparta軟件導(dǎo)出酌伊,步驟是通過AE導(dǎo)出動(dòng)畫的序列幀,然后選中全部序列幀拖拽到iSparta軟件中點(diǎn)擊開始即可導(dǎo)出apng缀踪,此軟件一共可以導(dǎo)出三種格式居砖,APNG/GIF/WEBP,GIF導(dǎo)出還是推薦上文講的方式驴娃。

?iSparta軟件

第二種格式依舊是用AE插件奏候,便捷高效,質(zhì)量也較為優(yōu)秀托慨,兩種方式都可以用于產(chǎn)品中鼻由,插件也可以導(dǎo)出webp格式動(dòng)圖。

AE導(dǎo)出apng和webp插件

webp格式

webp格式由Google在2010年推出的格式厚棵,能替代眾多圖片格式蕉世,包括有損jpeg、無損png婆硬、動(dòng)圖gif狠轻,最重要的是在壓縮率上全面超越gif和apng,兼容安卓系統(tǒng)彬犯,ios可能需要技術(shù)上的處理向楼,web端上相對(duì)apng的兼容性上差一些查吊,導(dǎo)出的方式跟apng一樣,也是上文介紹的兩種方式湖蜕。

?CSS序列幀精靈圖動(dòng)畫?

我們都知道動(dòng)畫是有一張一張序列幀連續(xù)播放的效果逻卖,序列幀動(dòng)畫在web端的性能不是特別好,100張序列幀服務(wù)就要請(qǐng)求100次昭抒,這樣就很容易造成卡頓都丟幀的現(xiàn)象评也,所以通常會(huì)拼成一張大圖,這樣的圖稱為精靈圖或雪碧圖灭返。

當(dāng)動(dòng)畫復(fù)雜較大時(shí)盗迟,手動(dòng)拼成一張大圖費(fèi)時(shí)費(fèi)力,所以這里介紹一款知乎大神西西寫的AE腳本CSS Sprite Exporter熙含,能夠一鍵導(dǎo)出精靈圖與開發(fā)所需的代碼罚缕。

腳本安裝后,選擇文件—腳本—CSS Sprite Exporter即可使用怎静。

CSS Sprite Exporter腳本

兩個(gè)重要的選項(xiàng):

最大寬度:默認(rèn)為5000px邮弹,指的是序列幀平鋪到這個(gè)數(shù)值時(shí),開始平鋪下一行消约,所以最終導(dǎo)出的大圖寬度為5000px肠鲫;

web兼容性:是針對(duì)較低版本的瀏覽器的兼容性的選項(xiàng),當(dāng)瀏覽器對(duì)默認(rèn)導(dǎo)出的動(dòng)畫不兼容時(shí)可以跟開發(fā)溝通做其中的選項(xiàng)勾選或粮;

參數(shù)設(shè)置好之后點(diǎn)擊“生成”會(huì)導(dǎo)出兩個(gè)文件导饲,一個(gè)是代碼,另一個(gè)是圖片氯材,雙擊html文件可以預(yù)覽效果如下圖渣锦,預(yù)覽沒問題就可以一并交給開發(fā)。

動(dòng)畫預(yù)覽效果

?Lottie—json文件代碼動(dòng)畫?

Lottie是Airbnb開源的一套跨平臺(tái)解決方案氢哮,是近幾年最主流的動(dòng)畫落地方式袋毙,在AE中的插件為Bodumovin 導(dǎo)出的格式為json文件,它的原理是將各種矢量圖冗尤、位圖及效果數(shù)據(jù)的集合打包生成一個(gè)json格式文件听盖,若有位圖則會(huì)有images文件夾,把這兩項(xiàng)交付給開發(fā)即可裂七。

Bodumovin插件

使用Lottie設(shè)計(jì)師在設(shè)計(jì)動(dòng)畫時(shí)有幾個(gè)點(diǎn)要特別注意:

第一點(diǎn):json文件也需要盡可能小皆看,例如能用父子級(jí)功能就不要在多個(gè)圖層上打關(guān)鍵幀,每個(gè)關(guān)鍵幀都是一個(gè)數(shù)據(jù)點(diǎn)背零,因此會(huì)占用更多的空間腰吟。

第二點(diǎn):Lottie暫不支持AE中任何表達(dá)式和效果,不支持陰影徙瓶、顏色疊加效果等毛雇。

第三點(diǎn):alpha的遮罩效果雖然支持嫉称,但大面積的遮罩非常影響性能,所以盡可能不用或使用小面積的遮罩效果灵疮。

第四點(diǎn):Bodumovin導(dǎo)出的圖片會(huì)有損失织阅,會(huì)出現(xiàn)黑陰影現(xiàn)象,所以導(dǎo)出后始藕,需要替換成清晰的圖片蒲稳。

設(shè)計(jì)師導(dǎo)出CSS動(dòng)畫代碼

設(shè)計(jì)師導(dǎo)出CSS代碼當(dāng)然是要借助工具,同樣是介紹一款由知乎大神西西寫的AE腳本AE2CSS伍派,它可以幫助設(shè)計(jì)師從AE中導(dǎo)出動(dòng)效的CSS代碼,這款腳本支持圖像和純色層的所有基礎(chǔ)動(dòng)畫屬性并且支持表達(dá)式及父子級(jí)剩胁,遺憾的是一些復(fù)雜的特效不能支持诉植。

此腳本也可以導(dǎo)出精靈圖,但有些復(fù)雜的特效依舊不能成功導(dǎo)出昵观,所以導(dǎo)出精靈圖晾腔,還是推薦上文CSS Sprite Exporter腳本導(dǎo)出方式。

AE腳本AE2CSS

AE2CSS腳本導(dǎo)出的是代碼和圖片文件啊犬,這樣的方式不僅減少了開發(fā)人員的工作量灼擂,而且畫質(zhì)質(zhì)量無損內(nèi)存更小,目前支持web和H5頁面觉至,對(duì)于做數(shù)據(jù)可視化動(dòng)效用這款腳步輸出代碼是非常高效的方式剔应。

?后語?

以上介紹的幾種動(dòng)效落地方案,是目前比較主流的方法语御, 基本可以滿足產(chǎn)品中動(dòng)效落地峻贮,而且能夠大大節(jié)省開發(fā)的時(shí)間和產(chǎn)品的穩(wěn)定性。

關(guān)注設(shè)計(jì)公眾號(hào)“互聯(lián)網(wǎng)設(shè)計(jì)幫”回復(fù)“動(dòng)效”獲取文中提高的軟件和插件

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末应闯,一起剝皮案震驚了整個(gè)濱河市纤控,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌碉纺,老刑警劉巖船万,帶你破解...
    沈念sama閱讀 216,470評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異骨田,居然都是意外死亡耿导,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門盛撑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來碎节,“玉大人,你說我怎么就攤上這事抵卫∈ɡ螅” “怎么了胎撇?”我有些...
    開封第一講書人閱讀 162,577評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)殖氏。 經(jīng)常有香客問我晚树,道長(zhǎng),這世上最難降的妖魔是什么雅采? 我笑而不...
    開封第一講書人閱讀 58,176評(píng)論 1 292
  • 正文 為了忘掉前任爵憎,我火速辦了婚禮,結(jié)果婚禮上婚瓜,老公的妹妹穿的比我還像新娘宝鼓。我一直安慰自己,他們只是感情好巴刻,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,189評(píng)論 6 388
  • 文/花漫 我一把揭開白布愚铡。 她就那樣靜靜地躺著,像睡著了一般胡陪。 火紅的嫁衣襯著肌膚如雪沥寥。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,155評(píng)論 1 299
  • 那天柠座,我揣著相機(jī)與錄音邑雅,去河邊找鬼。 笑死妈经,一個(gè)胖子當(dāng)著我的面吹牛淮野,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播狂塘,決...
    沈念sama閱讀 40,041評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼录煤,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了荞胡?” 一聲冷哼從身側(cè)響起妈踊,我...
    開封第一講書人閱讀 38,903評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎泪漂,沒想到半個(gè)月后廊营,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,319評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡萝勤,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,539評(píng)論 2 332
  • 正文 我和宋清朗相戀三年露筒,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片敌卓。...
    茶點(diǎn)故事閱讀 39,703評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡慎式,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 35,417評(píng)論 5 343
  • 正文 年R本政府宣布歇式,位于F島的核電站,受9級(jí)特大地震影響蕾盯,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蓝丙,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,013評(píng)論 3 325
  • 文/蒙蒙 一级遭、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧渺尘,春花似錦挫鸽、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至锌雀,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間迅诬,已是汗流浹背腋逆。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評(píng)論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留侈贷,地道東北人惩歉。 一個(gè)月前我還...
    沈念sama閱讀 47,711評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像俏蛮,于是被迫代替她去往敵國和親撑蚌。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,601評(píng)論 2 353