做爰三级在线播放_又大又粗又猛又舒服又爽_暖暖www免费高清视频最新期_午夜精品aaa国产福利

動效不知如何落地?

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

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

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

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

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

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

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

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

  • Principle:可以輸出GIF、視頻等格式;
  • AE:可以輸出PNG序列,結(jié)合插件可以輸出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設(shè)計并導(dǎo)出,后綴為「.SVG」。

如何輸出文件?

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

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

1. PNG序列

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

具體如下視頻

2. APNG

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

3. Lottie

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

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

4. SVG動畫

  • 下載keyshape軟件,屬于付費軟件,可以下載14天試用版
  • 可以通過圖形制作動效,可以設(shè)置自動補間
  • 導(dǎo)出svg文件,導(dǎo)出時可以設(shè)置運動是循環(huán)或是一次

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

5. 格式大小比

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

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

應(yīng)用案例

動效在UI設(shè)計中的應(yīng)用場景很多,這里梳理了一下,之前我在項目中嘗試過的動效,給大家分享下一些案例,希望可以對大家有所啟發(fā)。

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

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

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

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

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

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

最后總結(jié)

學(xué)習(xí)用什么工具導(dǎo)出什么格式的文件只是第一步,更重要的還是如何制造出一個有創(chuàng)意的動效,因此不要過于強調(diào)工具,更多應(yīng)該培養(yǎng)自己思考設(shè)計的習(xí)慣。

文章來源:優(yōu)設(shè)    作者:ID設(shè)計站

藍藍設(shè)計91whvog3.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)


日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://91whvog3.cn

存檔