這次要分享給大家的是，如何讓 Framer 物件可被使用者在畫面上拖曳並且放大縮小。這次的案例就先讓我們跳脫出音樂播放器，來到常見的照片編輯器吧，感謝 PicCollage 贊助它的照片編輯器設計。
以下是這次的範例：
Tutorial 4: Draggable & Pinchable
。。。
教學檔案：https://framer.cloud/hMkPD
。。。
Draggable 可拖曳屬性
專案開啟後，會看到畫面上有兩個物件，分別是 random_image 以及 text_scrap。現在我們要讓 random_image 這物件可被拖曳，只要寫下 ⋯⋯
random_image.draggable.enabled = true
基本上，這就是最重要的ㄧ行，當 draggable.enabled 這屬性被設定為 true 時，就會開啟該 Layer 可被拖曳的屬性。此時試試看，在右手邊的畫面中拖曳圖片。
Draggable with momentum
但是你會發現，當我們放開這物件時，你會感覺到物件會滑行一段距離，那是因爲預設的動量 (momentum) 沒有被關掉。這時可以再打上一行：
random_image.draggable.momentum = false
再拖曳一次看看，你會發現圖片再也不會滑動了。
Draggable without momentum
小測驗：
現在自己試試讓 text_scrap 這個文字圖層物件也被拖曳吧！
Pinchable 放大縮小屬性
“Pinch“ 這個字其實是一個手勢的名稱，Pinchable 則是它的形容詞，中文翻譯成 “放大縮小” 屬性則完全是不正確的，但直翻 ”捏屬性” 也很難懂 … 各位就先將就一下吧 ^^”
好！現在就讓我們加上 Pinchable 這屬性到剛剛那兩個物件吧！聰明的你一定想得到！
random_image.pinchable.enabled = true
text_scrap.pinchable.enabled = true
沒錯就這麼簡單⋯⋯
如果你手邊剛好沒有手機，也想要試試看 Pinch 的效果，你只要到右邊的畫面，按住鍵盤上的 “alt” 不放，你會發現畫面上會多出一個白點，此時只要滑鼠左鍵也按住並且移動滑鼠，就會發現圖片會根據兩點的距離放大縮小囉 !
onDrag 觸發事件進階應用
原則這篇教學已結束，但久久沒發教學，一發就麼短，好像有點過意不去。所以！在這邊多跟大家分享一些 Draggable 的進階應用。
當物件有 Draggable 屬性時，其實我們可以用 Framer 提供的一個 Event 叫做 onDrag 做一些進階的互動設計，此 Event 可以讓我們不斷地偵測物件是否有被拖曳，如果有的話，則發動我們給他的其他指令。
以下是我們想要嘗試的互動設計
當圖片被移動到上下方被按鈕遮住時，上下方的按鈕會自行縮小淡出
首先，必須要在我們腦袋中釐清整個互動的邏輯。要達到這樣的效果，必須先知道 random_image 這物件被拖曳時，他的 Y 會如何變化，當我們可以取得他的動態 Y 時，就可使用它來進行比較。
random_image.onDrag ->
print random_image.y
透過上面的事件，當 random_image 被拖曳時，右邊的畫面會一直出現它的 y 的數值。這樣我們就清楚的知道 onDrag 的事件是有被發動的，確定好了之後，把 print 那行刪掉吧。
random_image.onDrag ->
backBtn.animate
opacity: 0
scale: 0
options:
time: 0.3
curve: Spring
隨後換上 backBtn 這顆按鈕的縮小動畫，到這邊，應該只要你一移動圖片，按鈕就會縮小，接下來就是加上我們 y 座標的判斷式
random_image.onDrag ->
if random_image.y < backBtn.maxY
backBtn.animate
opacity: 0
scale: 0
options:
time: 0.3
curve: Spring
加上 當 random_image 的 y 小於 backBtn 的 y 的最大值（按鈕的最底部），觸發我們的縮小動畫。
random_image.onDrag ->
if random_image.y < backBtn.maxY
backBtn.animate
opacity: 0
scale: 0
options:
time: 0.3
curve: Spring
else
backBtn.animate
opacity: 1
scale: 1
options:
time: 0.3
curve: Spring
最後再附上 else 的條件，好讓我們離開時，按鈕會縮放回來，另外還有一個地方可以加上縮放回來的動畫，那就是當我們把手指頭放開時，可以透過 onDragEnd 來執行。
random_image.onDragEnd ->
backBtn.animate
opacity: 1
scale: 1
options:
time: 0.3
curve: Spring
接下就是把其他按鈕的動畫也加進去後，就會看到以下成果：
延伸挑戰
- 此專案用了最偷懶的方式寫按鈕的狀態，有興趣的朋友可以用 State 相關技巧重寫一遍，減少一堆重複的 code
- 你會發現當圖片透過 Pinch 被放大後，我們的判斷式就會失效，有人是否可以找出解法呢？如果你對解法也有興趣的，歡迎留言問我喔～
好了！這次分享真的就到此結束了！有問題的朋友歡迎在下方留言，也可以到 Framer JS Taiwan 詢問我喔 🙂
衍伸閱讀
本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。
