Principle

Principle是一款小巧的交互軟件敢伸，是目前我在工作中用來制作demo（動(dòng)效）的主力軟件盆赤，由于其可以直接導(dǎo)入sketch當(dāng)前的畫布內(nèi)容捧搞，因此配合起Sketch來使用簡直天衣無縫察净。

介紹的話就不多說了钦购，先說說Principle和我接觸過的其他交互軟件的區(qū)別。最早接觸的就是Axure都许，再后來換了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)頁版灿椅，后面才出了mac版套蒂，其鏈?zhǔn)降闹谱鬟壿嬙诋?dāng)時(shí)來說非常新穎，因此上手很快茫蛹，學(xué)習(xí)成本也很低操刀，但是怎么說呢，反正我始終沒有愛上它婴洼。

Pixate

Pixate給我的感覺就像是瘦身后的Axure骨坑，重點(diǎn)放在移動(dòng)端，加強(qiáng)了動(dòng)效實(shí)現(xiàn)的效果柬采，有雙系統(tǒng)版本欢唾，可惜現(xiàn)在已經(jīng)不更新了。

Principle

最愛的要放在最后說粉捻，Principle給我的第一印象就是：這是不是Sketch團(tuán)隊(duì)做的匈辱？因?yàn)檫@兩個(gè)貨的界面是在太像了，而且其上手也是非常簡單杀迹，并且支持桌面實(shí)時(shí)預(yù)覽和手機(jī)預(yù)覽亡脸，導(dǎo)出gif的功能也非常實(shí)用押搪。

Principle制作demo的原理類似Flinto，采用的也是鏈?zhǔn)降闹谱鬟壿嬊衬耄诵慕换ピ碛袃蓚€(gè)大州，一是Animate，另一個(gè)是Drivers垂谢。

什么是Animate厦画？

Animate指的是不同畫板之間元素的交互，即畫板與畫板之間的交互滥朱。

sketch中的圖層分布

上圖中兩個(gè)畫板間的圖層相同根暑，只是圖層的屬性不同。

導(dǎo)入Principle中后徙邻，分別對(duì)黃色的按鈕編輯了交互動(dòng)作排嫌，使其被點(diǎn)擊時(shí)跳轉(zhuǎn)到另外一個(gè)畫板。

demo

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)元素的交互简肴，即畫板自身的交互晃听。

sketch中圖層分布

例如上圖中，A按鈕有一個(gè)橫向拖拽的交互效果砰识，同時(shí)我希望綠色的色塊能在A按鈕拖拽的過程中發(fā)成圖中1能扒、2、3所示的狀態(tài)變化辫狼。

demo

如gif所示初斑，在Drivers中，當(dāng)當(dāng)前畫板存在可交互的元素時(shí)膨处，其他元素（包括可交互的元素自身）都可以隨著交互元素的交互狀態(tài)變化產(chǎn)生屬性變化见秤。

目前Drivers支持的屬性變化包括：xy軸位移砂竖、寬度高度變化、不透明度變化鹃答、圓角變化乎澄、描邊寬度變化、放大倍數(shù)變化测摔、旋轉(zhuǎn)角度變化置济、陰影距離及漸變變化、旋轉(zhuǎn)角度變化锋八。

通過Animate以及Drivers的相互配合浙于，基本已經(jīng)可以實(shí)現(xiàn)大部分的動(dòng)效，看下Principle官網(wǎng)上給出的范例挟纱。

官網(wǎng)示例-flyoutmenu

官網(wǎng)示例-flow

官網(wǎng)示例-choice

在Principle的官網(wǎng)上有教學(xué)視頻羞酗，個(gè)人覺得如果你真的認(rèn)認(rèn)真真邊看邊做搞定了那7個(gè)視頻，那基本已經(jīng)可以直接上手去做實(shí)際的項(xiàng)目了樊销，不用再淘寶買其他的教學(xué)視頻整慎，因?yàn)樗娴模汉芎唵巍?/p>

So easy!

Principle官方教學(xué)視頻

這里放下我自己當(dāng)時(shí)看完后的筆記脏款，以下內(nè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ū)域，可以通過勾選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è)一樣的畫布（圖層名稱需要一樣）捆交，通過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)場動(dòng)畫

通過在目標(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.

頁面輪播

頁面輪播需要將多個(gè)對(duì)象平均排開進(jìn)行編組泞莉，選定page哪雕，并且選定好可視區(qū)域，如果要實(shí)現(xiàn)引導(dǎo)頁效果鲫趁，可是區(qū)域?qū)挾刃枰c屏幕寬度一致斯嚎。

引導(dǎo)頁dots點(diǎn)效果

需要通過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)前頁面存在可交互的對(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è)圖層上霎挟，將其變成子圖層窝剖，母層通過Clip Sublayers可以實(shí)現(xiàn)蒙版效果。

子圖層內(nèi)可以繼續(xù)嵌套子圖層酥夭。

navi_bar

由于上傳圖片大小限制赐纱，很多制作的demo都無法上傳，這里只能上傳一張之前做過的底部導(dǎo)航的動(dòng)效demo熬北，還是裁剪過的疙描。

想說明的是，不管是頁面場景切換讶隐，還是微動(dòng)效起胰，只要不涉及到特別復(fù)雜的形變（比如線條的抖動(dòng)和扭曲），Principle都能很好的實(shí)現(xiàn)你的想法和目標(biāo)巫延。

非常感謝您的閱讀效五，您的支持是我最大的動(dòng)力