Principle for Mac是一款新開發(fā)的交互設(shè)計軟件。相比 Pixate 更容易上手，界面類似 Sketch 等做圖軟件，思路有點(diǎn)像用 Keynote 做動畫，更「可視化」一些。如果您還沒有合適的或者喜歡的交互原型設(shè)計軟件，可以考慮一下這一款Principle for Mac！Macdown.com提供Mac版軟件下載！

Principle for Mac是一款新開發(fā)的交互設(shè)計軟件。相比 Pixate 更容易上手，界面類似 Sketch 等做圖軟件，思路有點(diǎn)像用 Keynote 做動畫，更「可視化」一些。如果您還沒有合適的或者喜歡的交互原型設(shè)計軟件，可以考慮一下這一款Principle for Mac！

此次小編就帶大家來了解下用Principle做卡片翻轉(zhuǎn)動效！

一、原理

首先講一下這個動效的原理，簡單來說就是：面變成線，線再變成面。先是正面，由面收縮成豎著的一條線，然后是背面，由豎著的一條線伸展成面。

如下圖：

連起來做成效給人的感覺就是翻轉(zhuǎn)了一下，如下圖：

二、具體步驟

1、第一步

Principle 可以直接導(dǎo)入 sketch 畫板，所以第一步在 sketch 里把素材準(zhǔn)備好，需要準(zhǔn)備的東西：2個正面卡片、2個反面卡片，分別裝在4個畫板中。如下圖所示：

然后打開 Principle -點(diǎn)擊左上角的導(dǎo)入按鈕-導(dǎo)入頁面，如下圖：

導(dǎo)入進(jìn)來后是這樣子的，如下圖：

2、第二步

找到頁面左下角的圖層區(qū)域，把名字全部改成一樣的。不同畫板中的元素，只有名字相同，才能形成補(bǔ)間動畫。如下圖：

我們前文說過原理，所以它的變化順序應(yīng)該是：面-線-線-面。所以要把畫板2、3 中的撲克牌，變成一條線，具體操作就是把他們的寬度變成1。

別忘了居中對齊一下，由于寬度變成1，所以畫板2和3在圖層區(qū)域已經(jīng)看不到東西了。如下圖：

3、第三步

點(diǎn)擊第一個畫板中的撲克牌，會出來一個“小閃電”按鈕，點(diǎn)擊它，在彈出的彈窗中選第一個“點(diǎn)擊”，長按拖到第二個畫板上。

然后點(diǎn)擊第二個畫板的黑色區(qū)域，整個畫板右邊，會出現(xiàn)一個“小閃電”標(biāo)志，這次在彈窗中選最后一個“自動”，也是長按它拖拽到第三個畫板上。

重復(fù)上一步操作，在第三個畫板處選擇“自動”-拖到第四個畫板上，大功告成。

4、小結(jié)

畫板1 到畫板2 選擇“點(diǎn)擊”，畫板2 到畫板3 再到畫板4，都選擇“自動”。然后頁面的右上角有預(yù)覽窗口，可以在里面通過點(diǎn)擊預(yù)覽做好的動效。如下圖：

5、導(dǎo)出

點(diǎn)擊預(yù)覽窗口的“攝像頭”圖標(biāo)，可以錄制視頻，然后可以導(dǎo)出視頻格式，也可以導(dǎo)出 GIF 格式。

三、細(xì)節(jié)

敲黑板，有沒有覺得這個動效看起來比較單調(diào)？其實(shí)我們可以給它增加一些變化，讓它看起來更有層次感。比如加上縮放和陰影的變化。具體操作如下：

1、陰影

為了讓動效有個陰影過渡的變化，每個畫板里的撲克牌都加上黑色遮罩，要和撲克牌的尺寸相對應(yīng)，該面的面，該線的線。然后遮罩的透明度依次是：畫板一0%、畫板二90%、畫板三90%、畫板四0%。別忘了名字要改成一模一樣，弄完以后是這樣的（添加矩形的方法和 sketch 一樣，如果是不規(guī)則圖形，也可以直接把做好的陰影圖片拖進(jìn) Principle）,如下圖：

2、縮放

加完陰影，再加縮放變化，具體操作是：選中畫板一、畫板二里的全部元素，把比例都改為0.8倍大小，如下圖：

然后去預(yù)覽里點(diǎn)擊看一下效果：

四、缺點(diǎn)

我們都知道，眼睛看到的事物都遵循著透視原理，即近處的事物看起來大，遠(yuǎn)處的事物會看起來小，這種方法的缺點(diǎn)就是沒有透視效果，失去了一些空間上的立體感。

五、總結(jié)

今天主要講的一件事是用 Principle 做卡片翻轉(zhuǎn)動效，有3點(diǎn)，名字一定要保持一致，才能形成補(bǔ)間動畫；添加陰影和縮放變化，能讓動效更有層次感；這個動效做起來比較簡單，但沒有透視效果。以上就是小編為大家?guī)淼腜rinciple教程：用Principle做卡片翻轉(zhuǎn)動效。還有更多詳細(xì)、實(shí)用的功能以及相關(guān)軟件Principle和其他Mac軟件獲取，大家快來Macdown.com自行探索一番吧。