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

一、引言：

抽獎(jiǎng)活動(dòng)作為一種互聯(lián)網(wǎng)產(chǎn)品常用營(yíng)銷手段，其視覺(jué)形式更是五花八門：轉(zhuǎn)盤、抽簽、翻牌子、老虎機(jī)…無(wú)論是哪種套路，都需要設(shè)計(jì)師做好其中的動(dòng)效設(shè)計(jì)，以達(dá)到吸引用戶參與，提高點(diǎn)擊和轉(zhuǎn)化的活動(dòng)目的。

把抽獎(jiǎng)活動(dòng)的視覺(jué)設(shè)計(jì)做得更逼真更精美，是每一位有職業(yè)理想的UI設(shè)計(jì)師或運(yùn)營(yíng)設(shè)計(jì)師追求的目標(biāo)之一。

筆者也在積極嘗試設(shè)計(jì)新的抽獎(jiǎng)活動(dòng)。豐富自家產(chǎn)品活動(dòng)形式的同時(shí)，也可以提高個(gè)人的設(shè)計(jì)能力。當(dāng)筆者懷揣著這一理想，將設(shè)計(jì)從簡(jiǎn)單的2D平面如轉(zhuǎn)盤、開(kāi)紅包等類型，進(jìn)階至3D形式如翻牌子、老虎機(jī)（滾動(dòng)式），卻遇到了障礙——目前世面主流的動(dòng)效落地方案，包括Lottie、SVGA、Apng，并不支持矢量3D動(dòng)效。

設(shè)計(jì)師們遇到“翻轉(zhuǎn)”形式的設(shè)計(jì)，要么將本是矢量替換層的動(dòng)效預(yù)設(shè)為序列幀，最后再將獎(jiǎng)品疊加上去，要么用邊角定位、拉伸、疊加投影等方式結(jié)合起來(lái)，將矢量替換層通過(guò)2D視覺(jué)營(yíng)造的方式“實(shí)現(xiàn)”3D效果。先不說(shuō)設(shè)計(jì)師們處理起來(lái)增加了很多工作量，這些方式更像是“視覺(jué)欺騙”，真實(shí)感欠缺，用戶投入感也被大打折扣。

筆者此前做了一個(gè)滾動(dòng)抽獎(jiǎng)的老虎機(jī)設(shè)計(jì)，就因?yàn)長(zhǎng)ottie、SVGA不支持3D圖層輸出，最后不得不改為使用2D長(zhǎng)圖進(jìn)行位移運(yùn)動(dòng)，不僅工作量增加，原本3D的翻折效果也丟了。

二、遇見(jiàn)PAG：

筆者在搜索各種解決辦法時(shí)，發(fā)現(xiàn)一款號(hào)稱“全AE功能支持”的動(dòng)效方案——PAG動(dòng)效，官方說(shuō)明PAG能夠一鍵將設(shè)計(jì)師在AE中制作的動(dòng)效內(nèi)容導(dǎo)出成素材文件，并快速上線應(yīng)用于幾乎所有的主流平臺(tái)。目標(biāo)是降低或消除動(dòng)效相關(guān)的研發(fā)成本。但對(duì)筆者來(lái)說(shuō)，更關(guān)鍵的一點(diǎn)是：PAG支持3D矢量動(dòng)效！

按照PAG的文檔對(duì)“兔兔機(jī)”工程進(jìn)行修改和調(diào)整，果然成功輸出了想要的動(dòng)效。下面附上這一過(guò)程的發(fā)現(xiàn)和收獲。

三、使用PAG：

1、安裝流程簡(jiǎn)單順暢

訪問(wèn)PAG官網(wǎng)即可免費(fèi)下載PAGViewer，提供MacOS和Windows兩種不同操作系統(tǒng)的程序。筆者用的是MacOS，整個(gè)安裝流程都很順暢，和大多數(shù)正版app無(wú)異。

首次打開(kāi)PAGViewer，會(huì)自動(dòng)提示安裝PAG for AE的插件，也是一鍵即可完成安裝。

2、詳細(xì)的設(shè)計(jì)師文檔

PAG官網(wǎng)對(duì)其支持的AE能力進(jìn)行了詳細(xì)地說(shuō)明，對(duì)各種能力進(jìn)行了分類，設(shè)計(jì)師可以快速找到對(duì)應(yīng)效果是否被支持。此外，PAG還提供了設(shè)計(jì)師操作文檔，包括軟件安裝、導(dǎo)出面板、預(yù)覽工具、性能優(yōu)化和視頻教程，方便設(shè)計(jì)師快速上手PAG動(dòng)效。

筆者在瀏覽文檔的過(guò)程中，特別關(guān)注到了一點(diǎn)：設(shè)計(jì)師可根據(jù)PAG支持的能力對(duì)自己的工程進(jìn)行調(diào)整和優(yōu)化，以確保占位圖或視頻能夠矢量輸出對(duì)應(yīng)的動(dòng)效效果，若工程中使用了PAG不支持的AE特性或插件效果，可將對(duì)應(yīng)圖層和效果進(jìn)行_bmp預(yù)合成，轉(zhuǎn)為序列幀動(dòng)畫，以實(shí)現(xiàn)全AE功能的支持。

