Principle Mac版是一款可以在蘋果電腦MAC OS平臺上使用的交互設計工具，五分鐘即可制作出一個具有完整交互動畫的原型，并且可將交互動畫生成視頻或者 Gif 分享到 Dribbble、Twitter 等社交平臺。此外 Principle 還支持多種尺寸的原型設計，包括 Apple Watch。需要此款工具的朋友們可以前來下載使用。

　　你的動畫交互想法，比如設計更好的移動APP交互效果成為現(xiàn)實，用Principle輕松幫你實現(xiàn)。Principle的原則使得它易于創(chuàng)建動畫和交互式的用戶界面設計。

　　Principle是一款新開發(fā)的交互設計軟件。相比 Pixate 更容易上手，界面類似 Sketch 等做圖軟件，思路有點像用 Keynote 做動畫，更「可視化」一些。發(fā)現(xiàn)目前還不能做條件相關的交互，例如「當 A 的 Scroll Release 位置大于某值時跳到下頁」。作者目前在對軟件進行升級開發(fā)，值得嘗試和繼續(xù)關注。

使用principle制作簡單的Toast動畫

軟件打開后，有一個300*300的Artboard在界面中，使用過Illustrator和Sketch的人應該理解。這是一個畫板的概念，我們設計的各種元素都應該在這個畫板上。工具欄也沒幾個按鍵，剛一開始的話，不容易被理解。即使對于有AE基礎的人來說，開始也要先了解Principle的動畫制作邏輯的。我們一步一步地講并配以截圖，第一節(jié)講得詳細一點，力求打好基礎～

初次打開Principle

第一步

選中某元素，在界面的左側(cè)是該元素的屬性欄。首先把Artboard的大小設成常規(guī)的手機屏幕大小“750*1334”。接著，我們點擊左上角的“Rectangle”，頁面中會新建一個方塊，我們再點一下“Text”，然后屏幕中又出現(xiàn)一個方塊和兩個單詞。

第二步

在左側(cè)屬性欄可以修改方塊大小(當然也可以拉方塊邊緣改變方塊大小)。鼠標選中文字，左側(cè)邊欄可以修改文字的屬性，雙擊文字可以修改文字內(nèi)容。如下圖：

屬性欄↓

第三步

現(xiàn)在來到了我們關鍵的一步：怎么出現(xiàn)動畫效果。

選中Artboard1，它周圍出現(xiàn)綠色的框，右側(cè)出現(xiàn)一個??閃電圖標，這個就是動作觸發(fā)的條件編輯入口。

我們點擊這個閃電，出現(xiàn)一個菜單，這些就是動作觸發(fā)的條件們。

后面會對這個動作觸發(fā)條件做詳細的講解。

重點來了!我們選中“Tap”并拖動，發(fā)現(xiàn)一個藍色的箭頭，將箭頭指向Artboard1并松開鼠標。然后如圖，工作區(qū)又新增了一個畫板，自動命名為Artboard2：

然后，我們將Artboard2上的toast(方塊和文字)向下拖動一段距離，使其和Artboard1上的toast有位置變化，如圖 ：

這個時候，我們的設計就會動了!

查看動畫方法：鼠標選回第一個畫板，右側(cè)的動效預覽窗口會回到初始狀態(tài)，在預覽窗口中，鼠標點擊一下(即我們剛剛選擇的Tap觸發(fā)條件)，就看到toast動起來了。動效如下：

我們也可以數(shù)據(jù)線接到手機上，打開裝的Principle mirror查看動效。

通過上面這個toast的動效例子，我們可以理解Principle的動畫原理。如圖：

其中1，2，3步我們已經(jīng)做到了，第4步并不是必須的。下一節(jié)我們會針對動畫的形成邏輯有更深入的講解。

1. Sketch文件的導入

首先，先把要把畫好的Sketch文件打開;

再打開Principle，點File – Import From Sketch ，這里會直接顯示你剛打開的Sketch文件名.

根據(jù)你的Sketch文件的大小選擇 放大的倍數(shù)(例如：如果你畫的是375*667的就選擇2X，750的就選擇1X)不選也可以，但是可能導出的畫質(zhì)不清晰.

