Principle也許是目前對(duì)設(shè)計(jì)師最友好的動(dòng)效軟件，它最大的優(yōu)點(diǎn)就是界面簡(jiǎn)單，左邊是屬性欄，中間是畫(huà)布，右邊是預(yù)覽窗口，讓你隨時(shí)預(yù)覽效果，及時(shí)作出調(diào)整；動(dòng)畫(huà)易用，無(wú)需代碼，只需點(diǎn)擊需要交互的畫(huà)布或圖層旁邊的小閃電，選擇觸發(fā)的動(dòng)作，拖動(dòng)連接到目標(biāo)畫(huà)布即可，還能直接Import Sketch文檔，麻麻再也不用擔(dān)心我不會(huì)做動(dòng)效了~~

經(jīng)過(guò)對(duì)Principle的初步使用，我發(fā)現(xiàn)其實(shí)巧用里面的“三板斧”，很多常見(jiàn)的交互動(dòng)效基本能夠?qū)崿F(xiàn)，大大減少了和產(chǎn)品、開(kāi)發(fā)溝通的時(shí)間。

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

很多交互動(dòng)效都是通過(guò)角度改變、大小縮放和透明度漸變來(lái)形成自然的視覺(jué)效果，比如常見(jiàn)的圓形進(jìn)度條和loading，就是通過(guò)有色圓環(huán)和白色遮罩層的旋轉(zhuǎn)位移來(lái)實(shí)現(xiàn)的。

豆瓣loading

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

還有Material Design里面經(jīng)典的觸控漣漪效果在Principle里面也非常容易實(shí)現(xiàn)，只需要在控件位置添加一個(gè)圓形圖層，設(shè)置觸發(fā)時(shí)比例由小變大，透明度漸變?yōu)?，畫(huà)面的視覺(jué)表達(dá)瞬間變得生動(dòng)很多。

Material Design觸控漣漪效果

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

前段時(shí)間做的一個(gè)Twitter like（煙花效果始終不滿意，求高手解救?。?/div>

2.動(dòng)畫(huà)曲線動(dòng)起來(lái)

Principle科學(xué)的地方在于預(yù)設(shè)的動(dòng)畫(huà)曲線都是符合物理運(yùn)動(dòng)規(guī)律的，而且可以手動(dòng)調(diào)整曲線路徑（你想飛起來(lái)不走尋常路也可以有），生硬的線性運(yùn)動(dòng)有個(gè)小哭臉表示不推薦。

比較常用的是默認(rèn)（Default）（因?yàn)閼小?，還有緩入（Ease In）、緩出（Ease Out）、緩入緩出（Ease Both)，如果你想讓動(dòng)畫(huà)變得生動(dòng)活潑，可以用彈性運(yùn)動(dòng)（Spring），彈性比較吸引人的注意力，對(duì)于想突出的元素會(huì)有不錯(cuò)的效果。彈性和其他幾個(gè)曲線不同，不是調(diào)整曲線而是設(shè)置拉力（Tension）和摩擦力（Friction），彈力越大反彈效果越明顯。

Facebook emotions的彈性動(dòng)效讓用戶更能聚焦在表情上

以上動(dòng)畫(huà)均為本人練習(xí)作品，如有雷同純屬巧合，如有不足歡迎指教！

未完待續(xù)……