Claude 動畫教學：用 SVG 製作 Logo、Loading 與動態圖表

Claude 動畫教學可以從一個小作品開始：把 Logo 的線條慢慢畫出來，讓等待中的圓點跳動，或讓簡報裡的長條圖依序出現。這些需求適合用 SVG，也就是以文字描述線條與形狀的向量圖，再放進一個 HTML 網頁檔。完成後能用瀏覽器打開，放大時也能維持線條清晰。

開始時最容易卡住的地方，是只告訴 AI「幫我做得好看一點」。它知道畫面要動，卻不知道動作的順序、時間與用途。把這些條件先寫清楚，比反覆要求重做更容易得到可修改的作品。

這篇會帶你整理第一個動畫的需求，提供 Logo、Loading 與長條圖三組提示詞，再說明修改方式，以及 HTML、MP4、GIF 各適合用在哪裡。第一個目標是完成一個能播放、能暫停、能調整的小動畫。

SVG 動畫適合做什麼？先選一個簡單場景

SVG 是 Scalable Vector Graphics 的縮寫。它用圓形、矩形、路徑與文字組成圖像，瀏覽器可以直接顯示。HTML 負責放置畫面與按鈕，CSS 是控制外觀與動作的樣式規則，JavaScript 則能處理點擊、滑鼠移動等互動。Claude 可以協助產生這些程式，你要負責決定作品的樣子與檢查結果。

對照 MDN 的 SVG 基本形狀說明，先用幾何形狀做作品，很容易指出是哪一個元素要修改。圓點太大、長條太快或線條太細，都有明確的調整對象。

SVG 對圖示、文字、圖表與簡單角色特別實用。寫實人物、複雜材質或大量剪輯的影片，則需要不同的製作流程。把第一版縮小到一個動作，才能分清楚問題出在圖形、節奏或輸出方式。

延伸閱讀：Claude Opus 5.5 能做互動教學頁嗎？從官方 GPS 影片到可驗收的創意編程指南

開始操作：先要求一個能獨立打開的 HTML 檔

在 Claude 對話中說明你要一個完整的 HTML 檔，並要求所有樣式與互動程式放在同一份檔案裡。第一個作品先避免額外字型、外部圖片與需要登入的服務，降低下載後因缺少素材而無法顯示的機會。

Claude 的 Artifacts 是放在對話旁邊、可編輯與分享的作品區。截至 2026 年 10 月 2 日，官方說明區分一般對話作品與付費方案的設計、簡報、文件模板。Artifacts 需要開啟雲端程式執行與檔案建立能力，團隊帳號也可能受管理員設定影響。

若作品出現在設計畫布，可以從 Export 匯出獨立 HTML。若 Claude 直接提供 HTML 附件，就下載該檔案。只拿到程式碼時，請它提供可下載版本，或把完整內容存成 UTF-8 編碼的 .html 檔，再用瀏覽器打開。這三種路徑都以取得完整檔案為終點，按鈕位置則會隨介面變動。

檔案打開後，先確認沒有空白畫面、文字亂碼與橫向捲動。接著重新整理，看動畫是否從預期位置開始。如果第一版連這些條件都不穩，先修正檔案與畫面，再增加新效果。

把動畫需求寫清楚：主體、畫布、動作、順序與輸出

好用的提示詞會告訴 Claude 五件事：畫面主角是誰、放在哪種尺寸、怎麼動、先後順序，以及最後要拿到哪種檔案。下面的表格可以當成自己的需求檢查表，不必使用專業動畫術語才能開始。

把「有質感」換成可觀察的條件，例如「動作結束前放慢」「圓點相隔一小段時間開始」「每次只強調一個元素」。這樣修改時，你和 Claude 才能討論同一件事。

第一組提示詞：Logo 描邊開場

請做一個由簡單幾何線條組成的示範 Logo 開場動畫。
畫布是 16:9，背景深藍，線條淺綠，不使用外部素材。
先用 2 秒把線條畫完，再用 0.5 秒淡入文字「我的品牌」，最後停住。
使用 SVG 與 CSS，提供完整的單一 HTML 檔。
加入重新播放按鈕，手機版不能橫向溢出。
尊重系統的減少動態效果設定，啟用時直接顯示完成畫面。
不要聲音、閃爍、粒子特效或無限循環。

這組提示使用示範 Logo。若要換成自己的品牌，提供有權使用的向量檔，並要求保留形狀與文字。從圖片重新描繪的結果可能和原稿有差異，正式使用前仍要逐一對照。

三種作品的差別：描邊、循環與資料呈現

Logo 描邊的重點是線條如何逐步出現。MDN 的 stroke-dashoffset 說明介紹了描邊虛線起點的偏移量。搭配虛線長度的設定，能讓路徑看起來像被慢慢畫出來。初學者只需要知道它控制「線條露出多少」，不必先手算每條路徑長度。

Loading 指等待中的視覺提示，通常需要循環。三個圓點若同時跳動，很容易像閃爍；把開始時間錯開，讀者比較能看出連續的等待節奏。等待畫面也要有文字，讓動畫關閉時仍能理解狀態。

第二組提示詞：三個圓點的 Loading

請用 SVG 做三個圓點的 Loading 動畫，提供單一 HTML。
三個圓點依序向上移動再落回原位，每個圓點開始時間錯開。
下方顯示「資料整理中」，這是純展示，不發送任何網路請求。
加入播放與暫停按鈕，暫停後保留文字與圓點。
使用柔和色彩，避免快速閃爍，手機上置中顯示。
系統要求減少動態效果時，改成靜態圓點與狀態文字。

動態圖表還有一個額外責任：資料必須正確。假設教學用的三個數值是 20、40、60，動畫可以改變它們出現的順序，但不能改掉比例與標籤。這些數值是示範資料，不能當成真實營運結果。

