這一期我們來實現(xiàn)官網(wǎng)的第三個示例，先看一下效果。
我們來分析一下這個動效的整個過程：
- 頁面內(nèi)容上下滾動；
- 單圖瀏覽；
- 頁面跳轉(zhuǎn)，跳轉(zhuǎn)時元素位移有時間差；
- 當前頁面出現(xiàn)其他模塊。
本期大部分的技巧之前兩期都有介紹，接下來我們就拆分成三個實例來制作（為什么拆后面會說）。
實例一：
首先是實現(xiàn)頁面內(nèi)容上下滾動以及單圖瀏覽，在滾動的同時讓標題欄也有一個聯(lián)動的收縮效果。
實例二：
實現(xiàn)頁面跳轉(zhuǎn)，同時讓目標頁面的元素出現(xiàn)有時間差。
實例三：
在當前頁面出現(xiàn)其他模塊。
開始
還是和往常一樣，先在sketch里面畫好圖層并命名好，畢竟Principle不是專門的畫圖軟件。
Tips:在Sketch里面做圖時不需要把每個畫板上的所有元素都畫好，重復(fù)的圖層和編組可以在Principle里面復(fù)制，避免混亂。
源文件地址
密碼：n4ea
實例一
Step 1 編輯card編組
給對應(yīng)的圖片圖層增加陰影，我是給四個頭像圖層增加陰影，純粹為了好看，可以忽略這一步，不過有一點需要注意：
Tips：Principle是不能繼承Sketch里面帶Mask編組的任何陰影屬性的，帶有Mask的編組的陰影屬性會被當成圖像的一部分，轉(zhuǎn)換成一張圖片圖層。
將Artboard 1中的card red、card yellow、card purple編組為card，編組垂直屬性設(shè)置成Scroll。
根據(jù)實例可以看到card滾動的同時會帶動標題欄高度的收縮，所以card編組的top邊界應(yīng)該為標題欄收縮后的bottom邊界，所以我們需要調(diào)整card的大小。
Tips：Principle的編組里，直接在左上角的屬性面板里面對編組的X、Y、Width、Height做調(diào)整，會帶動變圖內(nèi)的元素一起改變位置。若想使編組內(nèi)的元素保持位置不變，則需要直接在畫板內(nèi)部調(diào)整編組的大小。
底邊留了10個單位的高度出來是為了拖到底部時卡片和底部有一個間距，這10個單位也是卡片之間的間距。
Step 2 編輯Driver
在card拖動時，text title是發(fā)生Y軸上的位移，而bg title則是Height發(fā)生了變化。
打開Artboard 1上的Driver，在0、40（bg title高度的一半）位置分別給text title添加Y屬性變化節(jié)點，同時在這兩個位置給bg title添加Height屬性變化節(jié)點，并在節(jié)點上調(diào)整二者的屬性。效果如下：
可以發(fā)現(xiàn)效果并不是我們想要的樣子，這是因為：
Tips：當圖層或編組的Width或Height發(fā)生變化時，其變化的參考點是圖層或編組的中心點而非左上角，所以其對應(yīng)的X或Y也會發(fā)生變化，因此若要固定一邊進行變化，需要將對應(yīng)的X或Y也編輯上。
給bg title添加Y屬性變化節(jié)點，在0和60位置上都為0，看下實際效果：
Step 3 制作單圖瀏覽效果
在實例中可以看到，點擊后的單圖瀏覽效果，是出現(xiàn)遮罩同時圖片進行放大居中，頭像也會有一個漸隱漸現(xiàn)和位移的效果。
所以這里我們先要添加一個和畫板等大的cover 1，置于所有圖層之上，設(shè)置0%的Opacity，然后復(fù)制畫板。
在Artboard 2上調(diào)整圖層順序，將pic r和head r置于cover 1上，cover 1設(shè)置70%的Opacity，改變pic r的大小，使其等比放大按寬度填充畫板，移動head r，使其保持和pic r左上角的間距，設(shè)置0%的Opacity。
在Artboard 1上給pic r添加Tap交互鏈接到Artboard 2，同時在Artboard 2上給pic r添加Tap交互鏈接到Artboard 1，看下效果：
會發(fā)現(xiàn)效果有點怪，圖片消失的那一下有點閃，過度的并不自然，這是因為在Artboard 1上，pic r和head r是在cover圖層順序之下的。
Tips：Principle中畫板里面的圖層的順序調(diào)整是做不到動畫過渡的，而且圖層順序的調(diào)整會在交互發(fā)生的那一瞬間就切換成目標畫板的圖層順序。
比如剛剛我們做的，在Artboard 2上點擊pic r時，這時候Artboard 2內(nèi)的所有圖層順序都直接變成Artboard 1的圖層順序，pic r和head r的動畫效果實際上是發(fā)生在cover 1下的，所以實際效果看上去pic r會閃一下。
有一個辦法可以解決這個問題，就是我們建立一個和pic r相同屬性的pic r 2，讓pic r 2一直置于cover 1之上。
在Artboard 1給pic r 2設(shè)置0%的Opacity，通過Driver讓pic r 2跟隨card的滾動位移，使pic r和pic r 2完全重合。
在Artboard 2上將pic r 2屬性設(shè)置成同pic r一樣，刪除pic r的Tap交互鏈接，改成pic r 2。
看下效果：
這樣就實現(xiàn)了比較自然的過渡效果。
實例二
Step 1 統(tǒng)一畫板的元素
在實例二中，我們實現(xiàn)的是一個頁面跳轉(zhuǎn)的效果，主要的效果是一個元素的漸隱漸現(xiàn)以及位移順序的時間差。因此我們首先要統(tǒng)一Artboard 1和Artboard 3中的元素數(shù)量。
將Artboard 1中的card和title復(fù)制到Artboard 3，設(shè)置0%的Opacity，將Artboard 3中的icon add、content、icon back復(fù)制到Artboard 1，icon back設(shè)置0%的Opacity，icon add和content調(diào)整位置。
因為card和title在目標畫板中不透明度都為0%，而且仔細觀看實例中，動畫有一個先后的順序，所以在Artboard 3中card和title的圖層順序就無所謂了。
Step 2 建立跳轉(zhuǎn)鏈接，調(diào)整動畫先后順序
在Artboard 1中選中head r，添加Tap交互鏈接到Artboard 3，在Artboard 3中選中icon back，添加Tap交互鏈接到Artboard 1，看下效果：
為了實現(xiàn)實例中的先后效果，我們需要對兩個交互鏈接分別進行編輯。
這里主要注意時候的時間差，即Artboard 1跳轉(zhuǎn)Artboard 3時，card和title先消失，然后pic r和head r形狀和位置變化，最后icon back出現(xiàn)，content和icon add先后出現(xiàn)。Artboard 3跳轉(zhuǎn)Artboard 1時，content和icon add先后消失，然后pic r和head r形狀和位置變化，最后card和title出現(xiàn)?？聪滦Ч?/p>
會發(fā)現(xiàn)，如果按照這個步驟編輯，最后返回時的動畫是有問題的。因為在Artboard 1上，pic r和head r是屬于編組card的，而card在這個交互鏈接中是Opacity由0%變?yōu)?00%，因此在最終的效果中我們看不到pic r和head r的形狀和位置變化效果。
要解決這個問題，我們就要換個思路，即不是讓card這個編組去進行不透明度的變化，而是讓card內(nèi)的元素自己去進行不透明度變化。
所以我們調(diào)整一下畫板上元素的屬性，在Artboard 3上，將card的Opacity改回100%，將card里面的card yellow和card purple的Opacity設(shè)為0%，并在Animate面板中調(diào)整先后順序，讓其和title的出現(xiàn)時間一致。這樣就有了我們最終的效果：
實例三
Step 1 制作滾動效果
在實例三中，我們也是首先要實現(xiàn)Artboard 3上面content滾動帶動頂部pic r和head r變化的效果，這個同實例一中的原理一樣，這里就不復(fù)述了，直接看一下實際效果：
Step 2 制作底部彈窗效果
實例三中出現(xiàn)了一個底部彈窗，彈窗內(nèi)的方塊可以左右滑動，這個同樣是通過給編組設(shè)置水平滾動然后調(diào)整編組位置和大小實現(xiàn)的，同時icon add會發(fā)生一個旋轉(zhuǎn)和位移。這一步的動畫原理之前都有講過，所以這里就不上步驟圖了。
我們先在Artboard 4中將方塊的編組pc制作成水平滾動效果，同時給icon add添加45°的Angle，并調(diào)整位置。
統(tǒng)一Artboard 3和Artboard 4中的元素數(shù)量，注意圖層順序。
然后在兩個畫板上分別給icon add添加Tap交互鏈接到對應(yīng)畫板。
看下效果：
我們會發(fā)現(xiàn)，在返回的這一步中，icon add在Y軸上的動畫看上去有延遲。我們?nèi)nimate找一找原因。
可以看到，在icon add Tap（Artboard 4 → Artboard 3）這一步交互中，icon add在Y軸上的時間屬性和head r Tap（Artboard 1 → Artboard 3）這一步交互中的一樣，這就是之前說的為什么三個實例要分開做的原因。
我們?nèi)con add Tap（Artboard 4 → Artboard 3）這一步交互中把icon add的Y軸時間屬性的動畫曲線調(diào)整回來，發(fā)現(xiàn)在head r Tap（Artboard 1 → Artboard 3）這一步交互中，icon add的Y軸屬性也一起改變了，看下效果：
會發(fā)現(xiàn)在實例二的效果中，icon add在跳轉(zhuǎn)頁面時又是先出來的。這是因為：
Tips：Principle中，當編輯Animate時，若目標畫板的某個元素的某個屬性變化曾經(jīng)出現(xiàn)在別的畫板鏈接到目標畫板的交互時，那在這次的交互中，該元素的那個屬性變化會被繼承，且兩邊會保持聯(lián)動。
這樣可能有點難理解，我們來舉個栗子。
假設(shè)Artboard 2是目標畫板，那么在Artboard 1到Artboard 2的交互A中，- -"是發(fā)生了X軸和Y軸上的位移。如果這時候我們在Artboard 3上給- -"添加Tap交互B鏈接到Artboard 2上，那么- -"在Y軸上的屬性變化會繼承交互A中的Y軸屬性變化。如果在交互B中對- -“的Y軸屬性變化進行編輯，則相應(yīng)的交互A中的也會一起改變。
這時候再回到之前實例一的交互中，演示的時候會發(fā)現(xiàn)，圖片消失的動畫也出錯了。
因此以后各位在做類似demo的時候，如果一個畫板牽扯的元素過多，且不同交互你需要的動畫效果不一樣是，最好是分開兩個畫板去做，不然就會出現(xiàn)以上這種情況。
切忌，Principle因為沒有條件判斷，所以不適合做特別復(fù)雜且路徑長的demo，如果只是為了演示，可以將demo拆分。
本期就到此為止，下一期教大家實現(xiàn)幾個banner的輪播效果。
非常感謝您的閱讀，您的支持是我最大的動力！
