? 這篇教程要介紹的案例是：App界面上調(diào)整時(shí)間的可交互原型。我們先看一下效果：

? ? 這個(gè)案例用的是Principle這款軟件做的。Principle是近段時(shí)間非常流行的一款做原型的軟件速和。很多公司也用Principle做高保真原型斗锭，這樣就可以作為最小可行性產(chǎn)品（mvp）,在正式開發(fā)前就進(jìn)行用戶調(diào)查、可用性測試蛉签。Principle有如下幾大優(yōu)點(diǎn)：1、容易上手沥寥； 2碍舍、支持從sketch導(dǎo)入素材，極大的節(jié)約時(shí)間邑雅； 3片橡、可以隨時(shí)查看效果 ；4淮野、可以錄制視頻捧书； 5、有一個(gè)獨(dú)特的Drivers功能 骤星。下載安裝破解版的地址在此：Principle1.2.7破解版下載（for mac）

? ? 案例里面就主要用了Drivers的功能经瓷。手指在屏幕上下滑動(dòng)時(shí)，分針和時(shí)針會(huì)隨著滑動(dòng)一起旋轉(zhuǎn)洞难。這就是Drivers舆吮。Drivers是Principle的一個(gè)重要功能，也翻譯成聯(lián)動(dòng)。

? ? 官方對(duì)于聯(lián)動(dòng)有有一大段的解釋色冀，但是如果沒有做個(gè)是很難看懂的潭袱，但沒有關(guān)系，因?yàn)榻酉聛頃?huì)通過實(shí)例來介紹這個(gè)功能锋恬。

第一步：將素材導(dǎo)入到principle中

方法有2種：

1屯换、拖動(dòng)素材到principle中，需要一個(gè)個(gè)拖

2与学、在sketch中做好素材彤悔，將sketch保持打開狀態(tài)，再打開principle選擇導(dǎo)入就可以了

第二步：制作上下滑的動(dòng)作

? ? 1索守、創(chuàng)建一個(gè)矩形蜗巧，把矩形的高度做的很長。命名為“看不見的控制”蕾盯，調(diào)整Vertical屬性為Drag幕屹。這樣就可以在preview中上下拖動(dòng)這個(gè)矩形了。（見下圖）

? ? 為什么第一步要這樣做呢级遭？這是因?yàn)槲覀円舷禄瑒?dòng)這個(gè)矩形的時(shí)候望拖，分針和時(shí)針可以旋轉(zhuǎn)。那么這個(gè)矩形就是聯(lián)動(dòng)源挫鸽，矩形和分針说敏、時(shí)針之間是聯(lián)動(dòng)關(guān)系。

? 為了更好的理解這個(gè)概念丢郊，我們看一下官方的解釋：

聯(lián)動(dòng)源（Driver Sources）

想要?jiǎng)?chuàng)建聯(lián)動(dòng)盔沫，在畫板上必須存在一個(gè)可改變的屬性，這叫做聯(lián)動(dòng)源枫匾。在聯(lián)動(dòng)視圖中列表中架诞，可拖拽圖層、可滾動(dòng)圖層干茉，以及選擇屬性將自動(dòng)展示出來谴忧。

? ? 2、然后將這個(gè)矩形的Fill屬性中的透明度調(diào)整到最高角虫。讓這個(gè)矩形變透明沾谓。（見下圖）但是注意：不能直接調(diào)整Opacity這個(gè)屬性，是因?yàn)槿绻@么做戳鹅，那拖動(dòng)這個(gè)矩形不會(huì)產(chǎn)生任何效果的均驶。

第三步：將分針和“看不見的控制”聯(lián)動(dòng)，即上下滑動(dòng)屏幕時(shí)分針會(huì)旋轉(zhuǎn)枫虏。

? ? 1妇穴、首先要把分針的圖片處理一下亮垫。因?yàn)榉轴樢獓@表盤中心轉(zhuǎn)動(dòng)，所以分針的中心要調(diào)整到針的末尾伟骨。但principle暫不能調(diào)整中心點(diǎn)（有誰知道如何調(diào)整可以告訴我，感激不盡）燃异。所以我有個(gè)笨辦法携狭，就是復(fù)制一個(gè)分針，放到對(duì)稱的位置回俐，選中這兩個(gè)分針逛腿，按住cmd＋G組合。再把其中一個(gè)分針調(diào)整為透明仅颇。就調(diào)整好中心了单默。

2、然后關(guān)鍵時(shí)刻到來啦忘瓦。選中“分針”這個(gè)組搁廓，點(diǎn)擊Driver，點(diǎn)擊時(shí)針旁邊的＋號(hào)選擇Angle耕皮。

3境蜕、然后將下圖這拉桿向后拉動(dòng)到一個(gè)位置，在拉動(dòng)的時(shí)候可以看到“看不見的控制”這個(gè)矩形在向下移動(dòng)凌停。這個(gè)和AE基于時(shí)間軸的概念不一樣粱年，這個(gè)是基于位置的。

4罚拟、選中分針台诗，調(diào)整角度為4410度，這個(gè)時(shí)候Drivers面板中自動(dòng)出現(xiàn)藍(lán)色的線條赐俗，這個(gè)和補(bǔ)間動(dòng)畫的概念類似拉队。

