Principle也許是目前對設計師最友好的動效軟件，它最大的優點就是界面簡單，左邊是屬性欄，中間是畫布，右邊是預覽窗口，讓你隨時預覽效果，及時作出調整；動畫易用，無需代碼，只需點擊需要交互的畫布或圖層旁邊的小閃電，選擇觸發的動作，拖動連接到目標畫布即可，還能直接Import Sketch文檔，麻麻再也不用擔心我不會做動效了~~

經過對Principle的初步使用，我發現其實巧用里面的“三板斧”，很多常見的交互動效基本能夠實現，大大減少了和產品、開發溝通的時間。

1.Angle，Scale，Opacity搭配使用效果更佳

很多交互動效都是通過角度改變、大小縮放和透明度漸變來形成自然的視覺效果，比如常見的圓形進度條和loading，就是通過有色圓環和白色遮罩層的旋轉位移來實現的。

豆瓣loading

值得注意的是，Principle圖層的角度變化是基于該圖層的中心點的，如果要實現圓形旋轉，需要為每一個交互圖層添加一個輔助圖形，例如添加一個正方形，正方形和旋轉的圓形內切，中心點重合，把這個正方形的透明度設為0，并與交互圖層組合，這樣組合的中心點便是正方形的中心點，能與圓形同心旋轉。

還有Material Design里面經典的觸控漣漪效果在Principle里面也非常容易實現，只需要在控件位置添加一個圓形圖層，設置觸發時比例由小變大，透明度漸變為0，畫面的視覺表達瞬間變得生動很多。

Material Design觸控漣漪效果

搭配使用Angle，Scale，Opacity，然后慢慢調整時間軸（即時預覽實在太方便！！！），讓動畫更加流暢自然。這些有趣的動效一方面可以提供反饋，另一方面還可以為APP增色，給用戶制造小驚喜。

前段時間做的一個Twitter like（煙花效果始終不滿意，求高手解救！）

2.動畫曲線動起來

Principle科學的地方在于預設的動畫曲線都是符合物理運動規律的，而且可以手動調整曲線路徑（你想飛起來不走尋常路也可以有），生硬的線性運動有個小哭臉表示不推薦。

比較常用的是默認（Default）（因為懶……），還有緩入（Ease In）、緩出（Ease Out）、緩入緩出（Ease Both)，如果你想讓動畫變得生動活潑，可以用彈性運動（Spring），彈性比較吸引人的注意力，對于想突出的元素會有不錯的效果。彈性和其他幾個曲線不同，不是調整曲線而是設置拉力（Tension）和摩擦力（Friction），彈力越大反彈效果越明顯。

Facebook emotions的彈性動效讓用戶更能聚焦在表情上

以上動畫均為本人練習作品，如有雷同純屬巧合，如有不足歡迎指教！

未完待續……