前言
相信打開這篇文章的你，多多少少都接觸過動(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)效”獲取文中提高的軟件和插件