5、現(xiàn)在再將拉桿在藍(lán)色線條區(qū)域內(nèi)拉動(dòng)會(huì)看見“看不見的控制”在移動(dòng)的時(shí)候阻逮，分針也在旋轉(zhuǎn)氏仗。這就完成了聯(lián)動(dòng)了。

這部分的操作夺鲜，我們可以對(duì)照官方的解釋皆尔，來理解一下：

聯(lián)動(dòng)屬性（Driven Properties）

一旦有了聯(lián)動(dòng)源，你就可以用它控制其他任意（包括自己）圖層的屬性币励。選擇一個(gè)你想控制的圖層慷蠕，在聯(lián)動(dòng)面板點(diǎn)擊藍(lán)色的加號(hào)圖標(biāo)，選擇一個(gè)你想聯(lián)動(dòng)的屬性食呻。這時(shí)會(huì)以當(dāng)前的屬性參數(shù)創(chuàng)建一個(gè)起始關(guān)鍵幀流炕。只有一個(gè)關(guān)鍵幀不起任何作用澎现。

聯(lián)動(dòng)關(guān)鍵幀（Driver Keyframes）

完整的聯(lián)動(dòng)需要至少兩個(gè)關(guān)鍵幀才能有效果。方法很簡單：水平拖拽灰色標(biāo)記移動(dòng)到你想添加的關(guān)鍵幀位置每辟，然后調(diào)整屬性值剑辫。Principle 將自動(dòng)為你插入一個(gè)新的關(guān)鍵幀。關(guān)鍵幀能夠通過點(diǎn)擊衣櫥渠欺，然后點(diǎn)擊紅色按鈕到關(guān)鍵幀的左側(cè)妹蔽。

第四步：重復(fù)上面的操作，將時(shí)針和“看不見的控制”聯(lián)動(dòng)起來挠将。

第五步：完成“點(diǎn)擊重置按鈕胳岂，重置表盤”的功能

1、復(fù)制現(xiàn)在這個(gè)Artboard1舔稀。在左側(cè)面板中選擇Artboard復(fù)制黏貼即可乳丰。

2、在Artboard1中選中重置按鈕内贮，連接到第二個(gè)Artboard

? ? ?完成了产园，現(xiàn)在點(diǎn)擊重置按鈕，表盤無論轉(zhuǎn)到什么位置都會(huì)重置回12點(diǎn)了夜郁。這是為什么呢淆两？因?yàn)槿绻?個(gè)Artboard之間如果有控件名稱一致，那么Principle會(huì)自動(dòng)把這兩個(gè)關(guān)聯(lián)起來拂酣，制作出補(bǔ)間動(dòng)畫秋冰。這個(gè)功能和keynote中的神奇移動(dòng)很類似。

學(xué)習(xí)完上面的步驟后婶熬，對(duì)什么是聯(lián)動(dòng)應(yīng)該有比較透徹的理解了剑勾。那么我們來看一下官方的解釋：

聯(lián)動(dòng)（Drivers）

想制作帶有交互的視差效果？想讓一個(gè)圖層在拖拽的同時(shí)赵颅，根據(jù)拖拽程度旋轉(zhuǎn)虽另？聯(lián)動(dòng)功能可以實(shí)現(xiàn)。聯(lián)動(dòng)用關(guān)鍵幀鏈接了每個(gè)屬性饺谬。和動(dòng)畫不同捂刺，動(dòng)畫發(fā)生在畫板切換時(shí)，聯(lián)動(dòng)發(fā)生在同一個(gè)畫板中募寨。在工具欄點(diǎn)擊 Drivers 按鈕可以展開當(dāng)前畫板的聯(lián)動(dòng)面板族展。如果你的鼠標(biāo)不支持水平滾動(dòng)，按住 空格鍵（Space）同時(shí)拖拽聯(lián)動(dòng)面板來滾動(dòng)拔鹰。

是不是這樣對(duì)比著看仪缸，比較容易理解了呢？

總結(jié)：

? ? Principle是一個(gè)非常容易上手的原型制作軟件列肢∏』可以支持的功能也非常多宾茂。尤其是drivers，這個(gè)是其他原型軟件沒有的拴还。

? ? 但是還有一些局限性：1跨晴、畫圖不方便，所以建議大家在skecth中做好圖片林，再導(dǎo)入到principle中 ?2端盆、不能在當(dāng)前頁中做動(dòng)畫。比如跳轉(zhuǎn)到當(dāng)前頁后按鈕有按下去的效果并且再恢復(fù)成nomal狀態(tài)拇厢。只有跳轉(zhuǎn)的時(shí)候可以有變化。3晒喷、在principle中的素材不能自由調(diào)整大小孝偎，只能用左側(cè)面板的scale和寬、高選項(xiàng)調(diào)整凉敲。

? 如果以上說的不對(duì)衣盾，也請(qǐng)告訴我解決方法，感激不盡～

附上Principle的一些官方學(xué)習(xí)網(wǎng)址：

1爷抓、官網(wǎng)??http://principleformac.com/

2势决、官方中文文檔?http://principleux.com/principle-chinese-document/

3、官方視頻教程? http://principleformac.com/tutorial.html#scrolling-tabs 非常簡短實(shí)用的幾個(gè)小視頻

? ? 如果喜歡這個(gè)文章請(qǐng)點(diǎn)喜歡蓝撇，或者關(guān)注我果复。我會(huì)繼續(xù)更新新的原型文章。如果有principle其他問題渤昌，也歡迎交流～