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