Adobe XD教學【入門】自動動畫

今天astralweb要與大家分享Adobe XD原型模式中的自動動畫功能，一起來看看吧!

※本教學使用AdobeXD V41.1.12製作。

※操作本教學前建議看看之前的其他篇喔

1.開啟我們已完成的XD畫面

2.另外開啟3個相同尺寸的畫板

3.我們要將選單、圖片、文字製作成不同出場順序的動態效果，因此先將畫板1的選單、圖片、文字調整至出場前的狀態

4.然後複製畫板1的全部物件，並在畫板2貼上

5.將畫板2的選單調整至選單出場後的狀態

6.然後複製畫板2的全部物件，並在畫板3貼上

7.將畫板3的圖片調整至選單出場後的狀態

8.然後複製畫板3的全部物件，並在畫板4貼上

9.將畫板4的文字及按鈕調整至出場後的狀態

10.接著切換到原型模式

11.選擇畫板1並連結至畫板2

12.為了觀看到完整出場動畫所以先設定觸發為時間並延遲3秒，類型選擇自動動畫

13.選擇畫板2並連結至畫板3

14.延遲設定0秒，類型選擇自動動畫，持續時間為0.8秒

15.選擇畫板3並連結至畫板4，一樣延遲設定0秒，類型選擇自動動畫，持續時間為0.8秒

16.這樣就完成囉！