一、引言：

抽獎活動作為一種互聯網產品常用營銷手段，其視覺形式更是五花八門：轉盤、抽簽、翻牌子、老虎機…無論是哪種套路，都需要設計師做好其中的動效設計，以達到吸引用戶參與，提高點擊和轉化的活動目的。

把抽獎活動的視覺設計做得更逼真更精美，是每一位有職業理想的UI設計師或運營設計師追求的目標之一。

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

設計師們遇到“翻轉”形式的設計，要么將本是矢量替換層的動效預設為序列幀，最后再將獎品疊加上去，要么用邊角定位、拉伸、疊加投影等方式結合起來，將矢量替換層通過2D視覺營造的方式“實現”3D效果。先不說設計師們處理起來增加了很多工作量，這些方式更像是“視覺欺騙”，真實感欠缺，用戶投入感也被大打折扣。

筆者此前做了一個滾動抽獎的老虎機設計，就因為Lottie、SVGA不支持3D圖層輸出，最后不得不改為使用2D長圖進行位移運動，不僅工作量增加，原本3D的翻折效果也丟了。

二、遇見PAG：

筆者在搜索各種解決辦法時，發現一款號稱“全AE功能支持”的動效方案——PAG動效，官方說明PAG能夠一鍵將設計師在AE中制作的動效內容導出成素材文件，并快速上線應用于幾乎所有的主流平臺。目標是降低或消除動效相關的研發成本。但對筆者來說，更關鍵的一點是：PAG支持3D矢量動效！

按照PAG的文檔對“兔兔機”工程進行修改和調整，果然成功輸出了想要的動效。下面附上這一過程的發現和收獲。

三、使用PAG：

1、安裝流程簡單順暢

訪問PAG官網即可免費下載PAGViewer，提供MacOS和Windows兩種不同操作系統的程序。筆者用的是MacOS，整個安裝流程都很順暢，和大多數正版app無異。

首次打開PAGViewer，會自動提示安裝PAG for AE的插件，也是一鍵即可完成安裝。

2、詳細的設計師文檔

PAG官網對其支持的AE能力進行了詳細地說明，對各種能力進行了分類，設計師可以快速找到對應效果是否被支持。此外，PAG還提供了設計師操作文檔，包括軟件安裝、導出面板、預覽工具、性能優化和視頻教程，方便設計師快速上手PAG動效。

筆者在瀏覽文檔的過程中，特別關注到了一點：設計師可根據PAG支持的能力對自己的工程進行調整和優化，以確保占位圖或視頻能夠矢量輸出對應的動效效果，若工程中使用了PAG不支持的AE特性或插件效果，可將對應圖層和效果進行_bmp預合成，轉為序列幀動畫，以實現全AE功能的支持。

于是筆者對“兔兔機”的工程進行調整，主要是將使用了表達式的圖層、不需要可編輯的圖層進行_bmp后綴的預合成；占位圖層使用了表達式，將表達式轉化為關鍵幀。

3、詳盡的插件面板

調整完成后，點擊文件-導出-PAG File (Panel)，打開導出面板，可以看到其中的功能：

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

②常規功能：修改儲存路徑、多選導出；

③文件預覽：點擊“眼睛”圖標進行文件預覽；

④音頻導出：勾選“同時導出音頻”可將音頻添加至PAG文件中；

⑤打開設置面板：點擊“齒輪”圖標可打開設置面板。

設置面板中：

①合成：可以查看_bmp合成信息，或將還未進行_bmp后綴的合成勾選為bmp圖層再導出；

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

③時間伸縮：素材持續時長修改；

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

4、全AE功能支持

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

原來，PAG支持純矢量導出、BMP預合成導出以及BMP+矢量混合導出：

①純矢量導出：運行性能更優，且適合素材內容可編輯的設計；

②BMP預合成導出：可理解為將合成轉化為序列幀動畫，以此實現AE全特性支持；

③矢量+BMP混合導出：結合了矢量圖層可編輯和BMP圖層支持全AE特性的兩大特點，設計師可以據此完成各類互聯網產品動效的落地。

5、運行時可編輯

PAGViewer運行時可編輯，支持修改文本和替換占位圖，設計師在本地填充素材預覽，無需等到上線后才能確認真實的效果。

6、性能提示

PAG在桌面預覽工具 PAGViewer 上增加了性能檢測的功能，可以讓設計師很方便地看到PAG文件的基本信息，還有量化的性能指標，定量地評估該文件的性能，以可視化的方式感知素材性能狀態，方便設計師進行針對性的優化，而不需要依賴研發上線測試性能狀態，極大減少了素材優化的返工耗時。

7、文件極小

順帶一提，“兔兔機”案例導出的pag文件僅1M大小，居然比原本的png圖片還要?。╬ng占7.4M，2732*2048），如此高效率的壓縮，若植入在互聯網產品，對于提高素材加載速度，優勢明顯。

四、場景探索

筆者在“追波”dribbble上看了一些酷炫靈動的UI動效設計，由于PAG支持3D矢量動畫、AE全特性，如果這些設計師所在團隊接入了PAG動效，他們的設計都將得以落地使用，不再是設計師炫技的概念性設計，可以極大地提高產品的視覺表現。

五、總結：

學習成本低，使用體驗順暢，全AE功能支持，完善的工具鏈，性能表現好...PAG動效一系列的優點，使其非常適合作為互聯網產品的動效落地方案。不僅給設計師提供很多便利的同時，PAG團隊甚至還在Github中撰寫了詳細的研發接入文檔，供工程師學習和接入PAG SDK。如果你的團隊正在煩惱動效落地，不妨試著引入PAG作為解決方案，開源版免費使用～

Powered by Froala Editor