第三組提示詞：動態長條圖

請製作 SVG 動態長條圖，提供完整的單一 HTML。
使用教學示範資料 A=20、B=40、C=60，標示「示範資料」。
三根長條依序從零長到數值高度，最後停住，不循環。
固定座標刻度，最高刻度為 60，標籤從一開始就可讀。
加入重新播放按鈕、減少動態效果支援，以及文字版資料表。
手機版保留完整標籤，不因縮小而裁掉數字。

圖表的動作應幫讀者看懂資料。若動畫讓數字太晚出現、每次播放都換比例，或必須等十秒才能讀到結論，就應先縮短動作，再考慮增加效果。

修改動畫：一次指出一個對象與一個結果

第一版能播放後，修改指令要保留已經滿意的部分。若一次要求換配色、改版型、加角色與重做節奏，很難知道哪個變更造成新的問題。每次保存一份檔案，確認改善後再繼續。

「把三個圓點的上下移動距離減半，其他設定保持原樣」就比「整體再優雅一點」容易執行。描述清楚對象，也能降低 AI 重寫整個畫面的機會。

如果描述不出位置，截取沒有個資的畫面，圈出要調整的元素，再貼回對話。提供具體畫面能幫助定位，但修改後仍要重新打開檔案，確認實際結果。

動畫完成後，先檢查手機、暫停與減少動態效果

一個能重複使用的作品，需要在不同觀看條件下仍能理解。MDN 的 prefers-reduced-motion 文件說明，網站可以讀取使用者偏好較少動態的設定，據此減少非必要動畫。

請 Claude 在這種設定下直接顯示 Logo 最終畫面、靜態圓點或圖表完整數值。對 Loading 而言，文字要繼續交代等待狀態。對圖表而言，關掉動畫後仍要看得到全部資料。

交付前可以用這份短清單檢查：

• 重新整理後，初始畫面與播放順序符合需求。
• 手機直向觀看沒有橫向捲動，文字與按鈕能操作。
• 暫停或重新播放後，畫面不會消失或重疊。
• 關閉動畫後，作品仍保留必要資訊。
• 圖表比例、文字與品牌形狀能對照原始資料。

這些條件比多加一個特效更能決定作品是否適合交付。若用途只是簡報的短開場，先通過基本檢查，再考慮聲音與互動會比較有效率。

HTML、MP4、GIF 怎麼選？用觀看場景決定

HTML 保留網頁的互動與向量畫面，適合網站、教學工具與可點擊的小作品。若嵌入網站，還要檢查網站平台是否接受自訂 HTML 或嵌入框架，以及頁面樣式是否互相影響。

MP4 是一般影片檔，適合社群、影片剪輯與簡報。可以錄製動畫播放的畫面，再剪掉開始與結束的操作時間。這個過程把互動轉成固定影格，觀眾無法再點按鈕或調整數值。

GIF 適合簡短、無聲、需要直接循環的小動圖，但色彩與檔案大小都有限制。複雜漸層、長片段或細小文字可能變得不清楚。GIF 也不會跟隨網頁的減少動態設定，因此重要資訊應另外提供靜態版本。

先決定作品要出現在哪裡，再設定畫布與時長。如果最後要放進直式社群影片，起初就要求直式構圖，會比完成橫式動畫後再硬裁切容易。

從一個動畫，練到能自行修改與應用

完成第一個作品後，可以再練習相同需求的兩種節奏：較慢的教學版與較短的社群版。固定圖形與配色，只改時間，你會更容易看出動作對觀看感受的影響。

如果想跟著完整實作，AI 郵報學院的 Flash Lesson 09 課程頁列出 SCENE 提示法、八個動畫關鍵詞、六個實戰作品，以及修改與輸出流程。SCENE 把主體、畫布、效果、敘事與輸出整理成五個欄位，適合需要反覆製作小型動畫的人。

Claude 動畫教學常見問題

不會寫程式，也能開始做 SVG 動畫嗎？

可以先讓 Claude 產生完整 HTML，你負責描述需求與檢查結果。認識線條、形狀、尺寸與播放順序，就能做第一輪修改。需要接入正式網站時，仍應請熟悉網站的人檢查整合方式。

一定要使用 Claude Code 嗎？

單檔小動畫可以先從 Claude 對話開始。當作品需要讀取多個檔案、接入既有網站或管理版本，再考慮 Claude Code 等開發工具，會比較符合工作規模。

Claude 產生 HTML，就等於拿到影片了嗎？

HTML 是網頁檔，MP4 是固定播放的影片檔。把網頁動畫交給社群平台前，需要錄製或轉成影片，並檢查比例、時長與畫質。互動按鈕不會跟著保留。

為什麼同一組提示詞，畫面仍可能不同？

生成內容可能在圖形、程式與節奏上出現差異。把想保留的元素、時間與禁止效果寫清楚，能縮小變動範圍。完成一版後，保留檔案並做局部修改，通常比整份重生更容易比較。

結語：先做出一個可交付的小動畫

第一個練習可以選 Logo 描邊，因為它有明確的起點、動作與完成畫面。把檔案保存下來，確認手機顯示、重新播放與靜態版本都正常，再換成自己的圖案或資料。

當你能清楚說出「改哪個元素、變成什麼樣子、哪些部分要保留」，Claude 才能成為可反覆合作的製作工具。這個習慣會一路用到簡報、網站圖表與社群短片。

資料來源

• Claude Help Center：Artifacts 的建立、編輯與匯出
• MDN：SVG 基本形狀
• MDN：CSS 動畫關鍵影格
• MDN：stroke-dashoffset 描邊偏移
• MDN：減少動態效果設定