午夜勾魂曲-午夜福利自怕-午夜福利在线观看6080-午夜福利院电影-国产精品毛片AV久久97-国产精品麻豆高潮刺激A片

動(dòng)效不知如何落地？

2020-8-25 資深UI設(shè)計(jì)者

一直有很多朋友會(huì)問(wèn)一些關(guān)于移動(dòng)端實(shí)現(xiàn)動(dòng)效的方法，平時(shí)也會(huì)給大家做一些解答，但是可能沒(méi)有那么系統(tǒng)性，這次抽點(diǎn)時(shí)間總結(jié)歸納下這方面的內(nèi)容，跟大家分享下我日常設(shè)計(jì)中是如何完成動(dòng)畫(huà)實(shí)現(xiàn)的。

實(shí)現(xiàn)動(dòng)畫(huà)的方式

設(shè)計(jì)輸出的方式大概可以分為位圖和矢量?jī)煞N，與常規(guī)的圖片輸出并無(wú)太大的差異。位圖方式：PNG序列幀、APNG、GIF；矢量方式：Lottie、SVG動(dòng)畫(huà)。

動(dòng)效不知如何落地？看完騰訊高手的經(jīng)驗(yàn)就明白了

當(dāng)然除了以設(shè)計(jì)提供的方式之外，還可以設(shè)計(jì)完成好demo，開(kāi)發(fā)通過(guò)代碼進(jìn)行實(shí)現(xiàn)例如：javascript直接實(shí)現(xiàn)、SVG（可伸縮矢量圖形）、CSS3 transition、CSS3 animation、Canvas動(dòng)畫(huà)、requestAnimationFrame由于超出個(gè)人能力范疇就不展開(kāi)講了。

實(shí)現(xiàn)動(dòng)畫(huà)常用的工具

實(shí)現(xiàn)動(dòng)畫(huà)，首先還是得了解有哪些工具可以制作及合成相關(guān)的動(dòng)效，我日常主要使用的工具有Principle、AE、bodymovin插件、iSparta等軟件。另外最近準(zhǔn)備學(xué)習(xí)一個(gè)新的專門制作svg動(dòng)畫(huà)的軟件-KeyShape。

Principle：可以輸出GIF、視頻等格式；
AE：可以輸出PNG序列，結(jié)合插件可以輸出GIF等等；
bodymovin：輸出json文件（也就是所謂的Lottie動(dòng)畫(huà)）；
iSparta：使用PNG序列合成APNG、GIF圖片格式除此之外；
Keyshape：主要是可以制作比較強(qiáng)大的路徑變換動(dòng)畫(huà)，然后輸出svg動(dòng)畫(huà)格式。

動(dòng)效不知如何落地？看完騰訊高手的經(jīng)驗(yàn)就明白了

格式說(shuō)明

PNG序列：以單幀圖像呈現(xiàn)，輸出后會(huì)生成一個(gè)序列組的文件夾；
APNG：實(shí)際上是把PNG序列合成一張可動(dòng)畫(huà)化的PNG，類似GIF，但相比GIF質(zhì)量要高，圖片后綴依舊是「.png」。
GIF：可動(dòng)的位圖，但質(zhì)量較差，壓縮到臨界值時(shí)會(huì)出現(xiàn)鋸齒邊和白邊，個(gè)人比較不喜歡用。
Json（Lottie動(dòng)畫(huà)）：實(shí)際上是一個(gè)用代碼描述的文檔，通過(guò)代碼描述路徑、節(jié)點(diǎn)的方式來(lái)完成動(dòng)畫(huà)效果，與開(kāi)發(fā)實(shí)際通過(guò)代碼實(shí)現(xiàn)動(dòng)畫(huà)類似，通過(guò)bodymovin輸出后減少開(kāi)發(fā)實(shí)現(xiàn)的時(shí)間，提高了開(kāi)發(fā)實(shí)現(xiàn)的效率。
SVG動(dòng)畫(huà)：與Lottie的方式比較類似，可以減少開(kāi)發(fā)的動(dòng)畫(huà)工作量，可以通過(guò)keyshape設(shè)計(jì)并導(dǎo)出，后綴為「.SVG」。

如何輸出文件？

接下來(lái)講解下各個(gè)軟件輸出對(duì)應(yīng)格式的方法，實(shí)際上操作并不會(huì)太難，動(dòng)效本身更重要的還是在于創(chuàng)意本身，因此當(dāng)你把握了這些方式之后可以考慮進(jìn)行創(chuàng)意設(shè)計(jì)。

由于GIF文件多種工具都可以輸出，這里就不再作詳細(xì)說(shuō)明

1. PNG序列

在AE中制作好動(dòng)畫(huà)
通過(guò)AE預(yù)渲染，然后選擇PNG序列，直接渲染出序列幀到本地文件夾
導(dǎo)出序列幀后需要進(jìn)行壓縮，常用的是tinypng，壓縮后較小的文件再進(jìn)行交付

具體如下視頻

2. APNG

如上導(dǎo)出到PNG序列幀，拖拽到iSparta軟件中，合成即可。合成時(shí)可以選擇幀率、循環(huán)次數(shù)（0為無(wú)限循環(huán)）、導(dǎo)出質(zhì)量等。如下視頻

3. Lottie

AE中需要安裝bodymovin的插件
制作好動(dòng)畫(huà)后，在窗口打開(kāi)插件-bodymovin、
選擇導(dǎo)出的位置，直接渲染一下，即可在本地生成json文件
插件帶有預(yù)覽能力，但較差。可以在https://lottiefiles.com/preview中進(jìn)行預(yù)覽查看

更多Lottie相關(guān)可以前往https://lottiefiles.com/學(xué)習(xí)，里面有豐富等Lottie動(dòng)畫(huà)效果和一些插件下載，去研究下吧

4. SVG動(dòng)畫(huà)

下載keyshape軟件，屬于付費(fèi)軟件，可以下載14天試用版
可以通過(guò)圖形制作動(dòng)效，可以設(shè)置自動(dòng)補(bǔ)間
導(dǎo)出svg文件，導(dǎo)出時(shí)可以設(shè)置運(yùn)動(dòng)是循環(huán)或是一次

建議大家自己下載軟件后嘗試

5. 格式大小比

通過(guò)試驗(yàn)幾種格式的大小大概是排序依次為：PNG序列>APNG>GIF(質(zhì)量較差)>Lottie / SVG，json文件和SVG動(dòng)畫(huà)文件比較接近，因此可以根據(jù)實(shí)際考慮決定即可，GIF雖然可以壓縮到比較小，但是本身圖片質(zhì)量也較差，因此建議慎重考慮。

動(dòng)效不知如何落地？看完騰訊高手的經(jīng)驗(yàn)就明白了