設計師學習 Framer 第四章:Draggable & Pinchable 物件

這次要分享給大家的是,如何讓 Framer 物件可被使用者在畫面上拖曳並且放大縮小。這次的案例就先讓我們跳脫出音樂播放器,來到常見的照片編輯器吧,感謝 PicCollage 贊助它的照片編輯器設計。

以下是這次的範例:

Framer.js - Draggable & Pinchable 物件

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

Draggable with momentum

 

但是你會發現,當我們放開這物件時,你會感覺到物件會滑行一段距離,那是因爲預設的動量 (momentum) 沒有被關掉。這時可以再打上一行:

random_image.draggable.momentum = false

 

再拖曳一次看看,你會發現圖片再也不會滑動了。

Draggable without momentum

Draggable without momentum

 

小測驗:
現在自己試試讓 text_scrap 這個文字圖層物件也被拖曳吧!

 

Pinchable 放大縮小屬性

“Pinch“ 這個字其實是一個手勢的名稱,Pinchable 則是它的形容詞,中文翻譯成 “放大縮小” 屬性則完全是不正確的,但直翻 ”捏屬性” 也很難懂 … 各位就先將就一下吧 ^^”

好!現在就讓我們加上 Pinchable 這屬性到剛剛那兩個物件吧!聰明的你一定想得到!

random_image.pinchable.enabled = true
text_scrap.pinchable.enabled = true

 

沒錯就這麼簡單⋯⋯
framer_part4_05

如果你手邊剛好沒有手機,也想要試試看 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

 

接下就是把其他按鈕的動畫也加進去後,就會看到以下成果:

framer_part4_06

 

延伸挑戰

  1. 此專案用了最偷懶的方式寫按鈕的狀態,有興趣的朋友可以用 State 相關技巧重寫一遍,減少一堆重複的 code
  2. 你會發現當圖片透過 Pinch 被放大後,我們的判斷式就會失效,有人是否可以找出解法呢?如果你對解法也有興趣的,歡迎留言問我喔~

好了!這次分享真的就到此結束了!有問題的朋友歡迎在下方留言,也可以到 Framer JS Taiwan 詢問我喔 🙂

 

衍伸閱讀

 –

本文章已獲得作者  Chris Chen 授權,原文:從設計師角度學習 Framer Part 4:Draggable & Pinchable 物件

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

如果你也喜歡我們的文章,請 Follow 我們的 Facebook 專頁,每天都會分享許多精選文章!

分享此文: