ProtoPie 教學 Day4：牌卡互動實作 (Part.1)
使用 Drag、Chain 與 Condition 觸發，實作類 Tinder 滑卡片的互動。
最終可以做到…
在這章節你會學到
- Start 互動：在場景 (Scene) 開始時，設定元件的樣式。
- Drag 互動：自由地拖曳牌卡，產生相對應的元件回饋。
- Chain 互動：搭配拖曳牌卡，產生角度轉變的回饋。
- Touch Up 、Condition：釋放拖曳的牌卡時，依照條件將卡片滑出。
備註
為了教學更聚焦在互動的設定上，教學內容不帶入太多設計的元素。牌卡拖曳互動： Drag, Chain, Touch Up
建立三張牌卡
先建立三張牌卡，圖層的順序由最上層到最下層分別為：黃 > 橘 > 紅，把他們疊在一起。
並且 Origin 的點設定在 中下位置。
建立 Drag 觸發與 Move 反饋（黃卡）
對著黃卡建立 Drag Trigger，接著設定當黃卡被 Drag 時，黃卡會有 Move Response，移動的方向（Direction）有三種：
- 垂直
- 水平
- 垂直加水平
我們選擇垂直加水平，為了讓使用者在拖曳卡片時可以更自由，因為每個使用者在拖曳時的習慣都不同，如果限制一種方向，反而會讓使用者覺得卡卡的。
如果怕使用者將卡片拖曳到太誇張的位置（例如：上螢幕邊緣），我們可以透過限制（Limit）來設定卡片被拖曳的範圍。這邊就不設定 X 軸的範圍，只限定 Y 軸範圍，因為我們需要透過 X 軸的數值來觸發換卡。
建立 Chain 觸發與 Rotate 反饋（黃卡）
對著黃卡建立 Chain Trigger，建立觸發的方式： Add Trigger > Chain。
當我們設定好 Rotate，會發現旋轉的反應是個範圍，意思就是在黃卡 X 軸數值範圍間，黃卡可以從某角度旋轉至某角度。
這邊卡片拖曳旋轉要拆成向左、向右旋轉）：
向右旋轉，黃卡的 X 軸範圍就是 188 (黃卡原本的 X 軸位置) 至 288(黃卡拖曳 100 )，旋轉角度 15 度。
向左旋轉，黃卡的 X 軸範圍就是 188 (黃卡原本的 X 軸位置) 至 88(黃卡拖曳 -100 )，旋轉角度 -15 度 (旋轉方向設定相同的狀況下就是負的 )。
建立 Touch Up 觸發與 Condition（將黃卡滑出）
我們希望黃卡被拖曳到左邊的某處或是右邊的某處時，放開黃卡就會讓黃卡滑出螢幕。
Touch Up 的觸發點的時機點在於使用者的手指離開螢幕，所以當黃卡片被拖曳到某處時（條件），使用者放開卡片就會讓卡片移動到螢幕外（反饋）。
這種條件的判斷就需要用到 Condition，首先我們要先釐清幾種狀況：
- 拖曳卡片向右 超過某個位置後，放開卡片會讓卡片往右移出螢幕。
- 拖曳卡片向左 超過某個位置後，放開卡片會讓卡片往左移出螢幕。
- 當這張卡片向右、向左都沒超過某範圍，放開卡片則會讓卡片恢復到原本的螢幕位置。
在 Touch Up 的觸發下增加判斷式 (Condition)：
- 當手指離開螢幕時，黃卡的 X 軸超過 288，則移動出螢幕；這邊使用 Move By (400, -10)，讓黃卡往右移動 400 往下移動 10，黃卡向右移出。
- 當手指離開螢幕時，黃卡的 X 軸低於 88，則移動出螢幕；使用 Move By(-400, -10)，讓黃卡往左移動 400 往下移動 10，黃卡向左移出。
- 當手指離開螢幕時，黃卡的 X 軸如果沒有低於 88、高於 288，則回復到原點；特別注意，不需要特別匡列 88<X <288，其實只需要 X 不等於 0 即可。因為這意味著卡片被拖曳 (X 不等於 0)又不滿足滑出螢幕的條件，就會回復到原點 188 的位置。
細節調整：卡片堆疊感
從 Demo 上觀察到，卡片是有角度的堆疊，越往下的卡片越小，而且卡片是可視的。為了達到效果，我們要利用 Scale 改變橘色、紅色卡片大小，並用 Move 達到位移效果。
備註
影片中在 RR 的 Scale 地方在一開始有設定錯誤，因為紅卡片應該是最小的，所以變動的範圍應該是從 85% 到 90%，後來在影片後段有修正。Chain 搭配 Scale 和 Move
如此一來，滑動時下面的牌卡也會隨著移動而放大、位移。
Chain 一樣要分向左、向右時的改變，所以會分成：
- 命名為 OR，黃色向右方向時，橘卡的大小改變、位移改變。
- 命名為 OL，黃色向左方向時，橘卡的大小改變、位移改變。
- 命名為 RR，黃色向右方向時，紅卡的大小改變、位移改變。
- 命名為 RL，黃色向左方向時，紅卡的大小改變、位移改變。
卡片的 Scale 分別為：黃卡 100%、橘卡 90%、紅卡 85%。
所以在黃卡被拖曳的狀態下，橘卡的變動範圍會是 90% 到 97%（故意不讓它變成 100%）；而紅卡則為 85% 到 90%（接續橘卡的大小）。
而卡片的 Move 分別為：黃卡不動、橘卡向下移動 6、紅卡向下移動 12。
所以在黃卡被拖曳的狀態下，橘卡移動的範圍是 Y座標 +6 至 Y 座標；而紅卡則為 Y 座標+12 至 Y 座標 +6。
Touch Up 搭配 Reset
當黃卡滑出螢幕時，要將下一張卡（橘卡）變為原來的大小與位置，這時候可以在 > 288、<88 的條件式下加上橘卡的 Reset ；動畫效果設定成 Spring，這樣就會有彈性的感覺。
備註
Reset 會清除掉所有被改變的狀態，回歸到物件本身的樣式與狀態。所以黃卡滑出螢幕的條件滿足時，我們 Reset 橘色卡片，橘色卡片就變為正常大小並回歸原來的 XY 座標。[預告] Part.2： Jump 創造連續滑卡互動
滑開黃卡之後，接續要讓橘卡、紅卡也能被滑出，我們將透過 Jump 切換至其他 Scene 控制互動，達到連續滑卡片的互動。
其他章節
謝謝您的觀看，歡迎各位在留言區與我交流～
