當前踪古，設計行業(yè)存在多種設計軟件含长，在互聯(lián)網(wǎng)產品設計領域，Sketch已經取代了PS成為主流的視覺設計軟件伏穆，并有逐漸取代Axure來進行交互設計的趨勢拘泞。然而，相對于交互原型工具Axure而言枕扫，sketch不支持交互動效設計陪腌，同時，導出的HTML文件的排序需要人為干預烟瞧，不能自動體現(xiàn)頁面的邏輯關系诗鸭。因此，很多銜接sketch的軟件完成動效設計的軟件應運而生参滴，包括Flinto强岸、Principle。其中砾赔，Principle+Sketch被稱為UI設計的黃金搭檔蝌箍。
相較于Flinto青灼，Principle強大的動效預置，可以極大的減少動效設計的時間妓盲，并能完成出較為優(yōu)質的動效設計杂拨。在效率為王的互聯(lián)網(wǎng)產品時代，Principle確實是一款適合交互設計師使用的動效軟件悯衬。
下面弹沽，我們就詳細了解一下principle。
主要功能
目前版本的Principle筋粗，就動效設計功能方面策橘，相較于Axure、AE而言娜亿，要簡單很多役纹。它是一款主要用來銜接交互原型與動態(tài)效果呈現(xiàn)的動效制作軟件，其功能可分為五大類暇唾，分別是基礎功能、Create Component（組件）辰斋、Animate（時間軸）策州、Drivers（聯(lián)動）以及頁面動效。
基礎功能
基礎功能包括矩形宫仗、文字工具够挂，導入功能，群組藕夫、Mirror孽糖、上/下一層。目前自定義工具僅支持矩形（快捷鍵R）和文字工具（快捷鍵T）毅贮，因此在制作頁面動效時办悟，需要從sketch中導入或copy頁面元素，來完成頁面動效滩褥。在矩形工具的基礎上病蛉，可以延伸出正方形、圓型瑰煎、圓角矩形铺然。
導入功能是銜接sketch的主要接口，每次只能導入已打開sketch文件的一個page頁面中的元素酒甸。在導入sketch文件時魄健，比較省事的做法是，在文件中新建一個page插勤，作為導入素材的入口沽瘦，同時革骨，page可以重復導入，最新導入的頁面（不同頁面元素）會放到最后其垄。Principle中的畫板大小與最后一次的畫板大小保持一致苛蒲，因此導入的畫板也要保持一致。
群組绿满、上/下一層的功能操作與sketch一致臂外。Mirror是用來在制作手機應用時，在手機端進行預覽操作的功能喇颁，目前只支持Apple的產品連接漏健。
組件
組件（Create?Component）與Axure中的元件庫、sketch中的symbol類似橘霎，可以包含動效蔫浆，支持在不同principle文件中進行復制、粘貼姐叁。這是一個實用的功能瓦盛，如《動效設計-交互設計的最后一公里（一）》中的菜單動效、加載動效等外潜，就可以制作成組件原环，在其他項目中可以作為動效控件加以應用，直接復制处窥、粘貼即可嘱吗。由此，可以推演提煉出動效設計控件滔驾，在版本迭代中可以在動效方面保持產品氣質的延續(xù)性谒麦。
時間軸
時間軸（Animate）是對AE時間軸的一種簡化，不能進行K幀(此處有疑問者哆致，請參考本系列文章《動效設計-交互設計的最后一公里（一）》）绕德，只能控制某一動效在時間維度上的起止位置以及持續(xù)時間。另外摊阀，元素的運動形式也可以在時間軸上進行設置調整迁匠，包括：默認、緩入驹溃、緩出城丧、緩動、彈性豌鹤、線性亡哄、無等七種運動形式，同時可以對前五種進行曲線調節(jié)布疙。
聯(lián)動
聯(lián)動（Drivices）是對時間軸功能的補充與擴展蚊惯。Principle主要應用于制作移動端產品的交互愿卸、動效設計，相較于web頁面截型，移動端設備主要是觸屏操作趴荸，包括點擊、拖動宦焦、滑動等发钝，這些元素之間的關系是位置上的聯(lián)動關系，而不是時間上的波闹。
頁面動效
頁面動效包括靜態(tài)酝豪、拖拽、滾動精堕、翻頁四類孵淘。嚴格意義，頁面動效并不是獨立的功能歹篓，需要配合Drivices來使用瘫证。因此，在確定了滾動庄撮、拖拽痛悯、翻頁以后，選擇一個觸發(fā)操作元素重窟，在Drivices中，對其在不同位置的節(jié)點處K關鍵幀惧财，同時巡扇，將聯(lián)動元素在不同節(jié)點處的變化進行調整，進而形成位置關系上的聯(lián)動垮衷。
優(yōu)勢
相較于其他工具厅翔，Principle的優(yōu)勢還是比較明顯〔笸唬基于其優(yōu)勢刀闷，Principle在合適的動效設計上效率非常高，同時動效的質量也比較高仰迁。整體來說甸昏，Principle的優(yōu)勢如下：
1、擁有sketch的頁面布局
猶如PS/AI與AE之間的關系徐许，Principle與sketch之間存在著很多相似之處施蜜，包括頁面布局及風格、快捷鍵等雌隅，很好的讓交互設計與動效設計進行銜接翻默，減少了動效工具的學習成本缸沃。sketch文件的導入可以實時進行，此時的sketch文件猶如動效設計階段的組件修械，在動效設計過程中趾牧，需要哪一個頁面，就可以將頁面單獨導入肯污，減少了頁面的復雜度翘单。
2、補間動畫
源于Flash的補間動畫幾乎是所有動效工具的特點仇箱，也是保持動效流暢的主要環(huán)節(jié)县恕。相較于其他工具的補間動畫，Principle的補間動畫是預設的剂桥，并且經過實際的實驗驗證忠烛，可以直接使用。如上文中所描述权逗，principle的效果預設是隱藏在動效的時間軸上美尸，在設置動效持續(xù)時長的同時，調整其運動樣式與效果斟薇。另外师坎，補間動畫的形式與節(jié)奏會自動統(tǒng)一到整個動效設計中，即新建的動效預設與上一次的預設保持一致堪滨。
如上圖胯陋，制作出動畫的起點與終點畫面，在兩個畫面之間制動生成補間動畫袱箱，通過調整補間動畫的運動形態(tài)與樣式遏乔，完成動效的制作。
3发笔、Keynote的神奇移動效果
熟悉keynote的小伙伴應該知道盟萨，其最大的亮點就是神奇移動。在Principle中了讨，元素的運動變化原則與Keynote一致捻激，即若兩個畫板中兩個元素的命名一樣，在畫板切換過程中前计，則默認該元素從畫板一的樣式漸變到畫板二的狀態(tài)胞谭，包括顏色、位置男杈、透明度韭赘、形狀等，但前提是該元素是可編輯的势就，而不是圖片泉瞻。這種神奇移動的效果保證了動效的連續(xù)性與流暢性脉漏。
對于變化的形式、速率以及時機可以在Animate中進行調節(jié)袖牙。
4侧巨、簡易方便的Animate
Animate是用來控制補間動畫的節(jié)奏、形式鞭达、時間以及時機等司忱，其控制較為粗糙，不如AE的時間細致畴蹭。在神奇移動的案例中坦仍，元素的變化有長、高叨襟、旋轉繁扎、透明度四種，在Animate中可以控制每種變化的開始時間（錯幀）以及持續(xù)的時長糊闽，來控制動效效果梳玫。同時，其動效形式的預設與比較符合用戶的心理預期右犹，在動效節(jié)奏的調整上可以節(jié)省較多的時間提澎。
5、類似Origami的事件管道拖拽
類似Origami的事件管道拖拽該功能指的就是Drivice念链，這也是Principle在移動端產品設計中的優(yōu)勢所在盼忌。Animate是時間與元素變化效果之間的映射關系，那么掂墓，Drivices就是一個元素的坐標位置與其他元素變化效果的映射關系谦纱。這個面板在拖動等的操作中應用的極為廣泛，可以逼真的模擬觸控操作中的位置映射關系梆暮。
在示例中，設置的滑塊位置與矩形形狀圓角大小绍昂、旋轉的映射啦粹，實現(xiàn)滑動調節(jié)圓角大小與旋轉的效果。
劣勢
一個工具的優(yōu)勢較為明顯窘游，往往其缺點（限制）也較為突出唠椭，Principle也是一樣。根據(jù)作者多個項目的時間經驗忍饰，發(fā)現(xiàn)了以下較為突出的缺點：
1贪嫂、Principle不太適合整體產品的動效設計。Principle的畫板是橫向順序排列艾蓝，用戶不能自定義其位置力崇，因此其畫板數(shù)量不易過多斗塘，否則頁面管理將會使人崩潰。Principle比較適合核心功能亮靴、局部頁面或頁面細節(jié)動動效設計馍盟。
2、動效預設質量比較高茧吊，但自定義形式較弱贞岭。Principle的動效變化形式，包括顏色搓侄、大小瞄桨、位置、透明度讶踪、形變（極少）等芯侥，這就限制了設計師對動效的修改與再創(chuàng)作。因此俊柔，Principle比較適合做轉場類筹麸、入場類以及引導類動效，但是對于牽涉到復雜形變雏婶、效果的品牌與反饋類動效物赶，就是Principle所鞭長莫及的了。
3留晚、對于Sketch導入的元素酵紫，有些是不能編輯的，包括文字错维、symbol以及有些群組奖地。這就導致在這些元素的動效變化時，就需要在Principle中重新制作赋焕。
4参歹、Principle中每一個畫板相當于一個一個關鍵幀，對于已經完成的動效設計隆判，在過程中新增關鍵幀（畫板）會比較繁瑣犬庇，需要刪除兩個關鍵幀之間的動效鏈接，然后新增一個畫板侨嘀，最后將新增畫板與前后的畫板進行鏈接臭挽，形成新的動效。這也是在Principle比較適合順序K幀的原因咬腕。
5欢峰、Principle效果文件的導出僅支持GIF與mov格式的導出。其導出是對操作的錄制，因此纽帖，對自動類型動畫的錄制開始的時機較難把握宠漩，如果有必要需要其他軟件進行剪切編輯。
技巧與特點
Principle的動效制作原理與AE不同抛计，因此哄孤，其特點與應用技巧也略有差異。在長時間使用Principle以后吹截，對于一些功能的特殊使用方式也有一些心得：
1瘦陈、Principle動效中，元素屬性的變化是通過不同屬性節(jié)點之間形成補間動畫形成的波俄，Principle識別不同畫板之間的元素是通過名稱的一致性晨逝。名稱一致，則該元素在兩個畫板之間會順暢的形成補間動畫（是可編輯元素）懦铺，因此若下個頁面中要出現(xiàn)某個元素捉貌，至少在上一個頁面要存在該元素，否則就會違背動效設計的原則（有始有終冬念、三不）趁窃。
2、Principle中每一個畫板就是一個最小單位的節(jié)點關鍵幀急前，在制作動效時醒陆，將連接動效指向主畫板（或自己），復制出新的畫板裆针，然后在新畫板上進行動效元素的變化調整刨摩。這樣可以保證每個畫板中的元素名稱保持一致。
3世吨、不要將sketch中的整個Page頁面的畫板一起導入Principle澡刹，這樣畫板的管理會造成極大的困擾。本人的做法是在sketch中新建一個頁面耘婚，作為專門進行導入的入口罢浇，同時頁面中的畫板不易過多，最好有一個主頁面沐祷，其他頁面作為備用素材使用嚷闭。
4、對于透明的元素戈轿，Principle是不能作為動效鏈接的元素凌受，因此在制作觸控熱區(qū)時不能將透明度降為零阵子，可保持1% 的不透明度思杯。但是，即使元素的透明度為零且不能作為鏈接元素，被該元素完全覆蓋的其他元素也是不能作為鏈接元素色乾，這時可以選中該元素誊册，勾選touchable，就可以被點擊到暖璧。
5案怯、Principle中的旋轉是以元素的物理中心為圓心進行旋轉的。若要制作元素圍繞一個點進行旋轉時澎办，可以以該點作為中心對稱的點建一個同樣的元素嘲碱，并將二者進行群組，將其中一個的透明度改為零局蚀，這樣群組的中心點就在旋轉中心了麦锯。
6、principle中的群組是單獨一個元素琅绅，其大小是可以自定義的扶欣，不是由群組的元素大小所確定的，并且群組可以作為一個元素進行鏈接對象制作動效千扶。因此料祠，在這種特性下，可以將群組作為熱區(qū)使用或用來調整元素的旋轉中心等澎羞。
其特點不止于此髓绽，有很多技巧等待你去發(fā)掘……
到目前為止，作者已經完成了若干線性加載動效控件的制作煤痕，如下圖梧宫。
我們以其中一個案例的制作，結束本次對Principle的探討摆碉。
示例講解
第一步：新建直徑分別為9塘匣、7、5巷帝、3忌卤、1的圓形，圓形的直徑要是連續(xù)的奇數(shù)或偶數(shù)楞泼，保證圓形能夠絕對的居中對齊驰徊。
第二步：將每個圓單獨群組，并調整其群組的高度堕阔，分別為54棍厂、52、50超陆、48牺弹、46浦马，并將其進行居中對齊。上文中已經提起张漂，群組的中心可以作為整體旋轉中心晶默，因此，最大的群組高度就是最終動效的直徑航攒。選擇所有群組磺陡，將其左右居中對齊，
第三步：選中畫板漠畜，點擊右側出現(xiàn)的小閃電圖標币他，選擇最后一個指向畫板1，產生一個新的畫板憔狞，并選中畫板2中的所有群組圆丹，修改旋轉角度為360°。
第四步：在Animate中修改每個動效條的長度為1s躯喇，根據(jù)半徑辫封，從大到小，以此錯幀（0.2s）廉丽。動效條的長度決定了一個元素旋轉一周的時長倦微。錯幀可以實現(xiàn)元素的跟隨效果，錯幀的時長控制了兩兩元素在運動過程中的距離正压，同時還受到整體時長的影響欣福。
第五步：按照第三步的方式，以第二個畫板為基礎焦履，產生第三個畫板拓劝，并將第三個畫板中的其他元素全部刪除，只保留半徑最大的圓嘉裤，修改其名稱不與其他元素重名郑临。如果沒有第三個畫板，直接指回第一個畫板屑宠，畫面中的元素會出現(xiàn)逆向的運動厢洞，即每個群組會將旋轉角度變回0°，回到第一個畫板的狀態(tài)典奉。
第六步：選中最后一個畫板躺翻，按照步驟三，將箭頭指向第一個畫板卫玖，即可完成該加載動效的制作公你。
整體上，整個動效的制作時間只有5分鐘假瞬，效率遠遠高于AE陕靠，這正是Principle的優(yōu)勢所在嚣崭。
另外，需要工程文件的童鞋懦傍，可以到百度云盤中下載：
鏈接:https://pan.baidu.com/s/17KWy1yEMRCKB4ip9-3T9ug 密碼:d3j0