于是筆者對(duì)“兔兔機(jī)”的工程進(jìn)行調(diào)整，主要是將使用了表達(dá)式的圖層、不需要可編輯的圖層進(jìn)行_bmp后綴的預(yù)合成；占位圖層使用了表達(dá)式，將表達(dá)式轉(zhuǎn)化為關(guān)鍵幀。

3、詳盡的插件面板

調(diào)整完成后，點(diǎn)擊文件-導(dǎo)出-PAG File (Panel)，打開(kāi)導(dǎo)出面板，可以看到其中的功能：

①優(yōu)化建議：提示可編輯圖層使用了不被支持的AE特性，或是其他優(yōu)化建議（例如圖中建議相鄰2個(gè)_bmp合成為1個(gè)，以提高渲染性能）；

②常規(guī)功能：修改儲(chǔ)存路徑、多選導(dǎo)出；

③文件預(yù)覽：點(diǎn)擊“眼睛”圖標(biāo)進(jìn)行文件預(yù)覽；

④音頻導(dǎo)出：勾選“同時(shí)導(dǎo)出音頻”可將音頻添加至PAG文件中；

⑤打開(kāi)設(shè)置面板：點(diǎn)擊“齒輪”圖標(biāo)可打開(kāi)設(shè)置面板。

設(shè)置面板中：

①合成：可以查看_bmp合成信息，或?qū)⑦€未進(jìn)行_bmp后綴的合成勾選為bmp圖層再導(dǎo)出；

②占位圖層：查看占位圖層信息，修改填充和替換形式；

③時(shí)間伸縮：素材持續(xù)時(shí)長(zhǎng)修改；

④文本圖層：查看文本圖層信息，可編輯性修改。

4、全AE功能支持

筆者熟悉了PAG插件面板之后，嘗試輸出PAG文件，順利地導(dǎo)出了這個(gè)之前因動(dòng)效方案不支持而棄用的3D素材，PAG號(hào)稱全AE功能支持果然誠(chéng)不欺我！

原來(lái)，PAG支持純矢量導(dǎo)出、BMP預(yù)合成導(dǎo)出以及BMP+矢量混合導(dǎo)出：

①純矢量導(dǎo)出：運(yùn)行性能更優(yōu)，且適合素材內(nèi)容可編輯的設(shè)計(jì)；

②BMP預(yù)合成導(dǎo)出：可理解為將合成轉(zhuǎn)化為序列幀動(dòng)畫，以此實(shí)現(xiàn)AE全特性支持；

③矢量+BMP混合導(dǎo)出：結(jié)合了矢量圖層可編輯和BMP圖層支持全AE特性的兩大特點(diǎn)，設(shè)計(jì)師可以據(jù)此完成各類互聯(lián)網(wǎng)產(chǎn)品動(dòng)效的落地。

5、運(yùn)行時(shí)可編輯

PAGViewer運(yùn)行時(shí)可編輯，支持修改文本和替換占位圖，設(shè)計(jì)師在本地填充素材預(yù)覽，無(wú)需等到上線后才能確認(rèn)真實(shí)的效果。

6、性能提示

PAG在桌面預(yù)覽工具 PAGViewer 上增加了性能檢測(cè)的功能，可以讓設(shè)計(jì)師很方便地看到PAG文件的基本信息，還有量化的性能指標(biāo)，定量地評(píng)估該文件的性能，以可視化的方式感知素材性能狀態(tài)，方便設(shè)計(jì)師進(jìn)行針對(duì)性的優(yōu)化，而不需要依賴研發(fā)上線測(cè)試性能狀態(tài)，極大減少了素材優(yōu)化的返工耗時(shí)。

7、文件極小

順帶一提，“兔兔機(jī)”案例導(dǎo)出的pag文件僅1M大小，居然比原本的png圖片還要?。╬ng占7.4M，2732*2048），如此高效率的壓縮，若植入在互聯(lián)網(wǎng)產(chǎn)品，對(duì)于提高素材加載速度，優(yōu)勢(shì)明顯。

四、場(chǎng)景探索

筆者在“追波”dribbble上看了一些酷炫靈動(dòng)的UI動(dòng)效設(shè)計(jì)，由于PAG支持3D矢量動(dòng)畫、AE全特性，如果這些設(shè)計(jì)師所在團(tuán)隊(duì)接入了PAG動(dòng)效，他們的設(shè)計(jì)都將得以落地使用，不再是設(shè)計(jì)師炫技的概念性設(shè)計(jì)，可以極大地提高產(chǎn)品的視覺(jué)表現(xiàn)。

五、總結(jié)：

學(xué)習(xí)成本低，使用體驗(yàn)順暢，全AE功能支持，完善的工具鏈，性能表現(xiàn)好...PAG動(dòng)效一系列的優(yōu)點(diǎn)，使其非常適合作為互聯(lián)網(wǎng)產(chǎn)品的動(dòng)效落地方案。不僅給設(shè)計(jì)師提供很多便利的同時(shí)，PAG團(tuán)隊(duì)甚至還在Github中撰寫了詳細(xì)的研發(fā)接入文檔，供工程師學(xué)習(xí)和接入PAG SDK。如果你的團(tuán)隊(duì)正在煩惱動(dòng)效落地，不妨試著引入PAG作為解決方案，開(kāi)源版免費(fèi)使用～

Powered by Froala Editor