你有多久沒做動效了？平時的工作主要是終端視覺設計，功能需求加運營需求，靜態稿件加動效設計，從比例來看，動效設計其實不會佔很多空間，但偶爾也會來一波。而實際場景往往是：需求是排滿的，專案是緊急的，時間呢當然是很少的。一旦有了概念，落地當然是越快越好，效率至上。因此，做動效選對軟體很重要。

目前市面上已經有很多動效原型設計的軟體，AfterEffects，Keynote，Flash，Hype3，Flinto，Proto.io，Pixate，Origami，Framer…兩隻手已經快要數不過來惹，數不過來也學不過來。

學習一款新軟體的過程並不輕鬆，新軟體是否真的高效，很多軟體與靜態稿設計軟體（PS、Sketch等）不能無縫銜接始終是一道坎，面對新的邏輯想要從初學者到輕鬆駕馭，時間也是個問題。看過上面提到的部分軟體，也很想嘗試，但一看見陌生的介面和新的邏輯內心就非常拒絕，始終難遇真愛。

痛並用著的After Effects

雖然After Effects軟體很強大，拿來做動效很多人說是大材小用。但作為學渣我只會這一款，掌握的也都是非常基本的功能。在此之前我一直使用AE 來完成所有的動效相關的工作，但始終磕磕絆絆，心情略沉重：

1. 簡單的動效無法敏捷設計

日常忙碌的工作中，做出的動效質量不高，因為精調成本太高，想要獲得流暢、彈性的動效，需要各種精調布塞爾曲線、影象縮放。另外，使用AE渲染出的mov檔案匯入ps轉化為GIF整個過程非常緩慢，如果是10秒以上的視訊檔案在ps開啟每次都要等1分鐘以上，如果是macbookpro還會因此開始呼吸，心疼…

2. 無法互動始終是痛點

作為視訊處理軟體，AE最終生成的是一個動效視訊演示，更像是講述了一個故事。而在介面的動效設計中，我們更需要的是（面向PM、開發者、使用者測試的）基於真實場景的互動和使用體驗。

3. 最終淪為紙上談兵

沒有具體的數值給開發，很難被完美落地實現。你的動效設定很難形容（通常都用時間描述＋跑去和程式設計師一起慢慢微調），感覺跟開發GG的代溝也越來越深…我們寶貴的工作時間和對動效的耐心與熱愛就這樣被這些不人性化的缺點給消耗掉。有沒有一個新型的動效設計軟體既能敏捷高質量地輸出動效，又能幫到開發GG獲取數值完美實現呢？

前所未有的高效－Principle

今天推薦一款非常感人的動效設計軟體——Principle。前兩天因為有個動效需求排期緊急，半夜搜尋新的動效軟體無意發現，看了一下官網視訊內牛滿面地get了，隔天就用它出demo了。Principle在今年8月份誕生，來自前Apple工程師Daniel Hooper，找到

瞭解Principle

官網基礎教程的5個視訊可以幫助快速瞭解基本操作，和學習Sketch一樣檢視Principle中文手冊，英文原文可在Principle官網找到。Youtube可以搜尋到SketchTV錄製的視訊教程，太基礎不推薦，和看完官網的5只視訊效果一樣。

（新軟體太多，連學習過程也有規律了有木有：扒官網>找中文手冊>找教學視訊>設計網站膜拜大神跪求原始檔）

沒錯，接下來就去dribbble搜尋用Principle製作的動畫，下載原始檔研究。

如果你是AE和Sketch的使用者，會對Principle有更為熟悉的認知：類似Sketch的介面＋AE的時間軸動畫＋Keynote的神奇移動，外掛一個容易理解的聯動功能，用於觸發了某個事件發生的變化。

畫布預設

介面如此清切眼熟，和Sketch如出一轍。每個畫布相當於獨立的介面，也因此只要有聯動變化，就需要新建一個畫布，即使他們之間只有細微的差別。（需要注意的是這裡螢幕尺寸是1/2）

方便的檔案拖動

圖片可以直接拖進Principle，Sketch內的檔案也可以直接拖進Principle使用，省去了切圖的麻煩，注意拖拽前圖片或檔案需加上@2x的字尾（切圖同理）。但如果設計稿經常發生更變，還是建議切圖使用，因為可以在Principle直接替換切圖而保留其動效設定。

支援的互動動作

包括點選、拖拽、長按、滾屏、自動迴圈等，可模擬3Dtouch。

視窗實時預覽

提供一個預覽視窗體驗操作，執行效果介面跟設計介面本來就應該分離，開發者堅持這點真是太好了。

元素間自動生成補間動畫

如果兩個畫布中檔名稱一樣但發生了變化，Principle就會自動像Flash一樣為它建立一個補間動畫。這裡演示的動畫除了畫布間的Tap觸發事件，對圖形沒有任何額外的操作，Principle根據4幅圖之間的元素形狀變化自動生成了補間動畫。另外，可以快速調整補間動畫的效果為緩入、緩出等或直接調整曲線。

匯出mov、gif甚至追波稿

可以通過預覽檢視的錄製工具錄製視訊並匯出視訊或GIF，匯出時提供各種方便的尺寸設定。目前點選形狀只能在圈和滑鼠之間切換，分別適用於移動終端和web。

在手機上即時體驗

如果是終端介面動效，在Apple Store下載Principle並用資料線與mac相連，開啟principle立刻映象出你的動效demo，拔掉資料線依然有效，可以歡樂地在手機反覆體驗，甚至拿去使用者測試。而且任何修改都是即時呈現的。

手動獲取動畫數值

雖然暫不支援直接輸出動畫數值，但可以通過時間軸手動獲取曲線的具體數值交給開發者去實現我們的設計。

好的軟體會影響使用者

如果說Photoshop的原配是AE的話，Sketch的最佳拍檔未來很有可能是Principle，至少目前為止他們一樣高效、敏捷。

優點：

1. 互動友好，視覺化操作，易上手，零程式碼。邏輯是繼承性的，適用於有AE、Keynote、Flash的任何使用經驗者

2. 輕鬆輸出高質量的動效demo，預設動畫曲線非常精妙，調節方便，適用於簡單快速的動效需求

3. 高效精準，讓你的想法快速落地進行使用者測試，更直觀地與開發分享動效細節

4. 愛上做動效這件事，因為做動效從未變得如此簡單

改進的空間：

1. 每一次的變化都需要新建一個畫布，如果是複雜的互動將帶來多畫布和繁瑣的邏輯，整個動畫地圖會非常複雜（比如手上另一個抽獎場景動效，從抽獎過程到結果展示，這種故事性的行為還是需要用AE來完成）

2. 目前支援的動效功能比較少，只有xy軸位移、透明度、大小、旋轉（已經可以做出很多精彩的效果）。初期版本肯定不如其他動效軟體完整，比如z軸位移、重力外掛、修剪路徑這種（原來我知道的也很少…）

btw：本文沒有進行軟體對比之意，因為並沒有深入瞭解文中提到的除AE之外的其他軟體，勿撕。有時間的話最想入手瞭解的應該是Hype3和Flinto吧，歡迎交流學習。