FRAMER FLOW 初體驗
Framer 不適合製作頁面流程 (暫時)
建議大家不要拿 Framer 來製作頁面流程的原型。因為有比 Framer 更方便的工具，像是 Prott, Flinto 以及 Invision 等等。
還記得在開始寫這些 Framer 教學時，曾經寫下這樣的建言，而不知為何那時也在句子後面加上了”暫時”兩個字，當時似乎就隱約察覺到 Framer 團隊遲早會針對頁面流程上，提出更好的解決方案。而就在前一陣子，他們推出了 Framer Flows!
問題
在我們了解 Framer Flows 有多方便之前，先講一下之前做頁面切換到底有多痛苦。以下是我歸納出幾個比較惱人的問題：
- 因為 Framer 會抓 Sketch Artboard 的絕對座標（參考：Framer Part 2），都必須多寫一行程式重新歸位到正確地進入位置。
- 然後寫一行進入畫面的動畫程式碼。
- 當新畫面進入後，還必須把後面的頁面 visible 關掉，不然該頁面上的 Event 還是會被觸發。
寫了這麼多的程式，卻只完成了一個頁面的切換… 其他還有返回鍵等等的行為要加上去… 真是超級麻煩。
Framer Flow
Framer Flow 最厲害的地方就是，只需要寫上非常簡短的程式，就可以做出常看到的頁面切換效果，以下就是要分享給大家的範例。
從範例影片，可以發現左邊程式非常簡短，但右邊的頁面切換卻還是非常完整，現在就讓我們來看一下 Framer Flow 如何使用吧
首先，先仔細看一下這次範例的 Sketch 檔案的規劃，先注意到最左邊的頁面是 musicPlayerPage ，當匯入到 Framer 時，他將會是我們所看到的預設頁面。但是，理論上應該要讓 albumPage 作為使用者第一個看到的頁面，除了在 Sketch 裡面調換這兩個畫面的位置外，也可透過 Framer Flow 來做喔！
sketch = Framer.Importer.load("imported/musicPlayer@1x")flow = new FlowComponent
flow.showNext(sketch.albumPage)
我們在匯入 Sketch 檔的程式碼下，加入一個 FlowComponent 的物件，而這個物件我們就叫 flow。透過 FlowComponet 裡面的函式 showNext()，就可直接指定希望顯示的下個頁面，在此範例則是 albumPage。
一般來說，在使用 showNext() 的時候，他會自動加入由左到右頁面切換的效果，但如果是整個 flow 裡面的第一頁，系統會當成預設頁面，這就是為什麼開啟原型，就會看到 albumPage 直接在畫面上，而不是 musicPlayerPage。
sketch.playPanel.onTap ->
flow.showOverlayBottom(sketch.musicPlayerPage)接下就是把其他頁面串接起來，當點擊下方操控介面時，musicPlayerPage能夠從底下升上來，這邊就可以使用 showOverlayBottom () 這個函式。
sketch.downBtn.onTap ->
flow.showPrevious()升上來後，我們希望能夠在 albumPage 與 musicPlayerPage 兩頁之間自由切換，這時我們只要在 musicPlayerPage 那頁的左上角的 downBtn 加上點擊事件，並執行 showPrevious() ，就會自動產生剛剛進入效果的相反效果，也就是說，從下面上來的頁面，會被推回到下面去。
sketch.menuButton.onTap ->
flow.showOverlayLeft(sketch.menu)sketch.album1.onTap ->
flow.showNext(sketch.detailPage)sketch.backBtn.onTap ->
flow.showPrevious()
剩下的程式也是重複在做一樣的事情，唯一比較特別 flow.showOverlayLeft(sketch.menu)，這其實是在模擬 Android Drawer 的行為，在 albumPage 底下其實有個 menu 的圖層被隱藏起來，而我是透過 FlowComponet 把它開啟的。
FlowComponet 還有其他像是 header 與 footer 的運用，你可以透過這兩個函式把想要的圖層固定住，就可以很快速做出像是 Tab 或是 Naviation bar 的元件行為。
Framer Project 檔案：https://framer.cloud/B1X5RiPVe/
以上就是 Framer Flow 一些簡單的介紹，如果有相關問題，隨時歡迎大家到 Framer Taiwan 詢問喔：）
