這期教大家制作Principle官網上第二個示例。

官網示例二

這個很像探探和Badoo那種卡片交互，我們先看下探探里面的這種交互是什么樣的。

探探卡片交互

為了控制上傳gif的大小，這里簡單做了一個demo，看下最終效果：

最終效果

我們首先來分析下整個交互的過程。

手指左劃時：

1. 當前卡片逆時針旋轉一定角度，卡片右上角出現dislike的icon；
2. 底部的卡片依次變大并位移至其上一層卡片的坐標位置；
3. 底部dislike按鈕變大；

手指右劃時：

1. 當前卡片順時針旋轉一定角度，卡片右上角出現like的icon；
2. 底部的卡片依次變大并位移至其上一層卡片的坐標位置；
3. 底部like按鈕變大；

這次的demo我們主要會用到Driver，也就是當前頁面自身的交互動作，開始。

Step 1：建立好圖層，靈活運通Mask控制圖層

由于這一次畫板上的元素稍微有點多，我們可以在sketch里面完成所有圖層的繪制，再用Principle導入。

Principle源文件鏈接
提取碼：ut5e

Sketch中建立圖層

如上圖所示，建立好所有圖層，其中可以發(fā)現其中有四個編組我是用了Mask。

Tip：Principle導入Sketch文件時，會保留Sketch里面除Mask編組外的所有圖層。而帶有Mask的那個一編組無論編組里面實際上有多少圖層，都只會被當成一個圖片圖層。

我們可以利用這一點，靈活控制我們在導入Principle時的圖層數量，而不用在Sketch文件里面做合并或刪減。

比如當我們在做高保真的demo時，某個列表編組里面的圖層有很多，而其實際上只需要實現其Scroll的效果。如果直接導入到Principle里面，那這個編組里面的圖層數量就會完全被繼承，而且圖層名非常容易混亂，要知道Principle就是通過圖層名去判斷圖層的，所以很容易出錯。這時候我們只需要給這個列表編組添加一個等大的Mask圖層置于編組最底層，導入Principle時這個列表編組就變成了一個單獨的圖片圖層。

Tip：Principle可以繼承Sketch圖層的Shadow效果，包括填充色、X、Y、Blur，而Spread不可被繼承。
Principle只能繼承Sketch圖層填充模式為Flat Color，其余填充模式都會被轉化成圖片圖層。
Principle不能繼承Sketch圖層的圓形圖層，如果想正圓圖層導入Principle后能繼續(xù)被編輯，請用圓角矩形去實現。

導入到Principle

全部完成后不要關閉Sketch，打開Principle，點擊工具欄的鉆石按鈕，導入Sketch。可以看到button like、button dislike、icon like、icon dislike因為是Mask編組，所以都被轉化成了一個單獨的圖片圖層。

Step 2：實現card 1左右滑動效果

Drag效果

實際案例中的卡片是可以被隨意拖拽的，這時候我們選中card 1編組，將其編組水平（Horizontal）和垂直（Vertical）的屬性改為拖拽（Drag）。

Tip：可以將預覽窗口固定在屏幕右邊。View->Side By Side

這時候點擊工具欄的Driver，發(fā)現出現了兩條Driver面板，且面板上名稱都為card 1。這是因為當前畫板Artboard 1中只有card 1存在可交互屬性，而card 1在X軸和Y軸上都具有Drag交互屬性，因此就會分別有兩個Driver面板。而當前指針在180的位置標明card 1在默認狀態(tài)下的時間軸位置是180。

Card 1添加Angle

隨意拖動指針你會發(fā)現card 1會隨著拖動而移動，實例中卡片會隨著左右劃動而旋轉一定角度，因此我們選中card 1，在X軸的Driver面板中，點擊card 1右邊的“+”圖標，添加一個Angle屬性的節(jié)點。

將指針移動到360的位置，繼續(xù)添加一個節(jié)點，同時給card 1設置12°的Angle。再將指針移動到0的位置，繼續(xù)添加一個節(jié)點，同時給card 1設置-12°的Angle?？聪滦Ч?/p>

