四个熟妇搡bbbb搡bbbb,午夜精品久久久久久久99热

亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

恭喜你成為UI中國(guó)推薦設(shè)計(jì)師（詳情）

提交需求

賽事與廣告咨詢合作，請(qǐng)?zhí)顚?xiě)需求表單，我們會(huì)在第一時(shí)間與您聯(lián)系！

0/20

0/200

設(shè)計(jì)大賽

設(shè)計(jì)大賽
發(fā)布廣告
發(fā)布招聘
其它需求

取消發(fā)送需求

提交完成
感謝您對(duì)UI中國(guó)的支持和信賴！

我知道了

編輯推薦

玩轉(zhuǎn)動(dòng)效 | AE常用動(dòng)效落地必備指南

0.0°

2022-04-11 原創(chuàng)文章 經(jīng)驗(yàn)/觀點(diǎn) 舉報(bào) 8432 102 40 0

小小方方關(guān)注

動(dòng)效在APP的設(shè)計(jì)中越來(lái)越被運(yùn)用，好的動(dòng)效設(shè)計(jì)對(duì)用戶體驗(yàn)的提升是顯而易見(jiàn)的，它的存在讓我們用戶對(duì)操作的感知更有情感，好的動(dòng)效設(shè)計(jì)是加分、壞的動(dòng)效設(shè)計(jì)是減分，如何才能讓我們計(jì)的動(dòng)效成功落地？

AE是我們最常用的動(dòng)效輸出軟件，也是動(dòng)效軟件的鼻祖，本文從出AE常用動(dòng)效落地格式：SVGA、json、Apng、WebP、PNG序列、Gif 、MP4 7種動(dòng)效格式入手，闡述每種格式所用到具體的AE插件和腳本、各插件如何安裝、如何使用對(duì)應(yīng)插件落地動(dòng)效，這3個(gè)方面分享，希望能在實(shí)際的工作中讓我們事半功倍。

7種最常用的動(dòng)效落地格式

一、文件導(dǎo)入

1、從PSD導(dǎo)入-PSD文件導(dǎo)入AE

AE與PS有很好的兼容性，PS的圖層以及各種樣式都能無(wú)偏差的導(dǎo)入到AE中，在導(dǎo)入時(shí)將“導(dǎo)入為”選擇：合成-保持圖層大小，圖層選項(xiàng)選擇“可編輯的圖層樣式”

psd文件導(dǎo)入面板

導(dǎo)入選項(xiàng)設(shè)置

2、AEUX-Sketch導(dǎo)入AE

AEUX （前身叫Sketch2AE）是由 Google 團(tuán)隊(duì)動(dòng)畫(huà)設(shè)計(jì)師大佬 Adam Plouff 開(kāi)發(fā)，運(yùn)用在 Sketch 和 AE 的一組高效插件，能將 Sketch 里的圖層以及整個(gè)畫(huà)板一鍵導(dǎo)入到 AE 里，同時(shí)能在 AE 里解決圖形分組和分層的問(wèn)題，減少?gòu)脑O(shè)計(jì)稿到動(dòng)效設(shè)計(jì)的銜接困難，目前該該插件也已支持支持Figma。

AEUX面板

用AEUX插件將sketch文件導(dǎo)入AE演示

官網(wǎng)地址： https://aeux.io/

AEUX插件安裝和使用的教程詳解：https://mp.weixin.qq.com/s/wh2TSZXdYXuEcxT2lvoIuQ

3、OVerload-AI與AE互導(dǎo)入

Overlord不僅可以實(shí)現(xiàn)AI導(dǎo)入AE，還能隨時(shí)從AE導(dǎo)回AI修改，這對(duì)本身不適合用于繪制圖形的AE來(lái)說(shuō)，無(wú)疑是補(bǔ)上了一個(gè)短板。

OVerload-AI與AE互導(dǎo)入

最新的Overlord支持路徑、形狀、參數(shù)圖形、剪切關(guān)系、文本、甚至大部分的漸變參數(shù)都能無(wú)偏差互導(dǎo)，并且可以設(shè)置導(dǎo)成子圖層還是獨(dú)立圖層，可以說(shuō)是非常方便了。

官網(wǎng)鏈接：https://www.battleaxe.co/overlord

二、常用的幾種動(dòng)效落地方式

1、Gif動(dòng)畫(huà)

GIF是以8位色（256種顏色）重現(xiàn)真彩色的圖像，可動(dòng)的位圖，但質(zhì)量較差，壓縮到臨界值時(shí)會(huì)出現(xiàn)鋸齒邊和白邊，不支持半透明通道；

