Principle是一款小巧的交互軟件，是目前我在工作中用來(lái)制作demo（動(dòng)效）的主力軟件，由于其可以直接導(dǎo)入sketch當(dāng)前的畫布內(nèi)容，因此配合起Sketch來(lái)使用簡(jiǎn)直天衣無(wú)縫。
介紹的話就不多說(shuō)了，先說(shuō)說(shuō)Principle和我接觸過(guò)的其他交互軟件的區(qū)別。最早接觸的就是Axure，再后來(lái)?yè)Q了mac之后，就嘗試了Flinto、Pixate以及Principle。
Axure
在互聯(lián)網(wǎng)圈，除傳統(tǒng)的Office系列軟件之外，Ps和Axure的使用人數(shù)應(yīng)該也能排在前幾名的。而作為交互軟件始祖，Axure的功能全面，特別是在8之后，Axure已經(jīng)可以實(shí)現(xiàn)大部分基礎(chǔ)的動(dòng)效了。因?yàn)锳xure既可以畫圖，又可以編輯邏輯制作demo，如此全面的軟件都會(huì)有一個(gè)缺點(diǎn)：卡 and 復(fù)雜！
Flinto
Flinto最早只有網(wǎng)頁(yè)版，后面才出了mac版，其鏈?zhǔn)降闹谱鬟壿嬙诋?dāng)時(shí)來(lái)說(shuō)非常新穎，因此上手很快，學(xué)習(xí)成本也很低，但是怎么說(shuō)呢，反正我始終沒(méi)有愛(ài)上它。
Pixate
Pixate給我的感覺(jué)就像是瘦身后的Axure，重點(diǎn)放在移動(dòng)端，加強(qiáng)了動(dòng)效實(shí)現(xiàn)的效果，有雙系統(tǒng)版本，可惜現(xiàn)在已經(jīng)不更新了。
Principle
最愛(ài)的要放在最后說(shuō)，Principle給我的第一印象就是：這是不是Sketch團(tuán)隊(duì)做的？因?yàn)檫@兩個(gè)貨的界面是在太像了，而且其上手也是非常簡(jiǎn)單，并且支持桌面實(shí)時(shí)預(yù)覽和手機(jī)預(yù)覽，導(dǎo)出gif的功能也非常實(shí)用。
Principle制作demo的原理類似Flinto，采用的也是鏈?zhǔn)降闹谱鬟壿?，核心交互原理有兩個(gè)，一是Animate，另一個(gè)是Drivers。
什么是Animate？
Animate指的是不同畫板之間元素的交互，即畫板與畫板之間的交互。
上圖中兩個(gè)畫板間的圖層相同，只是圖層的屬性不同。
導(dǎo)入Principle中后，分別對(duì)黃色的按鈕編輯了交互動(dòng)作，使其被點(diǎn)擊時(shí)跳轉(zhuǎn)到另外一個(gè)畫板。
Principle的好處之一在于，其可以為同一個(gè)圖層在不同畫板之間的屬性變化自動(dòng)添加動(dòng)效變化，你所需要做的只是調(diào)整動(dòng)效的觸發(fā)時(shí)間（時(shí)間軸）以及動(dòng)畫效果（動(dòng)畫曲線），這一點(diǎn)和Keynote的神奇移動(dòng)效果有點(diǎn)類似。
目前Animate支持的屬性變化包括：xy軸位移、寬度高度變化、不透明度變化、填充顏色變化、圓角變化、描邊寬度變化、放大倍數(shù)變化、旋轉(zhuǎn)角度變化、陰影距離及漸變變化、旋轉(zhuǎn)角度變化。
什么是Driver？
Driver指的是同一畫板內(nèi)元素的交互，即畫板自身的交互。
例如上圖中，A按鈕有一個(gè)橫向拖拽的交互效果，同時(shí)我希望綠色的色塊能在A按鈕拖拽的過(guò)程中發(fā)成圖中1、2、3所示的狀態(tài)變化。
如gif所示，在Drivers中，當(dāng)當(dāng)前畫板存在可交互的元素時(shí)，其他元素（包括可交互的元素自身）都可以隨著交互元素的交互狀態(tài)變化產(chǎn)生屬性變化。
目前Drivers支持的屬性變化包括：xy軸位移、寬度高度變化、不透明度變化、圓角變化、描邊寬度變化、放大倍數(shù)變化、旋轉(zhuǎn)角度變化、陰影距離及漸變變化、旋轉(zhuǎn)角度變化。
通過(guò)Animate以及Drivers的相互配合，基本已經(jīng)可以實(shí)現(xiàn)大部分的動(dòng)效，看下Principle官網(wǎng)上給出的范例。
在Principle的官網(wǎng)上有教學(xué)視頻，個(gè)人覺(jué)得如果你真的認(rèn)認(rèn)真真邊看邊做搞定了那7個(gè)視頻，那基本已經(jīng)可以直接上手去做實(shí)際的項(xiàng)目了，不用再淘寶買其他的教學(xué)視頻，因?yàn)樗娴模汉芎?jiǎn)單。
這里放下我自己當(dāng)時(shí)看完后的筆記，以下內(nèi)容，建議你可以先收藏，看完視頻再來(lái)看，絕對(duì)對(duì)你有幫助。
1.Scrolling and Tabs
Learn how to make scrolling content and a tab bar
滑動(dòng)scroll
只能對(duì)單個(gè)對(duì)象進(jìn)行滑動(dòng)：圖層/組。
可以選擇橫向滑動(dòng)還是縱向滑動(dòng)。
滑動(dòng)有可視區(qū)域，類似axure的動(dòng)態(tài)面板顯示區(qū)域，可以通過(guò)勾選Clip Sublayers實(shí)現(xiàn)。
可視區(qū)域默認(rèn)大小是圖層/組的實(shí)際大小，需要縮小，因?yàn)橹挥锌s小后才有空間實(shí)現(xiàn)滑動(dòng)。
點(diǎn)擊跳轉(zhuǎn)
點(diǎn)擊對(duì)象后出現(xiàn)的閃電即可編輯動(dòng)作，點(diǎn)擊動(dòng)作后直接拖拽至目標(biāo)畫板。
大小位置旋轉(zhuǎn)等變化
在動(dòng)作目標(biāo)畫板上對(duì)對(duì)象進(jìn)行編輯，默認(rèn)出現(xiàn)對(duì)應(yīng)的動(dòng)效，如大小變化、旋轉(zhuǎn)、位移、顏色變化、圓角變化等。
需要注意?。?！
不同畫板之間的統(tǒng)一對(duì)象名稱需要一樣，否則會(huì)出現(xiàn)動(dòng)畫混亂
2.Import, Screen and Sharing
Learn about Sketch import, Frozen properties, screen to screen transitions and how to share your design with others.
導(dǎo)入import
可以從sketch里面導(dǎo)入當(dāng)前畫布的所有畫板。
sketch文件里面不能存在mask，否則整個(gè)畫板會(huì)變成一個(gè)圖層，解決方法是將mask與被遮住對(duì)象進(jìn)行編組。
拖拽drag
單個(gè)對(duì)象可以拖拽
如要實(shí)現(xiàn)‘按住拖拽松手還原’的效果，需要兩個(gè)一樣的畫布（圖層名稱需要一樣），通過(guò)drag begin/drag end實(shí)現(xiàn)，drag end路線中可以凍結(jié)對(duì)象Y軸位移實(shí)現(xiàn)‘水平還原’效果。
透明圖層
圖層屬性中，若opacity為0%時(shí)，圖層動(dòng)作是不可激活的。
若要圖層透明但動(dòng)作可被激活，可通調(diào)整圖層填充顏色fill的填充濃度a至0%即可。
轉(zhuǎn)場(chǎng)動(dòng)畫
通過(guò)在目標(biāo)畫板對(duì)圖層進(jìn)行編輯實(shí)現(xiàn)。
3.Paged Scrolling
Learn how to use paged scrolling to swipe between screens of a design and use drivers to make a position indicator. The video also has tips for using the preview window and keyboard shortcuts to make recording easier.
頁(yè)面輪播
頁(yè)面輪播需要將多個(gè)對(duì)象平均排開(kāi)進(jìn)行編組，選定page，并且選定好可視區(qū)域，如果要實(shí)現(xiàn)引導(dǎo)頁(yè)效果，可是區(qū)域?qū)挾刃枰c屏幕寬度一致。
引導(dǎo)頁(yè)dots點(diǎn)效果
需要通過(guò)drivers實(shí)現(xiàn)，選中所有圖層添加效果，在不同時(shí)間節(jié)點(diǎn)對(duì)圖層進(jìn)行編輯以實(shí)現(xiàn)效果變化。
4.Intro to Drivers
Learn how to use Principle's Driver feature to make a layer rotate during a drag.
drivers有點(diǎn)類似動(dòng)畫時(shí)間軸
首先需要添加屬性變化項(xiàng)，再在不同的時(shí)節(jié)點(diǎn)對(duì)對(duì)象的屬性進(jìn)行編輯。
時(shí)間軸需要當(dāng)前頁(yè)面存在可交互的對(duì)象，才能在時(shí)間的維度上產(chǎn)生屬性變化。
可以只有一個(gè)可交互的對(duì)象，其余對(duì)象不一定要編進(jìn)該對(duì)象的組內(nèi)。
5.Working with Images
Best practices for working with images in Principle, including Import, Retina assets, dragging from Sketch, updating multiple layers' assets, and cropping.
圖片導(dǎo)入
可以對(duì)圖片的后綴名增加@2x、@3x，拖入principle后直接按倍數(shù)縮小。
可以復(fù)選不同畫板內(nèi)的同一圖層一起更改圖片。
可以從sketch里面直接把圖層/組拖進(jìn)principle，拖入時(shí)可以在sketch里面選擇導(dǎo)出的倍數(shù)@2x、@3x。
蒙版
priciple也可以實(shí)現(xiàn)類似蒙版的效果，將單一圖片圖層進(jìn)行編組，然后勾選Clip Sublayers，選擇可視區(qū)域大小。
6.Watch Alert
Use Long Press and Auto events to make an Apple Watch alert interaction.
可以將一個(gè)圖層拖拽至另一個(gè)圖層上，將其變成子圖層，母層通過(guò)Clip Sublayers可以實(shí)現(xiàn)蒙版效果。
子圖層內(nèi)可以繼續(xù)嵌套子圖層。
由于上傳圖片大小限制，很多制作的demo都無(wú)法上傳，這里只能上傳一張之前做過(guò)的底部導(dǎo)航的動(dòng)效demo，還是裁剪過(guò)的。
想說(shuō)明的是，不管是頁(yè)面場(chǎng)景切換，還是微動(dòng)效，只要不涉及到特別復(fù)雜的形變（比如線條的抖動(dòng)和扭曲），Principle都能很好的實(shí)現(xiàn)你的想法和目標(biāo)。
非常感謝您的閱讀，您的支持是我最大的動(dòng)力
