每次更新Adobe Xd時，都會發現Adobe Xd在「動態互動效果」這塊上的功能上越來越多，偶爾也有在網路上看到其他人用Xd做出來的介面動態設計，效果真的越來越生動，甚至有些效果讓我有驚豔到
二年多前剛使用Adobe Xd時，它的「動態互動效果」功能在那時還偏弱，印象中只有一些比較簡單的點擊觸發功能而已，沒想到現在Xd的原生「動態互動效果」已經可以做到轉場、滑動、動態動畫…等這種程度了
最近這二個禮拜的假日都待在家防疫，哪都不太能去，就剛好可以靜下心來好好專研了一下Adobe Xd的動態互動效果。在YT上看到一個用Xd做出倒水的教學動畫，看起來蠻有趣的！
(教學連結：https://www.youtube.com/watch?v=S_E63dC-aTA)
就用這個教學影片作延伸，改成將牛奶倒入美式咖啡，變成拿鐵咖啡的動畫 ↓
1.前置：先用鋼筆工具將以下三個物件畫出來，如果懶得畫可以直接上網找找看類似的icon再去微調
＊咖啡的製作步驟請參考下圖(前置-1)
咖啡：先拉出兩個矩形，分別為「咖啡」、「咖啡陰影(顏色要比咖啡深一點)」， 並複製第一張圖的「玻璃杯」，然後同時選取這三個物件後按command(ctrl)+shift+m
＊注意：圖層上到下的順序為玻璃杯→咖啡→咖啡陰影
2.圖a：將前置作業做好的三個物件擺放好
3.圖b：將拉花杯向左傾斜、並在拉花杯的杯口用鋼筆工具畫上些許的牛奶即可
＊注意：圖層上到下的順序為【咖啡→玻璃杯→拉花杯→牛奶】，以下圖b~圖f的圖層順序也皆需一致，這樣最後做成動畫時，畫面才連接的起來
4.圖c：用鋼筆工具將牛奶拉長成倒出來的樣子
5.圖d：用鋼筆工具將咖啡、咖啡陰影改成波浪形，拉長高度至中間水位，並把咖啡、咖啡陰影的顏色調得比圖c淡一階
6.圖e：用鋼筆工具將咖啡的高度拉長至9分滿水位，並把咖啡、咖啡陰影的顏色調得比圖d淡一階
7.圖f：用鋼筆工具將咖啡的高度拉長至全滿水位，並把咖啡、咖啡陰影的顏色調得比圖e淡一階，然後把拉花杯回復到原本的位置，最後可以選擇把牛奶直接刪掉，或是用鋼筆工具把高度拉短藏在咖啡圖層下面
8.後置：最後一步，切換至Prototype，將圖a~圖f通通用「動態互動設定」串連起來就大功告成囉！
＊圖a→圖b，動態互動設定如下圖
＊圖b→圖c、圖c→圖d、圖d→e ，動態互動設定如下圖(這三個互動設定都是一樣的)
＊圖e→圖f，動態互動設定如下圖
看看實際做出來的成果如何吧！
附上完成後的網址(打開網頁後，直接按一下畫面就可以看到互動)：
https://xd.adobe.com/view/7084f61d-5097-4eae-b750-07111d4a4dad-25d7/?fullscreen
Hi~~~dear friends
或許我不認識你，但很開心你能看到最後!
如果看完覺得對這篇有好感的話，歡迎你拍手支持👏👏👏