2、PNG序列

PNG序列幀是把動(dòng)畫(huà)效果用一幀一幀的圖像文件來(lái)表示，需要AE導(dǎo)出PNG序列幀圖層，質(zhì)量會(huì)比Gif好，因?yàn)槭俏粓D所以也能顯示多種動(dòng)畫(huà)特效；以單幀圖像呈現(xiàn)，輸出后會(huì)生成一個(gè)PNG序列組的文件夾；

導(dǎo)出方式：AE菜單欄文件 — 導(dǎo)出 — 添加到渲染隊(duì)列 — 導(dǎo)出PNG序列

AE輸出模塊設(shè)置面板

3、Lottie( json)

Lottie 是 Airbnb 開(kāi)源的一套跨平臺(tái)的完整的動(dòng)畫(huà)效果解決方案，設(shè)計(jì)師可以使用 Adobe After Effects 設(shè)計(jì)出漂亮的動(dòng)畫(huà)之后，使用 Lottic 提供的 Bodymovin 插件將設(shè)計(jì)好的動(dòng)畫(huà)導(dǎo)出成 JSON 格式，就可以直接運(yùn)用在 iOS、Android、Web 和 React Native之上，無(wú)需其他額外操作。

京東APP 7.0 Tabbar圖標(biāo)動(dòng)效

QQ最新的Q彈超清表情，就是用Lottie實(shí)現(xiàn)的。

QQ 最新 MOJI 表情動(dòng)畫(huà)

官方地址：https://airbnb.design/lottie/

官方文檔：http://airbnb.io/lottie/#/

中文文檔（@習(xí)常）：https://www.yuque.com/lottie/document

4、SVGA

SVGA 是由YY團(tuán)隊(duì)開(kāi)發(fā)出來(lái)的一種跨平臺(tái)的開(kāi)源動(dòng)畫(huà)格式，同時(shí)兼容 iOS / Android / Web。SVGA 除了使用簡(jiǎn)單，性能卓越，由于動(dòng)畫(huà)文件體積更小，播放資源占用更優(yōu)，動(dòng)畫(huà)還原效果更好；同時(shí)讓動(dòng)畫(huà)開(kāi)發(fā)分工明確，各自專注各自的領(lǐng)域，大大減少動(dòng)畫(huà)交互的溝通成本，提升開(kāi)發(fā)效率，動(dòng)畫(huà)設(shè)計(jì)師專注動(dòng)畫(huà)設(shè)計(jì)，通過(guò)工具輸出svga動(dòng)畫(huà)文件，提供給開(kāi)發(fā)工程師在集成 svga player 之后直接使用。

SVGA 不同于 Lottie，Lottie 需要在 Player 一層完整地將 After Effects 所有邏輯實(shí)現(xiàn)，而 SVGA 則將這些邏輯免去。也因此，SVGA 可以同時(shí)支持 Flash。SVGA 做的事情，實(shí)際上，非常簡(jiǎn)單，Converter 會(huì)負(fù)責(zé)從 Flash 或 AE 源文件中提取所有動(dòng)畫(huà)元素（位圖、矢量），并將其在時(shí)間軸中的每幀表現(xiàn)（位移、縮放、旋轉(zhuǎn)、透明度）導(dǎo)出。Player 會(huì)負(fù)責(zé)將這些信息還原至畫(huà)布上。

SVGA官網(wǎng)：http://svga.io/designer.html

5、Apng

APNG（Animated Portable Network Graphics）是一個(gè)基于PNG的位圖動(dòng)畫(huà)格式，擴(kuò)展方法類似主要用于網(wǎng)頁(yè)的GIF89a，仍對(duì)傳統(tǒng)PNG保留向下兼容。第1幀是標(biāo)準(zhǔn)的單幅PNG圖像，因此只支持原版PNG的軟件能正常顯示第1幀。剩余的動(dòng)畫(huà)幀和幀速數(shù)據(jù)儲(chǔ)存在符合原版PNG標(biāo)準(zhǔn)的擴(kuò)展數(shù)據(jù)塊里。

