AE在UI動效設計中的應用
來源: | 作者:林偉雄 | 發布時間: 2019-10-12 | 105 次瀏覽 | 分享到:
動效設計是UI設計中不可或缺的一環。隨著硬件性能的發展和動效輸出方式的優化,大家對動效的認知也從最初的認為動效只是為了美觀酷炫,到逐漸認識到動效對于提升用戶體驗和產品需求的重要作用。

最近幾年,除了老牌AE之外,InVision、Flinto、Principle、Marvel等大量輕量級動效工具相繼涌現,甚至掀起一股“動效”熱潮。這些新興工具主要特點是輕量、快捷、學習成本低,雖然確實可以幫助新手快速入門,解決許多基本動效問題。然而由于其輕量的特性,在設計一些較為復雜的動效甚至是特效時,就會顯得無力。

而在利用老牌工具AE進行UI動效設計,設計師只需配合PS和AI等自家軟件,在PS或AI里設計好UI視覺稿后,再稍加整理圖層,即可無縫銜接AE進行動效設計。下面就來一起看一下,如何把PS與AE進行無縫鏈接。


一、PS和AE如何鏈接


首先,在PS里將文件圖層進行整理。



然后,將整理好的PSD文件導入到AE里。選擇可編輯的圖層樣式,即可將PSD文件里的圖層以及圖層樣式全部導入到AE里進行相關的動效設計。




二、AE做出的動效該如何落地


設計師在做動效設計的時候靈感噴涌,兢兢業業做出炫酷的效果,結果一和開發工程師對接就懵了——要么無法實現,要么極其復雜。畢竟開發工程師要通過代碼把動效實現出來,設計師得用開發工程師所能理解的語言來描述。



那么我們該如何將動效轉化成開發工程師看得懂的語言?
首先,需要將動效量化。




然后,詳細記錄AE文件里的動效數據以及運動曲線。




最后,將詳細的數據匯聚成一份數據表格,如下表所示:



通過以上步驟,開發工程師就能解決80%的動效實現問題,但遇到一些復雜動效/特效就會失去作用。因為復雜動效/特效涉及的數據不單單只有時間、變化、曲線,而是由更多的AE內的功能實現,而這些功能是用計算機語言編程好的,顯然是不可能提取出相關代碼供開發工程師使用的。這時候我們就可以使用LOTTIE、KEYFRAME類的開源庫,將AE導出的動畫資源直接在項目中應用了。下面我們拿LOTTIE來舉個例子:



Lottie 是 Airbnb 開源的一個動畫渲染庫,同時支持Android、iOS、React Native 平臺。通過 AE 插件 bodymovie 可導出 json 文件作為動畫數據,其工作流程如下:




我們只需把相關軟件安將完成,然后進入AE里,開啟插件生成一個json格式的文件(json文件描述了該動畫的一些關鍵點的坐標及運動軌跡),再交給開發工程師引用,如此一來,不需要任何圖片和gif,動畫效果就可以實現出來了,非常簡單方便。
相關文章
金拉霸老虎机开奖视频