本文不是一篇帶有步驟的詳細教程，與其傻傻的跟著操作步驟機械的做，不如多聊聊制作構思和實現思路更有效。
 

先看最終效果：

 

 

 

 

之前我也曾使用Pixate做過類似的案例 Android L 鎖屏 有興趣的小伙伴可以參考下。

相比較之前使用Pixate，這次使用ProtoPie（以下簡稱Pie），在整體流程和制作上更輕便了一些。

 

 

1. 基本制作思路：

基本的思路還是一樣，制作一個“Ghost”圖層來關聯控制觸發絕對大多數在鎖屏里的操作，包括“點擊時時間／通知欄的跳動”-“滑動時時間的縮放和通知欄的位移”等。

 

因為Pie有一個單獨的Trigger：“Pull”（判斷是否成功操作圖層的滑動范圍，“成功”則進行相對應的操作動作，“失敗”則返回原來位置），所以針對上滑的操作Ghost層可以單獨設置為一個不帶任何交互動作的Pull,同時將相關圖層與Ghost的Pull的Y軸進行Chain的聯動。

 

 

 

 

2. 場景切換邏輯：

由于目前Pie暫時沒有提供condition條件屬性以及Chain的關聯圖層的相關設置內容非常有限，所以在還原進行上拉滑動出現圖形解鎖的界面在同一場景中無法很好的實現。又由于為了盡可能的還原原生效果的邏輯，所以在場景的切換上進行了比較繁瑣的設置。好在Pie的多場景創建和切換還是相對比較好用，所以這一過程雖然煩瑣但是并不復雜。

 

主要的實現效果為：

 

1. 在有通知條（并非默認顯示固定，而是有一個動畫進場效果）的情況下，上滑屏幕出現圖形解鎖頁面（此時通知條隱藏），點擊“返回”按鈕回到主頁，通知條依舊在屏幕中間顯示。且“返回”按鈕在當前主頁中顯示并延遲消失。

 

2. 沒有通知條的情況下，上滑屏幕出現圖形解鎖頁面，點擊“返回”按鈕回到主頁，且“返回”按鈕在當前主頁中顯示并延遲消失。

將場景分為“有通知條”（藍色）和“無通知條”（紅色）兩大類。

 

主要的場景鏈路邏輯為：

 

1.“有通知條”時，“藍色1場景（默認起始頁，帶有通知條動畫進場效果）”上滑 ——>(切換到) “藍色3場景（圖形解鎖頁）”點擊“返回”按鈕 ——>（返回到）“藍色2場景（固定帶有通知條的起始頁）”。 之后的所有操作都在“藍色2場景”和 “藍色3場景”之間切換。

 

2.“無通知條”時，“藍色1場景（默認起始頁滑動通知條使其消失） ——>(切換到)“紅色1場景（無通知條的起始頁，且沒有“返回”按鈕延遲動畫效果）后上滑 ——>(切換到) “紅色3場景（圖形解鎖頁）”點擊“返回”按鈕 ——>（返回到）“紅色2場景（帶有“返回”按鈕延遲動畫效果）”。之后的所有操作都在“紅色2場景”和 “紅色3場景”之間切換。

 

后記：

為了盡可能還原原生的功能和效果做了比較多的操作功能在里面。但因為個人能力和軟件功能的限制，此案例中依舊有一些小“bug”：

比如下來通知欄拉出快捷控制頁后再滑調通知條會直接跳到“紅色1場景”的初始狀態，而不是停留在快捷控制頁打開狀態。

下拉通知條不能很好的展示擴展并將其優雅的滑動至屏幕底部。

 

期望Pie在后續的更新中可以加強豐富Chain對應的圖層運動屬性，和增加condition的條件設置，來完成一個完美的效果！

 

最后附上ProtoPie及Sketch資源源文件，供大家參考研究。（上傳的Sketch資源文件中將facebook的通知條頭像和名字改成了我自己的名字和頭像哈～ ）