APNG是由Mozilla在2004年推出的，其目的是試圖替代GIF文件格式，同時(shí)增加一些GIF文件不具備的特性。其實(shí)早在1995年，為了避免專利影響，以及Unisys公司根據(jù)它在GIF格式中使用的LZW數(shù)據(jù)壓縮算法的軟件專利開(kāi)始商業(yè)收費(fèi)。APNG的前生MNG動(dòng)圖格式就已經(jīng)誕生了，由于結(jié)構(gòu)復(fù)雜的MNG程序庫(kù)，使用過(guò)程會(huì)占用大量的資源，早期只有較少的瀏覽器支持，Chrome、IE、Opera、Safari 則從未支持過(guò)。即使APNG發(fā)展2007年也未能通過(guò)官方標(biāo)準(zhǔn)認(rèn)證。但是不影響Mozilla繼續(xù)支持APNG。

6、WebP

WebP(發(fā)音"weppy")是一種同時(shí)提供有損壓縮與無(wú)損壓縮的圖文格式，擴(kuò)展方法派生自影像編碼格式VP8，被認(rèn)為是WebM多媒體格式的姊妹項(xiàng)目，是由Google在購(gòu)買On2 Technologies后發(fā)展出來(lái)，以BSD授權(quán)條款發(fā)布。

WebP是由谷歌于在2010年推出的，意圖改變web圖片JPG、PNG、GIF三分天下局勢(shì)的一種圖片格式。它不僅支持無(wú)損或有損壓縮、alpha通道，還支持動(dòng)畫(huà)演示。目前，在當(dāng)前網(wǎng)頁(yè)瀏覽器當(dāng)中，Google Chrome和Opera原生支持靜態(tài)與動(dòng)態(tài)的WebP格式，而Google Chrome自12版開(kāi)始支持WebP的漸進(jìn)式解碼功能。除此之外，移動(dòng)端Android4.0以上也支持webp格式圖片。

webp格式大小

7、MP4

MP4大家都知道的音視頻格式，但是AE是不能直接導(dǎo)出的。在實(shí)際項(xiàng)目中普遍應(yīng)用在禮物大動(dòng)畫(huà)上，因?yàn)镸P4能夠附帶聲音，所以使用場(chǎng)景也非常廣泛，但是使用一般的MP4會(huì)內(nèi)存非常大。

三、幾種動(dòng)效落地方式的優(yōu)缺點(diǎn)

1、優(yōu)缺點(diǎn)對(duì)比

此表必須要收藏 ??????

7中動(dòng)效格式優(yōu)缺點(diǎn)對(duì)比

2、總結(jié)

① 圖片質(zhì)量：與GIF相比，APNG/Webp格式的圖片，不僅支持支持透明像素。并且，APNG/WebP文件格式的圖片不會(huì)有鋸齒，顆粒感等問(wèn)題。

② 體積：GIF采用LZW壓縮算法，而APNG采用的是 Deflate壓縮算法，WebP使用的是基于VP8視頻格式的幀內(nèi)編碼，并以RIFF作為容器格式。在相同的情況下APNG/Webp文件體積會(huì)更小，并且效果更佳。

通過(guò)個(gè)人長(zhǎng)期的對(duì)比得出，7種格式的從大到小依次為：MP4 > PNG序列 > APNG/Webp > GIF > Lottie > SVG

json文件和SVG動(dòng)畫(huà)文件大小比較接近，因此可以根據(jù)實(shí)際考慮決定即可，GIF雖然可以壓縮到比較小，但是本身圖片質(zhì)量也較差，因此建議慎重考慮。

③ 顏色：GIF是以8位色（256種顏色）重現(xiàn)真彩色的圖像，而APNG/WebP支持24位真彩色（共有1670萬(wàn)種顏色），能承載比GIF更豐富的顏色細(xì)節(jié)。

④ 兼容性：GIF幾乎支持所有的瀏覽器，而APNG/WebP兼容性就要差很多。APNG目前只有firefox、opera以及ios8以上的原生支持。WepP則只有opera、Chrome以及安卓的支持。

3、使用場(chǎng)景建議

GIF動(dòng)圖：簡(jiǎn)單的視覺(jué)動(dòng)圖，小尺寸Banner、活動(dòng)頁(yè)裝飾動(dòng)效、界面懸浮的動(dòng)態(tài)入口等
PNG幀序列：變化較少的動(dòng)態(tài)效果，操作引導(dǎo)、入口閃動(dòng)提示、部分加載效果等
SVGA：較為復(fù)雜的視覺(jué)動(dòng)效，禮物特效、酷炫開(kāi)場(chǎng)動(dòng)效等

