今天要教你一個超吸睛的「Canva 出票機動畫效果」，讓優惠券、活動票券從出票機跑出來！這個技巧結合了圖層管理和 Canva 動畫轉場效果，用簡單物件就能製作。
什麼是出票機動畫效果？
出票機動畫效果就是模擬真實出票機吐票的動作，讓票券從一個固定位置慢慢「滑出來」。
- 適合用在：
- 促銷活動宣傳：折扣券、優惠碼領取
- 活動報名頁面：入場票券、會員卡展示
- 社群貼文：限時優惠、抽獎活動
- 限時動態：互動型內容
動態效果比靜態圖更能抓住注意力，並且有互動感，心理上更容易吸引人點擊。
Step. 1｜製作出票機基礎結構
第一步是建立出票機的外觀，是這個設計的必要物件。
建立出票機外框
- 新增一個灰色矩形（出票機的主體）
- 新增一個黑色矩形（出票孔）
- 複製一個灰色矩形放在上方（這是出票機的「上半部」）
重點技巧
－兩個矩形要完全對齊
－出票機上半部可以加上漸層效果，製造立體感
Step. 2｜加入背景底色與分層設計
現在要建立整個畫面的背景結構，這步驟會影響最後的視覺效果。
建立背景底色
- 新增一個全畫面矩形作為背景
- 選擇與主題相符的顏色（例如聖誕節用紅色、促銷用鮮豔色）
- 可以加入紋理或圖案增加豐富度
製作背景上半部
- 另外拉一個矩形，放在畫面上半部
- 這個矩形的顏色要和背景底色一樣
- 位置要與「出票機的上半部」切齊
這個「背景上半部」會遮住票根的上半段，製造出「票根從票孔滑出」的視覺效果。
Step. 3｜設計並放入票根
現在要製作會「吐出來」的票券本身。
製作票根設計
- 票券外框：可直接使用素材，或 Canva 形狀
- 邊框：加上邊框更有質感
- 主視覺：活動主題圖案（我用聖誕樹）
- 文字資訊：折扣內容、使用期限
- 條碼：增加真實感
Step. 4｜調整圖層順序（最關鍵步驟！）
圖層順序決定了動畫效果是否成功，這步驟絕對不能錯！
調整圖層順序
- 選取要調整的元素
- 右鍵點選「圖層」
- 選擇「移至最前」（快捷鍵：Ctrl + Alt + ]）
正確的圖層排列順序
從最上層到最下層應該是以下順序：
| 圖層順序 | 元素名稱 | 說明 |
| 第 1 層 | 出票機上半 | 用途是遮住票根頂部 |
| 第 2 層 | 背景上半 | 用途是遮住票根頂部 |
| 第 3 層 | 票根 | 動畫中要移動的票券 |
| 第 4 層 | 票孔（黑色長條） | 票券滑出的開口 |
| 第 5 層 | 出票機主體 | 出票機的下半部 |
| 第 6 層 | 背景底色 | 整體背景 |
檢查方式
－票根要被「出票機上半」和「背景上半」遮住
－只有票根的下半部露出來
Step. 5｜畫面進階調整與裝飾
基礎結構完成後，現在要美化細節，讓整體更專業。
加入文字元素
- 主標題：「Christmas Sale」「限時優惠」
- 副標題：活動說明或優惠內容
- 裝飾文字：增加氛圍感
票孔漸層效果
為了讓票券更立體，可以在票孔加入漸層：
- 新增一個矩形
- 設定為「100% 到 0%」的灰色漸層
- 方向設為「上到下」
加入裝飾元素
- 背景圖案：如聖誕吊飾、雪花、彩帶
- 光暈效果：讓票根周圍發光
- 邊框裝飾：讓畫面更精緻
Step. 6｜製作動畫效果（關鍵步驟）
現在準備要讓票根動起來了！
- 複製頁面
- 選取第一頁票券（動畫的起始畫面）
- 將票券往上移動（模擬票還沒吐出的狀態）
- 微露一點票券／完全藏進出票機內都可以
- 第二頁票券維持露出的狀態
Step. 7｜設定動畫轉場效果
最後一步，將兩個頁面串連成流暢的動畫。
開啟頁面轉場功能
- 點選右下角「頁面」圖示
- 在兩頁之間新增轉場（＋號下方按鈕）
- 選擇「比對與移動」效果（建議 0.5～1.2 秒）
- 預覽效果，看票根是否順暢滑出
為什麼要用「比對與移動」？
這個轉場效果會自動偵測兩個頁面中「相同元素」的位置變化，然後製作出平滑的移動動畫。
完整流程圖層檢查清單
- 兩個頁面的背景、出票機、裝飾都一樣
- 只有票根的位置不同
- 圖層順序正確（出票機上半 > 背景上半 > 票根 > 票孔 > 出票機 > 背景）
- 票根在第一頁幾乎隱藏，在第二頁露出
- 已設定「比對與移動」轉場
- 轉場時間設定區間為 0.5～1.2 秒
- 預覽動畫流暢無誤
領取免費《入門創作經營資源包》
不只有 Canva 免費課程 帶你學習「對齊、相近、對比、重複」等其他設計原則，讓你能自己進行設計排版；還有 Instagram 風格創作電子書，和免費模板包給你使用！
小提醒
自媒體經營資源包與課程學員皆可免費領取【Canva 創意實驗室】系列中的範本哦！
進階變化玩法
掌握基本技巧後，可以試試這些進階應用。
- 多張票券連續吐出
- 製作 3~4 個頁面
- 每頁增加一張票券
- 設定連續的「比對與移動」轉場
- 來回循環動畫
- 複製頁面形成「收回→吐出→收回」的循環
- 設定為自動播放（或下載 GIF 檔）
- 製作無限循環的動態效果
- 結合其他元素動畫
- 文字彈跳出現
- 背景光暈閃爍
- 裝飾元素飄落
常見問題解決
票根沒有滑出，而是突然出現？
1. 檢查圖層順序
2. 確認「出票機上半」和「背景上半」在票根之上
兩個頁面的元素位置跑掉了？
複製頁面後不小心移動了其他元素，就不會有絲滑轉場，而是會變成淡入效果（從透明→實體）。
複製頁面後不要動到其他元素，最佳解是：動到就重新複製再操作一次。
票根移動方向錯誤？
檢查第一頁和第二頁的票根位置設定是不是相反，可以調整頁面順序。
－第一頁：票根在「上方」（隱藏狀態）
－第二頁：票根在「下方」（露出狀態）
匯出格式建議
建議使用 MP4 影片／GIF 檔案輸出。
結語
恭喜你看完了第一個 Canva 創意實驗室的教學！
出票機動畫效果看起來複雜，但其實只要掌握圖層順序和動畫轉場這兩個核心概念，就能做出專業的動態效果。
- 這個技巧的精髓在於：
- 用遮罩製造視覺錯覺（背景上半部遮住票根）
- 用動畫創造流暢感（比對與移動轉場）
- 用細節提升質感（漸層、裝飾、配色）
好的動畫不是越複雜越好，而是要能清楚傳達訊息，並且在 2-3 秒內抓住觀眾的注意力。
如果這篇教學對你有幫助，歡迎分享給需要的朋友。有任何問題或想學的技巧，也歡迎在下方留言告訴我！
