Principle for Mac是一款新開發的交互設計軟件。相比 Pixate 更容易上手，界面類似 Sketch 等做圖軟件，思路有點像用 Keynote 做動畫，更「可視化」一些。如果您還沒有合適的或者喜歡的交互原型設計軟件，可以考慮一下這一款Principle for Mac！
此次小編來帶大家看看，Principle是如何做“卡片滑動”和“按鈕點擊”變化的效果，Macdown.com提供軟件獲取。
界面設計
我這裏使用了iPhone x的設計尺寸（375x812），爲了後面能更好的按照流程走，最好都是用375x812設計尺寸，因爲後面製作動效會使用到一些參數。界面設計如圖下所示。
明確交互
根據界面設計，這裏要實現的交互動效是#主題卡片滑動背景色隨主題色變# #滾動條隨卡片變化# #點擊右下按鈕展開信息#，這就是我們待會要在principle實現的動效。
圖層整理
1、根據要實現的交互動效，把所有頁面內容整理在一個畫板裏（命名頁面1），滑動卡片圖層分別按卡片1/卡片2/卡3命名好。
2、滾動條就按點1/點2/點3命名好
3、點擊按鈕展開的信息先隱藏，展開信息放置左邊每個圖層元素不透明度爲百分之0
打開Principle
1、導入剛剛整理好的頁面1，導入sketch裏選中的畫版（頁面1）
2、把卡片1/卡片2/卡片3放置新建文件夾命名滑動， 將卡片2/卡片3向x軸移動375/750個單位，移動後把卡片2/卡片3背景圖層去掉，卡片1背景放置滑動圖層底部。
3、按圖中指示操作，設置完後，就可以預覽一下效果了，但是背景色還不會變，請繼續往下看吧。
4、選中背景圖層，在聯動窗口設置填充，然後移動時間軸設置卡片2/卡片3關鍵幀，再次預覽效果背景就有了變化了。
5、設置滾動點，現在把點2/點3滾動點刪除，把點1滾動點複製兩個命名爲點2/點3，移動到合適位置
選中點1/點2/點3圖層，在聯動窗口設置縮放和不透明度（scale/opacity），當前點1參數(scale 1/opacity 100%)，那麼點2/點3 就是0.6和50%，點的縮放不透明度隨時間軸變化設置
6、現在要點擊右下方按鈕展開功能，所以把頁面1再複製一個命名爲頁面2，頁面2把之前隱藏的展開信息顯示出來(不透明度爲100%)
然後將展開信息按設計效果圖調整位置
下面做點擊按鈕切換狀態，選中按鈕圖層，點擊閃電圖標選擇tap(點擊)將箭頭指向頁面2，同樣的在頁面2點擊關閉將箭頭指向頁面1，頁面2按鈕圖層記得隱藏（不透明度0%）不然就跟關閉按鈕重疊了。
好了到這裏就已經完成了，趕緊預覽一下效果吧！
以上就是小編爲大家帶來的Principle實例教程：如何製作“卡片滑動”和“按鈕點擊”變化的效果。