WebP/Apng：大尺寸的banner、活動(dòng)氛圍背景、活動(dòng)頁(yè)頭圖等
JSON：簡(jiǎn)單的交互動(dòng)效，按鈕icon交互、logo啟動(dòng)效果、矢量插圖動(dòng)效等

MP4：啟動(dòng)界面動(dòng)畫(huà)、大型活動(dòng)的宣傳介紹（如淘寶雙11、京東618 做任務(wù)瓜分現(xiàn)金紅包活動(dòng)）

四、常用的幾個(gè)動(dòng)效落地插件

1、Gifgun-快速導(dǎo)出GIF

GifGun是一款可以直接在AE里一鍵創(chuàng)建輸出GIF動(dòng)畫(huà)格式腳本，我們?cè)贒ribbbble，Behance，站酷所看到的GIF動(dòng)畫(huà)大部分得益于這個(gè)插件的輸出。對(duì)于作品展示是個(gè)非常好用的插件。

GifGun設(shè)置面板

Gif格式因?yàn)椴恢С职胪该鲄^(qū)域且容易有鋸齒，如今的實(shí)際開(kāi)發(fā)中已經(jīng)有了Apng、Lottie等很多更好的替代方案，但在網(wǎng)頁(yè)瀏覽、文檔編輯等許多場(chǎng)景，還是需要使用Gif來(lái)演示動(dòng)效或者作為封面縮略圖。AE從2014版本后就不支持Gif導(dǎo)出了，而Gifgun就是一款能很好地導(dǎo)出Gif格式的插件。

GifGun一定程度保留了更好的色彩，以及大大壓縮了gif文件的大小。在輸出路徑方面也具有很強(qiáng)的優(yōu)勢(shì)。

使用前后對(duì)比：

使用GifGun前：AE - 導(dǎo)出MOV - 拖進(jìn)PS - 導(dǎo)出Gif

使用GifGun后：AE -窗口- 擴(kuò)展 - Gifgun - 導(dǎo)出Gif

官網(wǎng)鏈接：https://aescripts.com/gifgun/

2、Bodymovin

Bodymovin是After Effects的插件，使用Lottie首先要在AE中安裝Bodymovin插件，才可以導(dǎo)出json數(shù)據(jù)格式的動(dòng)畫(huà)供Lottie使用。

Bodymovin能夠?qū)E中矢量圖形做成的動(dòng)效導(dǎo)成json文件，變成一串純粹的代碼，再被Lottie渲染還原出來(lái)。這就讓“尺寸”和“幀率”擺脫了以往體積的束縛，導(dǎo)出的即使是又高清又流暢的大圖，也可以保持很小的體積。

BodyMovin面板

BodyMovin插件安裝教程：https://mp.weixin.qq.com/s/B3jekQLpo59UG14hMVh7AA

官網(wǎng)鏈接：https://aescripts.com/bodymovin/

官方文檔：http://airbnb.io/lottie/#/

中文文檔（@習(xí)常）：https://www.yuque.com/lottie/document

Lottie社區(qū)：https://lottiefiles.com/

JSON文件預(yù)覽：https://lottiefiles.com/preview （這個(gè)網(wǎng)址請(qǐng)收藏）

??注意事項(xiàng)：

① 如何只導(dǎo)出一個(gè)json文件（json包含圖片資源）

只需在合成設(shè)置中，勾選將圖片轉(zhuǎn)成base64，將圖片資源轉(zhuǎn)換為base64代碼并一起保存到JSON文件中即可

BodyMovin 設(shè)置面板

② img文件夾里圖片資源命名問(wèn)題

如果有需要用到img文件夾的情況時(shí)，外鏈img文件夾里的圖片資源必須跟json文件里的文件名一致，在跟開(kāi)發(fā)更換資源的時(shí)候經(jīng)常會(huì)混亂，會(huì)忘記更換圖片，導(dǎo)致無(wú)法正常顯示。

3、Aftercodecs-導(dǎo)出小巧高清的MP4

AE本身不支持直接導(dǎo)出MP4，很多時(shí)候只能先導(dǎo)出體積龐大的MOV格式，再通過(guò)第三方軟件轉(zhuǎn)成MP4，操作繁瑣不說(shuō)，還損失畫(huà)質(zhì)；如果要導(dǎo)出PM4，需要Adobe自家的多媒體編碼軟件Media Encoder 才能完美導(dǎo)出MP4，在ME軟件中選中 H.264格式，就可以導(dǎo)出MP4；不過(guò)這款軟件本身體積較大，每次打開(kāi)都要運(yùn)行很久。