亚洲欧美v国产一区二区三区,中文字日产幕乱五区,综合亚洲,,,色,亚洲伊人久久大香线蕉综合,亚洲综合精品伊人久久

首頁 > SEO動態(tài) > 網(wǎng)站技術(shù)全網(wǎng)難得教程!超詳細(xì)的SVGA禮物動效設(shè)計(jì)指南

全網(wǎng)難得教程!超詳細(xì)的SVGA禮物動效設(shè)計(jì)指南

全網(wǎng)難得教程!超詳細(xì)的SVGA禮物動效設(shè)計(jì)指南

首先想說下為啥要寫這篇文章,最近接到個(gè)項(xiàng)目任務(wù),制作直播間禮物贈送視覺效果,由于之前沒有接觸過此類設(shè)計(jì),因此在多方打聽,并在網(wǎng)上到處探索后發(fā)現(xiàn) SVGA 是個(gè)不錯(cuò)的選擇,在與開發(fā)同學(xué)溝通并嘗試了另外幾種格式輸出文件后,我們最終敲定了用 SVGA。

在網(wǎng)上搜索了很多相關(guān)資料學(xué)習(xí),發(fā)現(xiàn)網(wǎng)上關(guān)于 SVGA 的資料相當(dāng)少,而且很大部分還是介紹關(guān)于開發(fā)的,關(guān)于設(shè)計(jì)制作的少的可憐,這也是我打算寫這篇內(nèi)容的的原因,我覺得或許應(yīng)該有這么一篇文章,幫助到一些正在做這個(gè)事兒的設(shè)計(jì)同學(xué),如果有什么表達(dá)有問題的地方歡迎大家指正…

一、禮物動效輸出方法

A:導(dǎo)出關(guān)鍵幀動畫制作禮物動效

缺點(diǎn):需要把圖片帶到安裝包中,增大了安裝包體積

B:使用屬性動畫

缺點(diǎn):開發(fā)代價(jià)較大,每一套禮物動畫基本都不一樣,開發(fā)人員需要去細(xì)細(xì)調(diào)參,花在業(yè)務(wù)上編碼的時(shí)間會變得非常有限,從代碼復(fù)用率極低

C:輸出 GIF 文件

缺點(diǎn):輸出效果差,并且資源占用高

D:使用 SVGA,SVGA 支持位圖,并且輸出后直接封裝打包好的,直接給開發(fā) SVGA 文件就 OK,并且 SVGA 更貼合直播類應(yīng)該場景,SVGA 所提供的動態(tài)文本、動態(tài)圖像功能都是其它庫所不能提供的,在實(shí)現(xiàn)炫酷動畫的基礎(chǔ)上,性能表現(xiàn)也比較棒。

SVGA 是開源工具可以跨平臺使用,支持 AndROId、iOS、React Native、Web、微信小程序,但是在微信小程序上表現(xiàn)會差一些。

二、什么是 SVGA

SVGA 是由 YY 團(tuán)隊(duì)開發(fā)出來的一種跨平臺的開源動畫格式,同時(shí)兼容 iOS / Android / Web。SVGA 除了使用簡單,性能卓越,同時(shí)讓動畫開發(fā)分工明確,各自專注各自的領(lǐng)域,大大減少動畫交互的溝通成本,提升開發(fā)效率,動畫設(shè)計(jì)師專注動畫設(shè)計(jì),通過工具輸出 svga 動畫文件,提供給開發(fā)工程師在集成 svga player 之后直接使用。

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

三、AE 基礎(chǔ)屬性制作輸出 SVGA

筆者常用的動效制作軟件是 After Effects,因此主要講如何通過 AE 制作導(dǎo)出 SGAV 動效,利用 AE 制作基礎(chǔ)屬性動畫,基礎(chǔ)屬性動畫包括(位移、縮放、旋轉(zhuǎn)、透明度)。

第一步:從 sketch 或者 PS 中將禮物和禮物效果元素切圖導(dǎo)出,根據(jù)個(gè)人需可以將禮物拆分成幾塊分別導(dǎo)出,方便 AE 中制作動態(tài)效果。

全網(wǎng)難得教程!超詳細(xì)的SVGA禮物動效設(shè)計(jì)指南

第二步:將導(dǎo)出的切圖素材導(dǎo)入 AE 中,利用 AE 制作基礎(chǔ)屬性動畫,制作完成后結(jié)果如下

全網(wǎng)難得教程!超詳細(xì)的SVGA禮物動效設(shè)計(jì)指南

第三步:將背景隱藏在窗口-擴(kuò)展中找到 SVGAConverter_A

全網(wǎng)難得教程!超詳細(xì)的SVGA禮物動效設(shè)計(jì)指南

第四步:用 SVGAConverter_AE 插件導(dǎo)出 SVGA 文件,輸出 SVGA 時(shí)記得把背景調(diào)成透明背景,輸出后如下

全網(wǎng)難得教程!超詳細(xì)的SVGA禮物動效設(shè)計(jì)指南

通過下圖可以看到 SVGA 輸出格式后文件大小僅為 145KB,如果是序列幀的話文件大小高達(dá) 10 幾 M

