從設計師角度學習 Framer Part 4:Draggable & Pinchable 物件

恩⋯⋯沒想到 Part 4 離 Part 3 會相隔那麼遠的時間。這中間 Framer 有了許多重大更新,使得前面幾篇的教學有點老舊了,之後會找時間更新一下。

Tutorial 4: Draggable & Pinchable

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

以下是這次的範例:

(Interface Design copyright from PicCollage

教學檔案: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

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

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

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


Like what you read? Give Chris Chen a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.