Principle實例教程：如何製做「卡片滑動」和「按鈕點擊」變化的效果

Principle for Mac是一款新開發的交互設計軟件。相比 Pixate 更容易上手，界面相似 Sketch 等作圖軟件，思路有點像用 Keynote 作動畫，更「可視化」一些。若是您尚未合適的或者喜歡的交互原型設計軟件，能夠考慮一下這一款Principle for Mac！

這次小編來帶你們看看，Principle是如何作「卡片滑動」和「按鈕點擊」變化的效果，Macdown.com提供軟件獲取。

界面設計

我這裏使用了iPhone x的設計尺寸（375x812），爲了後面能更好的按照流程走，最好都是用375x812設計尺寸，由於後面製做動效會使用到一些參數。界面設計如圖下所示。

明確交互

根據界面設計，這裏要實現的交互動效是#主題卡片滑動背景色隨主題色變# #滾動條隨卡片變化# #點擊右下按鈕展開信息#，這就是咱們待會要在principle實現的動效。

圖層整理

一、根據要實現的交互動效，把全部頁面內容整理在一個畫板裏（命名頁面1），滑動卡片圖層分別按卡片1/卡片2/卡3命名好。

二、滾動條就按點1/點2/點3命名好

三、點擊按鈕展開的信息先隱藏，展開信息放置左邊每一個圖層元素不透明度爲百分之0

打開Principle

一、導入剛剛整理好的頁面1，導入sketch裏選中的畫版（頁面1）

二、把卡片1/卡片2/卡片3放置新建文件夾命名滑動， 將卡片2/卡片3向x軸移動375/750個單位，移動後把卡片2/卡片3背景圖層去掉，卡片1背景放置滑動圖層底部。

三、按圖中指示操做，設置完後，就能夠預覽一下效果了，可是背景色還不會變，請繼續往下看吧。

四、選中背景圖層，在聯動窗口設置填充，而後移動時間軸設置卡片2/卡片3關鍵幀，再次預覽效果背景就有了變化了。

五、設置滾動點，如今把點2/點3滾動點刪除，把點1滾動點複製兩個命名爲點2/點3，移動到合適位置

選中點1/點2/點3圖層，在聯動窗口設置縮放和不透明度（scale/opacity），當前點1參數(scale 1/opacity 100%)，那麼點2/點3 就是0.6和50%，點的縮放不透明度隨時間軸變化設置

六、如今要點擊右下方按鈕展開功能，因此把頁面1再複製一個命名爲頁面2，頁面2把以前隱藏的展開信息顯示出來(不透明度爲100%)

而後將展開信息按設計效果圖調整位置

下面作點擊按鈕切換狀態，選中按鈕圖層，點擊閃電圖標選擇tap(點擊)將箭頭指向頁面2，一樣的在頁面2點擊關閉將箭頭指向頁面1，頁面2按鈕圖層記得隱藏（不透明度0%）否則就跟關閉按鈕重疊了。

好了到這裏就已經完成了，趕忙預覽一下效果吧！

以上就是小編爲你們帶來的Principle實例教程：如何製做「卡片滑動」和「按鈕點擊」變化的效果。