這樣就導入成功了，會了這個功能就可以將之前設計的sketch文件做動畫了，Sketch強大的繪圖功能 Principle的動畫制作，完美!

2. 補間動畫邏輯

談到補間動畫我們要先說逐幀動畫，逐幀動畫是最原始的動畫，就是很多連續(xù)的圖片排成序列，一張一張的播放，形成的“動畫”效果.

補間動畫是逐幀動畫的升級版，不需要我們準備大量的圖片形成的圖片序列，只要做一些關鍵畫面(一般被叫做關鍵幀)即可，系統(tǒng)識別關鍵幀之間的差異，幫助我們補齊關鍵幀之間的畫面，形成動畫.

Principle的動畫制作邏輯是：每個畫板就是關鍵幀

舉例：

左圖畫板1即關鍵幀1，右圖畫板2即關鍵幀2，關鍵幀1中的方塊在左邊，關鍵幀2的方塊在右邊，我們添加補間動畫的話，按照補間動畫的邏輯，系統(tǒng)應該補足方塊從左到右移動的所有的畫面.

添加補間的方法：點擊畫板1旁邊的閃電按鈕，選擇觸發(fā)條件Tap拖到畫板2上，補間動畫就做好了.如下：

最簡單的補間動畫就完成了.

所以我們暫且把Principle的畫板理解成關鍵幀.

透明度動畫

我們接著上次的Toast動畫做，我們把文字和底色框選，按command G成組，調(diào)節(jié)這個組的Opacity(透明度)屬性到“0%”，如圖：

ok啦!我們原本的移動吐司效果增加了透明度動畫效果，動畫如下：

是不是很像現(xiàn)在主流toast的感覺了?～

更新日志

v6.11

分享到網(wǎng)絡

支持在 Android、Windows、Linux、macOS 和 iOS 上查看共享原型

共享原型包括字體信息，因此字體總是看起來正確

導入說明 - 了解為什么在導入時會展平圖層

導出交互式頁面 - 獲取您設計的獨立 HTML 文件，用于托管在您自己的服務器上或發(fā)送給其他人

新的導出菜單：共享到 Web、導出交互式頁面、圖像、錄制視頻、錄制 Gif

更新了屬性檢查器 UI

添加了“設置為主頁畫板”按鈕以輕松更改原型開始的位置

添加在編輯器中每個畫板上方的畫板名稱

刷新了所有圖標

v6.9

更快地導出具有多個視頻的原型的視頻

將“導出Mac App”重新添加到“文件”->“導出”菜單中

導出的交互式頁面的各種性能和錯誤修復

v6.8

修復導出的GIF中的故障顏色

gif導出的更多性能改進

v6.7

加快視頻導出

加速gif導出

v6.5

將所有導出選項添加到文件->導出菜單

修復視頻和GIF導出已中斷的圖層

修復視頻和GIF導出不應該被填充的問題

v6.4

現(xiàn)在，畫板名稱顯示在編輯器中每個畫板的上方

將“導出為HTML”重命名為“導出獨立查看器”

添加警報，使您知道倒帶原型時錄制已停止

修復了導致視頻導出中有時缺少圖層的錯誤

獨立查看器的許多錯誤和性能修復

v6.3

增加了“共享到網(wǎng)絡”和“導出到HTML”的視頻比特率

修復了帶有自動事件的固定組件，這些組件在不應該共享到Web時會受到影響

共享到Web中的固定單關鍵幀驅(qū)動程序

修復了“共享到網(wǎng)絡”中的視頻停頓

修復了編輯文本圖層文本時的撤消

修復了有時在共享到Web中某些字符字體不正確的問題

修復了當工具欄不足以容納所有項目時導致的崩潰

v6.2

添加了“設置為家用畫板”按鈕，可以輕松更改原型的開始位置

修復了導致視頻圖層有時導出旋轉(zhuǎn)的錯誤

固定的原理文件大小即使刪除組件后也不會變小

更改視頻層的視頻文件不再更改其播放/暫?；騼鼋Y(jié)的媒體時間狀態(tài)