全網(wǎng)難得教程!超詳細(xì)的SVGA禮物動效設(shè)計(jì)指南

四、AE 預(yù)設(shè)效果制作輸出 SVGA

接觸過 SVGA 的同學(xué)應(yīng)該都知道,SVGA 支持位圖、矢量和一些基礎(chǔ)屬性動畫,很多時(shí)候我們制作禮物特效的時(shí)候,都是用自己做好的位圖素材導(dǎo)入 AE 進(jìn)行一些基礎(chǔ)屬性的動畫制作,這次我將利用序列幀位圖制作出一些更炫的禮物特效。

第一步:在 AE 中用預(yù)設(shè)效果制作出自己滿意的禮物特效

全網(wǎng)難得教程!超詳細(xì)的SVGA禮物動效設(shè)計(jì)指南

第二步:將制作的特效動畫導(dǎo)出序列幀,然后在將序列幀從新導(dǎo)回 AE 中,新建預(yù)合成將每一幀拼接起來,這樣做的目的是因?yàn)?SVGA 無法識別 AE 的表達(dá)式和效果預(yù)設(shè),所以我們將特效轉(zhuǎn)為序列幀后在重新放進(jìn) AE,序列幀是位圖所以 SVGA 可以識別并導(dǎo)出特效。

全網(wǎng)難得教程!超詳細(xì)的SVGA禮物動效設(shè)計(jì)指南

第三步:接下來將制作好的序列幀預(yù)合成放置到禮物特效合成中,打開 SVGA 插件輸出 SVGA 禮物特效動畫。

全網(wǎng)難得教程!超詳細(xì)的SVGA禮物動效設(shè)計(jì)指南

五、AE 插件制作輸出 SVGA

這次我用 AK 大佬的插件 saber 為大家做案例,saber 是一款很不錯(cuò)的光效制作插件,也比較容易上手,視覺表現(xiàn)力也非常棒,本篇文章主要是將 SVGA,所以就不給大家具體說明 saber 如果做禮物特效了。

第一步:根據(jù)禮物的輪廓利用 saber 插件制作出火焰燃燒效果。

全網(wǎng)難得教程!超詳細(xì)的SVGA禮物動效設(shè)計(jì)指南

第二步:和剛才所說的預(yù)設(shè)效果特效動畫一樣,我們通過 AE 將特效動畫導(dǎo)出 PNG 序列幀,然后在將序列幀導(dǎo)回 AE,并將每一幀拼接起來,這里有個(gè)小技巧給大家說下,用過 saber 的同學(xué)都知道 saber 的用法是利用 AE 的圖層樣式"屏幕"將光效合成在圖里,其實(shí) saber 也可以導(dǎo)出透明背景的 PNG 的,方法很簡單,將 saber 當(dāng)前圖層復(fù)制一層,然后對復(fù)制出來的副本進(jìn)行用亮度遮罩。

全網(wǎng)難得教程!超詳細(xì)的SVGA禮物動效設(shè)計(jì)指南

第三步:接下來將制作好的序列幀預(yù)合成放置到禮物特效合成中,打開 SVGA 插件輸出 SVGA 禮物特效動畫。

全網(wǎng)難得教程!超詳細(xì)的SVGA禮物動效設(shè)計(jì)指南

總結(jié)

最后聊一下關(guān)于用其他軟件制作的禮物動畫,根據(jù)上面所說的幾種方法可以發(fā)現(xiàn),我們想要在 SVGA 中想要得到更好的效果,就是將制作的特效輸出為序列幀后在 AE 中重新拼接起來,換一種說法就是我們可以不僅限于 AE 來制作,也可以使用 C4D 或者其他設(shè)計(jì)軟件來做,只需要我們將最終效果已序列幀的形式進(jìn)行輸出即可。

并且我們也可以利用位圖、基礎(chǔ)屬性和插件相結(jié)合來做,值得注意的是如果視覺效果做的太過復(fù)雜會導(dǎo)致文件過大,同時(shí)也會產(chǎn)生性能方面的問題,在制作的過程中大家還時(shí)要把握好一個(gè)度。

附件有 AE 的 SVGA 安裝包大家可以下載

參考資料:

  1. SVGA: http://svga.io/designer.Html
  2. https://juejin.im/entry/59f1648f5188254115700ee6
  3. https://juejin.im/entry/59f6c0ec6fb9a0451d40bfbf
  4. https://blog.csdn.net/gutaocslg/article/details/79908414

作者:Tomato76

想了解更多網(wǎng)站技術(shù)的內(nèi)容,請?jiān)L問:網(wǎng)站技術(shù)

本文來源:http://www.sonygallery.com.cn/seodongtai/19230.html

免責(zé)聲明:部分文章信息來源于網(wǎng)絡(luò)以及網(wǎng)友投稿,本網(wǎng)站只負(fù)責(zé)對文章進(jìn)行整理、排版、編輯,是出于傳遞更多信息之目的,并不意味著贊同其觀點(diǎn)或證實(shí)其內(nèi)容的真實(shí)性,不承擔(dān)任何法律責(zé)任。