本文不是一篇帶有步驟的詳細教程，與其傻傻的跟著操作步驟機械的做，不如多聊聊制作構思和實現(xiàn)思路更有效。
先看最終效果：
之前我也曾使用Pixate做過類似的案例 Android L 鎖屏 有興趣的小伙伴可以參考下。
相比較之前使用Pixate，這次使用ProtoPie（以下簡稱Pie），在整體流程和制作上更輕便了一些。
1. 基本制作思路：
基本的思路還是一樣，制作一個“Ghost”圖層來關聯(lián)控制觸發(fā)絕對大多數(shù)在鎖屏里的操作，包括“點擊時時間／通知欄的跳動”-“滑動時時間的縮放和通知欄的位移”等。
因為Pie有一個單獨的Trigger：“Pull”（判斷是否成功操作圖層的滑動范圍，“成功”則進行相對應的操作動作，“失敗”則返回原來位置），所以針對上滑的操作Ghost層可以單獨設置為一個不帶任何交互動作的Pull,同時將相關圖層與Ghost的Pull的Y軸進行Chain的聯(lián)動。
2. 場景切換邏輯：
由于目前Pie暫時沒有提供condition條件屬性以及Chain的關聯(lián)圖層的相關設置內容非常有限，所以在還原進行上拉滑動出現(xiàn)圖形解鎖的界面在同一場景中無法很好的實現(xiàn)。又由于為了盡可能的還原原生效果的邏輯，所以在場景的切換上進行了比較繁瑣的設置。好在Pie的多場景創(chuàng)建和切換還是相對比較好用，所以這一過程雖然煩瑣但是并不復雜。
主要的實現(xiàn)效果為：
1. 在有通知條（并非默認顯示固定，而是有一個動畫進場效果）的情況下，上滑屏幕出現(xiàn)圖形解鎖頁面（此時通知條隱藏），點擊“返回”按鈕回到主頁，通知條依舊在屏幕中間顯示。且“返回”按鈕在當前主頁中顯示并延遲消失。
2. 沒有通知條的情況下，上滑屏幕出現(xiàn)圖形解鎖頁面，點擊“返回”按鈕回到主頁，且“返回”按鈕在當前主頁中顯示并延遲消失。
將場景分為“有通知條”（藍色）和“無通知條”（紅色）兩大類。
主要的場景鏈路邏輯為：
1.“有通知條”時，“藍色1場景（默認起始頁，帶有通知條動畫進場效果）”上滑 ——>(切換到) “藍色3場景（圖形解鎖頁）”點擊“返回”按鈕 ——>（返回到）“藍色2場景（固定帶有通知條的起始頁）”。 之后的所有操作都在“藍色2場景”和 “藍色3場景”之間切換。
2.“無通知條”時，“藍色1場景（默認起始頁滑動通知條使其消失） ——>(切換到)“紅色1場景（無通知條的起始頁，且沒有“返回”按鈕延遲動畫效果）后上滑 ——>(切換到) “紅色3場景（圖形解鎖頁）”點擊“返回”按鈕 ——>（返回到）“紅色2場景（帶有“返回”按鈕延遲動畫效果）”。之后的所有操作都在“紅色2場景”和 “紅色3場景”之間切換。
后記：
為了盡可能還原原生的功能和效果做了比較多的操作功能在里面。但因為個人能力和軟件功能的限制，此案例中依舊有一些小“bug”：
比如下來通知欄拉出快捷控制頁后再滑調通知條會直接跳到“紅色1場景”的初始狀態(tài)，而不是停留在快捷控制頁打開狀態(tài)。
下拉通知條不能很好的展示擴展并將其優(yōu)雅的滑動至屏幕底部。
期望Pie在后續(xù)的更新中可以加強豐富Chain對應的圖層運動屬性，和增加condition的條件設置，來完成一個完美的效果！
最后附上ProtoPie及Sketch資源源文件，供大家參考研究。（上傳的Sketch資源文件中將facebook的通知條頭像和名字改成了我自己的名字和頭像哈～ ）
