這次要分享給大家的是,如何讓 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 詢問我喔 🙂
衍伸閱讀
本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知。