Framer — PageComponent & Drag 的應用案例

https://www.facebook.com/cheway.chang/videos/10211851588782591/

此篇是回覆 Framer JS Taiwan 社團裡 Boom Lee 的提問 (連結)，於是製作了一個基本的互動原型，期望能解答提問者的問題。

同時也覺得這個過程也能讓有興趣的人～特別是想知道如何使用 PageComponent 以及 Drag 的人～也能從此篇的分享中有所收穫，於是就演變成了一篇小文。

提問者 Boom Lee: 『 這個滑動交互，上滑，又可以橫滑。有能提供壹點思路的麽，Page還是scroll，還是直接動畫 』（請參照 Boom Lee 提供的參考影片，如下）

製作概要

由於此篇目的是要回覆提問者，提供容易理解的做法，所以拿掉所有不必要的介面元素，僅留下主要的互動內容：

1. PageComponent 頁面滑動元件 — 主要先把畫面分做三個區塊。分做上中下：

• 上： 導覽區 navigation bar 裡的標題文字
• 中： 分類標題區（大尺寸文字）
• 下： 文章內容區

2. Drag 拖曳 — 最終在針對「下： 文章內容區」設定「拖曳」的行為與邏輯。

本來也是打算直接分解每一段 code，貼在文章裡，但是覺得有顏色可以更容易看懂，就像在 Framer Studio 裡製作時那樣，所以就變成在 Framer 檔案裡的註解。

• Framer Project: http://share.framerjs.com/q8o3czf73cbn/
• Framer Project: http://share.framerjs.com/zlciv6075m31/ （有顏色的工程版，方便製作過程中可以看到分界）

全部的程式碼截圖

1. basic settings

2. 先做下方「文章內容」區塊

3. 再做中間「分類標題」區塊

4. 最後製作中間「導覽區 navigation bar」區塊

5. 各個區塊的「事件 event」設定

6. Drag 拖曳行為的設定

最後再重複放上專案連結：

• Framer Project: http://share.framerjs.com/q8o3czf73cbn/
• Framer Project: http://share.framerjs.com/zlciv6075m31/ （有顏色的工程版，方便製作過程中可以看到分界）

希望可以對某些有興趣的人有所幫助！

也希望未來在 Framer JS Taiwan 臉書社團中，能有更多的交流與學習，感謝各位。