如何把AE的動效DEMO準確表達給軟體工程師？

01-11

最近就在與軟體工程師溝通動效問題，一直有個疑問。基於AE做的demo給出的數據，為什麼實現出來會比demo慢很多，AE是1S/25幀，算起來就是一幀40毫秒，其他都沒問題，就是這個時間問題。
還有，怎樣可以準確把動效表達清楚。。。

占坑，晚上來答。

----------------------------------------------------20141211晚的分隔線--------------------------------------------------------

不好意思，晚答了一天，把自己不多的經驗分享出來。

首先介紹最重要的兩個概念：

動畫（Animation）

某個界面控制項在一段時間內的變化即產生動畫。產生動畫的維度可以是它的形狀、位置、大小、顏色、透明度等，抑或是它們的疊加。

過渡（Transition）

那這個控制項在兩個狀態之間是如何變化的呢？定義這個變化的概念即是過渡。不同的過渡曲線會產生截然不同的效果。通常被提到的有ease in、ease out、bounce等，當然Axure也提供這些效果。以位置為例，一個矩形由下至上移動300px，不同的運動曲線所對應的動效之間有非常明顯的區別。

Source：緩動函數速查表點擊鏈接可比對不同運動曲線產生的效果差異

過渡曲線可以通過數學公式精確表達出來，通常使用貝塞爾曲線（bezier），是不是有點耳熟？對，Photoshop里的鋼筆工具靠的就是它。

由於Android系統自帶動畫的運動曲線在5.0之前基本接近線性（linear），給人的直觀感受非常僵硬。而2013年中發布的iOS7大幅優化了動效的過渡曲線，尤其是上下級界面左右切換時的緩動效果令人印象深刻。所以我在Android某個項目的Demo中模擬了iOS動效的Transiton，並且完整的由工程師實現出來，那是一次非常暢快的合作。那麼問題來了，如何向工程師準確描述動效？

向工程師給出準確的動效描述

通過上面的兩個概念可以知道，3個參數即可準確描述動效：控制項變化的維度、變化的時間、過渡曲線公式。

控制項變化的維度以及時間都很容易確定，就剩下過渡曲線公式，下面以模擬iOS過渡曲線來舉例。

C?me Courteault（http://come.ninja/）在他的博文（http://come.ninja/2013/cloning-the-ui-of-ios-7-with-html-css-and-javascript/）中擬合出非常接近iOS7的過渡曲線。

Source：CSS cubic-bezier Builder 可以靈活的調整立方貝塞爾過渡曲線

上圖中的(0.10, 0.70, 0.10, 1)即是立方貝塞爾公式中起始控制點與終止控制點的坐標。這樣，過渡曲線的公式也有了。立方貝塞爾公式為下圖，其中P0=0.10，P1=0.70，P2=0.10，P3=1。

到這裡所有的參數都妥了，終於可以開開心心的去找工程師GG了。單個控制項的動效可以準確描述後，更複雜的動效就是時間問題了。

最後的話

羅奧提到的Framer、Origami也是很好的工具，不過通曉原理之後工具不就不重要了？

PS：建議將時間軸設置為30幀/秒，因為30可以同時被2、3、5整除，對於時間的計算與細節控制會更方便。

--------------------------------------------------------參考列表的分隔線----------------------------------------------------------

1.緩動函數速查表

2.克隆iOS7 UI http://come.ninja/2013/cloning-the-ui-of-ios-7-with-html-css-and-javascript/

3.在線立方貝塞爾曲線工具 CSS cubic-bezier Builder

4.貝塞爾曲線貝塞爾曲線 _百度百科

更新一下，我現在基本全部動效都用framer完成了

---

給iOS工程師用的話，用quartzCode，製作動畫的流程類似flash，動態效果可以直接生產obj-c或swift，給web工程師的話用framer

說個題外話，生產工具也在變革，我從photoshop轉為用sketch之後，今年更是希望日常工作能全線戒掉adobe，目前正在嘗試替換掉的就是AE了

FRAMER或ORIGAMI的學習成本太高，除了AE可選擇的其他工具HYPE3是比較好的。

1.如果你的UI設計師用的是sketch，那麼HYPE3和pixate是好的選擇。

2.如果UI用的是PS，那麼AE是最好的選擇。

我本人熟練AE，所以一般都用AE製作。

3.我們的UI用的是sketch，矢量圖icon都用sketch導出為PDF後導入AI轉換，之後再導入AE，並轉換為形狀圖層（shape layer），再進行形變以及其他動態效果。

4.關於AE中的腳本有幾個推薦

（1）調整曲線可用MOTION V2，比ease and wizz好一點，而且能夠控制錨點的位置（AE的形狀層中心點有的時候很亂）

（2）link插件也是必備，可以讓你控制同時控制N各關鍵幀和層級，具體看使用教程吧。

5.關於給工程師，可以提供視頻格式，要高保真，並提供詳解和相應的緩動函數，一般水平不錯的工程師都會看懂。。。

AE還是側重於展示，真正能幫到程序開發的還是得是qc和form，把打包好的數據給程序可以原封不動的還原你的效果。基於信號流的交互才符合現在交互設計師的真正需求。AE走個過場，給程序或者老闆展示一下，讓他們明白你的想法還是可以的，（偶爾還可以裝裝逼哦）。

Lottie是一個可以實時渲染After Effects動畫的iOS，Android和React Native庫，允許應用程序像使用靜態圖像一樣使用動畫。

Lottie

一些效果可以通過它來實現哦～

換個軟體吧~

Framer Studio 1.9.29

設計師新寵！交互神器Origami

目前這應該是每個設計動效設計師最棘手的的問題，如何還原百分百...

只能給一些參考...安卓的.

這個是Google的開發做出的一個基於Bodymovin 導出，然後給開發.

https://medium.com/@crafty/learn-some-new-moves-b8aad7828014

目前只知道安卓的這些... iOS的還不清楚.

不過我覺得有能力的話，可以簡單的學一下他們的開發..更方便理解吧.