拖動旋轉效果

由于icon like和icon dislike都是在左右劃情況下才會出現，因此我們要分別為它們添加Opacity的屬性變化。

給Icon like和dislike添加Opacity

同時選中icon like和icon dislike，在180位置上添加Opacity，并將二者的Opacity設為0%。

在260位置上為icon like添加一個節(jié)點，Opacity設為100%，在100位置上為icon dislike添加一個節(jié)點，Opacity設為100%?？聪滦Ч?/p>

Icon隨拖動顯示效果

可以發(fā)現實現了左劃顯示icon dislike，右劃顯示icon like，且兩個icon會隨著card 1旋轉而旋轉。

Tip：編組內的圖層會隨著編組的屬性變化而變化，包括：Angle、Scale、Opacity。

Step 3：實現底層卡片放大位移及底部按鈕放大效果

實例中，底部的卡片會隨著左右劃動依次變大并位移至其上一層卡片的坐標位置，同時底部的按鈕也會隨著左右滑動而分別放大。

由于頁面中最多只顯示三個卡片，因此card 4在默認狀態(tài)也就是180位置時，不透明度應該是0%的，在目標節(jié)點時不透明度才變?yōu)?00%。

card 2、card 3要實現放大并位移的效果，涉及到的屬性變化包括：X、Y、Width、Height。

底部按鈕放大的效果可以通過Sacle屬性變化來實現。

為Card 2 3 4添加變化及底部按鈕變化

為card 2、card 3在180位置上分別添加X、Y、Width、Height節(jié)點、card 4添加Opacity節(jié)點，button like、button dislike分別添加Scale節(jié)點。

以右劃為例，在300位置上繼續(xù)添加節(jié)點：

1. card 2的X、Y、Width、Height屬性改為同card 1一樣；
2. card 3的X、Y、Width、Height屬性改為同card 2一樣；
3. card 4的Opacity改為100%；
4. button like的Sacle變?yōu)?.12。

效果如下：

右劃效果

繼續(xù)添加左劃過程中的節(jié)點，效果如下：

左右劃效果

Step4：實現拖拽結束跳轉效果

為了整個demo更加真實，我們可以為card 1添加交互動作，讓其在拖拽結束時消失，同時頁面回到默認狀態(tài)。

為Card 1添加交互動作

command+d復制畫板，在Artboard 2上將card 1移出畫板可視范圍并設置Angle為36°，在Artboard 1中選中card 1，添加Drag End交互動作并鏈到Artboard 2。

看下效果：

like沒有縮小效果

這時候會發(fā)現，由于Artboard 2繼承了Artboard 1的Driver，因此跳轉后button like并沒有縮小回原狀。

原因

這是因為在Artboard 2上移動和旋轉card 1時，Driver上會根據card 1移動的位置自動為card 1的X軸上生成新節(jié)點。而此時Artboard 2是處于566位置狀態(tài)的，此時card 2是移出畫板了，但是button like還是保持1.12的Scale狀態(tài)。

解決方法有幾種：

1. 不改變Artboard 2的Driver位置，將button like在Driver上的時間軸刪除，并恢復Scale為1；

2. 不改變Artboard 2的Driver位置，在300位置時將button like的Scale設置為1；

3. 將Artboard 2的Diver位置調整到180，在180位置時將card 1移出畫板可視范圍；

4. 刪除Artboard 2上所有的Driver屬性，并按Animate邏輯在Artboard 2給各個圖層設定好對應的屬性。

Tips：由于Principle里面沒有Axure的那種條件判斷功能，因此判斷不了拖拽結束時card 1是往左邊消失還是右邊消失。因為為了方便演示，做demo時，相同的交互形式，只需演示一種情況就好。

最終效果：

最終效果

下期會教大家實現官網上的第三個示例_下期見

flow.gif

非常感謝您的閱讀，您的支持是我最大的動力！