解析用Pixate制作shared element元素擴展轉場效果

 　　很久沒有更新教程了。最近一陣比較忙。今天簡單分享下如何用Pixate制作利用單個元素進行擴展轉場的效果。

　　效果如下：

　　其實這個效果在Pixate裡制作並不難，只是步驟相對有點繁瑣。

　　最重要的是，一定要自己清楚想要達到一個什麼效果以及在此過程中如何去拆分、組合一些原來來達到目的。

　　首先，我分析了一下我想要的效果的一些關鍵細節點，這有助於我更好的選擇有哪種方式在達到我想要的效果。

　　一、 關鍵細節點如下：

　　Cover image(封面圖)的Transition(轉場動畫)在視覺上需要看上去是無縫連接的。

　　在默認狀態下表現出Card(圖片)特有的屬性。即：Cover image(封面圖)的左/右上角與Card(卡片)需要有一致的圓角效果)

　　在Cover image(封面圖) 轉到Detail(詳情頁)後，所顯示的Thumbnail(縮略圖)需要是四個角都是直角

　　Card(卡片)上得 Title(標題)單獨具有fade in/out的漸隱效果

　　Card(卡片)在轉入detail(詳情頁)時有從中間拉伸打開的效果

　　根據以上這幾個關鍵細節，我將所需要的元素單獨提取出來。

　　將封面頁的卡片拆分成4個不同作用的元素：

　　Image for transition (作為轉場動畫時使用，同時用作Detail頁面的Thumbnail)

　　Cover image(作為默認顯示下使用)

　　Card background(用於默認顯示的Card背景，同時在制作時我復制了一個相同的層用於轉場時拉伸時顯示的動畫素材)

　　Title(獨立的標題用於fade-in/out漸隱動畫)

　　二、 實現原理：

　　其實實現原理很簡單，我們一開始將帶有圓角的cover image與card background一起默認顯示出來，同時將image for transition放置於cover image一樣的位置，並把它設置為隱藏。

　　當點擊目標卡片時候，帶有圓角的默認cover image隱藏，同時image for transition馬上顯示出來，並進行位置的移動和縮放。最後設置其大小和位置在detail詳情頁面中的制定位置。這樣一個“偷梁換柱”的過程就可以實現在默認情況下看到是帶有圓角屬性的圖片卡片，但是在轉到詳情頁之後圖片則顯示為正常的四個角為尖角的圖片。

　　最後再單獨設置Title標題的動畫即可。

　　三、 布局結構：

　　接著利用這些素材來進行以下的布局。(理論上來說，在布局上沒有嚴格規定Image for transition必須放在cover image的上面。但是在實際項目中我們會發現，無論是從整理打包層級的角度出發還是設置整個項目中得幾個關鍵場景的角度出發。將cover image與Card打包成組為一個主題會方便很多。讓image for transition獨立依附於card組合之上是比較好的一種選擇。)

　　四、 過渡動畫原理：

　　在pixate內沒有自定義的動畫路徑。所以想要制作類似路徑動畫比較困難。

　　但是我們通過簡單的分析還是可以模擬一部分的路徑動畫。

　　在這個案例中我們可以知道cover image其實是經過Y軸的下降和X軸的平移以及自身的縮放來制造出曲線路線的動畫效果。

　　從下圖中我們可以看到目的是從A點得位置移動到B點位置。

　　在這一過程中下降和平移雖然是2個分開的步驟，但是我們可以通過設置2個move之間delay的延遲差來表現下降的同時平移，並且再配合縮放和設置合適的動畫曲線來縮放來達到最終的效果。

　　這個過程需要耐心的不斷的調試才能調試出比較滿意的效果。所以各位在制作類似的效果時一定要耐心，不斷地嘗試。切忌浮躁~