午夜无码国产a三级视频,天天爽夜夜爽免费看视频,嗯~啊~哦~别~别停~啊黑人

動效不知如何落地？

2020-8-25 濤濤

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

實現(xiàn)動畫的方式

設計輸出的方式大概可以分為位圖和矢量兩種，與常規(guī)的圖片輸出并無太大的差異。位圖方式：PNG序列幀、APNG、GIF；矢量方式：Lottie、SVG動畫。

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

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

實現(xiàn)動畫常用的工具

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

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

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

格式說明

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

如何輸出文件？

接下來講解下各個軟件輸出對應格式的方法，實際上操作并不會太難，動效本身更重要的還是在于創(chuàng)意本身，因此當你把握了這些方式之后可以考慮進行創(chuàng)意設計。

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

1. PNG序列

在AE中制作好動畫
通過AE預渲染，然后選擇PNG序列，直接渲染出序列幀到本地文件夾
導出序列幀后需要進行壓縮，常用的是tinypng，壓縮后較小的文件再進行交付

具體如下視頻

2. APNG

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

3. Lottie

AE中需要安裝bodymovin的插件
制作好動畫后，在窗口打開插件-bodymovin、
選擇導出的位置，直接渲染一下，即可在本地生成json文件
插件帶有預覽能力，但較差?？梢栽?a target="_blank" style="color:#262626;text-decoration-line:none;transition:all 0.2s ease 0s;border-bottom:1px solid #525252;word-break:break-all;">https://lottiefiles.com/preview中進行預覽查看

更多Lottie相關可以前往https://lottiefiles.com/學習，里面有豐富等Lottie動畫效果和一些插件下載，去研究下吧

4. SVG動畫