形狀補間動畫

  1. Adobe Animate 使用手冊
  2. Animate 簡介
    1. Animate 的新功能
    2. 視覺詞彙
    3. Animate 系統需求
    4. Animate 鍵盤快速鍵
    5. 在 Animate 中使用多個檔案類型
  3. 動畫
    1. Animate 中的動畫基本概念
    2. 如何在 Animate 中使用影格及關鍵影格
    3. Animate 中的逐格動畫
    4. 如何在 Animate 中使用傳統補間動畫
    5. 筆刷工具
    6. 移動導引線
    7. 移動補間動畫與 ActionScript 3.0
    8. 關於移動補間動畫
    9. 移動補間動畫
    10. 建立移動補間動畫
    11. 使用屬性關鍵影格
    12. 使用補間動畫將位置製成動畫
    13. 如何使用移動編輯器編輯移動補間動畫
    14. 編輯補間動畫的移動路徑
    15. 操作移動補間動畫
    16. 新增自訂加/減速
    17. 建立和套用移動預設效果
    18. 設定動畫補間動畫範圍
    19. 使用儲存為 XML 檔案的移動補間動畫
    20. 移動補間動畫與傳統補間動畫
    21. 形狀補間動畫
    22. 在 Animate 中使用骨塊工具動畫
    23. 在 Animate 進行角色製作
    24. 如何在 Adobe Animate 中使用遮色片圖層
    25. 如何在 Animate 中使用場景
  4. 互動
    1. 如何使用 Animate 建立按鈕
    2. 將 Animate 專案轉換成其他文件類型格式
    3. 在 Animate 中建立及發佈 HTML5 Canvas 文件
    4. 在 Animate 中使用程式碼片段增加互動功能
    5. 建立自訂 HTML5 組件
    6. 在 HTML5 Canvas 中使用組件
    7. 建立自訂組件:範例
    8. 自訂組件的程式碼片段
    9. 最佳作法 - 使用 Animate 做廣告
    10. 虛擬實境編寫和發佈
  5. 工作區和工作流程
    1. 建立和管理繪圖筆刷
    2. 在 HTML5 Canvas 文件中使用 Google 字體
    3. 使用 Creative Cloud Libraries 和 Adobe Animate
    4. 使用 Animate 的舞台和工具面板
    5. Animate 工作流程和工作區
    6. 在 HTML5 Canvas 文件中使用網頁字體
    7. 時間軸與 ActionScript
    8. 使用多重時間軸
    9. 設定偏好設定
    10. 使用 Animate 編寫面板
    11. 使用 Animate 建立時間軸圖層
    12. 匯出適用於行動裝置應用程式和遊戲引擎的動畫
    13. 移動和複製物件
    14. 範本
    15. Animate 中的尋找和取代
    16. 還原、重做和操作記錄面板
    17. 鍵盤快速鍵
    18. 如何在 Animate 中使用時間軸
    19. 建立 HTML 擴充功能
    20. 影像和 GIF 動畫的最佳化選項
    21. 匯出影像和 GIF 的設定
    22. Animate 中的資源面板
  6. 多媒體和視訊
    1. 在 Animate 中變形及結合圖像物件
    2. 在 Animate 中建立並使用元件實體
    3. 影像描圖
    4. 如何在 Adobe Animate 中使用聲音
    5. 匯出 SVG 檔案
    6. 建立要在 Animate 中使用的視訊檔案
    7. 如何在 Animate 增加視訊
    8. 使用視訊提示點
    9. 使用 Animate 繪製及建立物件
    10. 調整線條和形狀
    11. 使用 Animate CC 中的筆畫、填色和漸層
    12. 使用 Adobe Premiere Pro 和 After Effects
    13. Animate CC 中的色彩面板
    14. 使用 Animate 開啟 Flash CS6 檔案
    15. 在 Animate 中使用傳統文字
    16. 將圖案放入 Animate 中
    17. Animate 中匯入的點陣圖
    18. 3D 圖像
    19. 在 Animate 中使用元件
    20. 使用 Adobe Animate 繪製線條和形狀
    21. 使用 Animate 中的元件庫
    22. 匯出聲音
    23. 在 Animate CC 中選取物件
    24. 在 Animate 中使用 Illustrator AI 檔案
    25. 使用噴刷工具套用圖樣
    26. 套用混合模式
    27. 排列物件
    28. 使用命令選單自動執行工作
    29. 多國語言文字
    30. 使用 Animate 中的攝影機
    31. 搭配使用 Animate 與 Adobe Scout
    32. 使用 Fireworks 檔案
    33. 圖像濾鏡
    34. 聲音和 ActionScript
    35. 繪圖偏好設定
    36. 使用鋼筆工具繪圖
  7. 平台
    1. 將 Animate 專案轉換成其他文件類型格式
    2. 自訂平台支援
    3. 在 Animate 中建立及發佈 HTML5 Canvas 文件
    4. 建立並發佈 WebGL 文件
    5. 如何封裝 AIR for iOS 的應用程式
    6. 發佈 AIR for Android 應用程式
    7. Adobe AIR for Desktop 的發佈功能
    8. ActionScript 發佈設定
    9. 最佳作法 - 在應用程式中組織 ActionScript
    10. 如何搭配使用 ActionScript 與 Animate
    11. 最佳作法 - 輔助功能原則
    12. Animate 工作區中的輔助功能
    13. 撰寫和管理指令碼
    14. 啟用自訂平台的支援
    15. 自訂平台支援概觀
    16. 建立輔助功能內容
    17. 使用自訂平台支援外掛程式
    18. ActionScript 3.0 的除錯
    19. 啟用自訂平台的支援
  8. 匯出與發佈
    1. 如何從 Animate CC 匯出檔案
    2. OAM 發佈
    3. 匯出 SVG 檔案
    4. 使用 Animate 匯出圖像和視訊
    5. 發佈 AS3 文件
    6. 匯出適用於行動裝置應用程式和遊戲引擎的動畫
    7. 匯出聲音
    8. 匯出 QuickTime 視訊檔
    9. 使用 ActionScript 控制外部視訊播放
    10. 最佳作法 - 建立行動裝置內容的秘訣
    11. 最佳作法 - 視訊慣例
    12. 最佳作法 - SWF 應用程式編寫原則
    13. 最佳作法 - 建構 FLA 檔
    14. 最佳化 Animate 的 FLA 檔案的最佳作法
    15. ActionScript 發佈設定
    16. 指定 Animate 的發佈設定
    17. 匯出放映檔
    18. 匯出影像和 GIF 動畫
    19. HTML 發佈範本
    20. 使用 Adobe Premiere Pro 和 After Effects
    21. 快速分享和發佈您的動畫

在形狀補間動畫中,您會先在「時間軸」中的一個特定影格上繪製向量形狀,然後在另一個特定影格上更改該形狀或繪製另一個形狀。Animate 接著會在影格之間補上一個中間形狀,創造某個形狀變化為另一個形狀的動畫。

Animate 讓您可以將形狀補間動畫增加至一致的實色筆畫及非一致的花式筆畫。此外,您也可以將形狀補間動畫增加至使用「變數寬度工具」加深的筆畫。並測試您要使用的形狀,以判斷結果。您可以使用形狀提示點,告知 Animate 起始形狀上的哪個點對應至結束形狀上的特定點。

您也可以在形狀補間動畫中,將形狀的位置和顏色製成補間動畫。

若要將形狀補間動畫套用到群組、實體或點陣圖影像上,請先打散這些元素。若要將形狀補間動畫套用到文字上,必須將文字打散兩次,才能將文字轉換成圖像。請參閱打散元件實體

建立形狀補間動畫

下列步驟將說明如何從「時間軸」的影格 1 到影格 30 建立形狀補間動畫。但是,您可以在「時間軸」中選定的任何部分建立補間動畫。

  1. 在影格 1 中,使用「矩形」工具繪製一個正方形。
  2. 選取位於相同圖層的影格 30,然後選擇「插入 > 時間軸 > 空白關鍵影格」或按 F7,加入空白關鍵影格。

  3. 在「舞台」上,使用「橢圓形」工具在影格 30 中繪製一個圓形。

    現在,包含正方形的影格 1 中有一個關鍵影格,而且包含圓形的影格 30 中也有一個關鍵影格。

  4. 在「時間軸」中,於包含兩個形狀之圖層內的兩個關鍵影格之間選取其中一個影格。

  5. 選擇「插入 > 形狀補間動畫」。

    Animate 會在這兩個關鍵影格之間的所有影格中插補這些形狀。

  6. 若要預覽補間動畫,請在「時間軸」中的所有影格上控制播放磁頭,或按 Enter 鍵。

  7. 除了形狀以外,如果還要製作補間動畫,請將影格 30 中的形狀與影格 1 中的形狀不同的位置。

    按 Enter 鍵預覽動畫。

  8. 若要將形狀的顏色製成補間動畫,請設定影格 1 中的形狀顏色,使其與影格 30 中的形狀顏色不同。
  9. 若要將加/減速加入至補間動畫,請選取其中一個影格,然後在「屬性」檢測器的「加/減速」欄位中輸入值。

    若要在補間動畫的開頭套用加/減速,請輸入負值。若要在補間動畫的結尾套用加/減速,請輸入正值。

建立加/減速預設效果或自訂加/減速

加/減速預設效果是預先設定的加/減速,可套用至舞台上的物件。

形狀補間動畫有一組常用的加/減速預設效果。您可以從加/減速預設效果清單中選取預設效果,然後套用到選取的屬性。此外,您也可以將自訂加/減速套用到形狀補間動畫。

  1. 按一下 Animate 時間軸中包含形狀補間動畫的圖層。

  2. 若要開啟「補間動畫」屬性,請按一下屬性面板中的「補間動畫」類別。

    「補間動畫」屬性
    「補間動畫」屬性

  3. 在「加/減速」類型彈出式對話框中選取加/減速預設效果。按兩下要套用的預設效果類型。 

    如果您選擇套用傳統加/減速,也可以移動滑桿來增加或減少加/減速強度。 

    加/減速預設集的類型
    加/減速預設集的類型

  4. 按一下「加/減速」旁邊的「編輯」圖示,即可套用自訂加/減速。

    「自訂速度」對話方塊會以圖表,顯示動作隨時間移動的程度。水平軸是影格,而垂直軸則代表變化百分比。第一個關鍵影格會以 0% 表示,最後一個關鍵影格則為 100%。

    圖表曲線的傾斜度代表物件的變動速率。當曲線為水平 (沒有傾斜) 時,表示速度為零;當曲線為垂直時,則表示有瞬間的變動速率。

    顯示等速的自訂加/減速度圖表
    顯示等速的自訂加/減速度圖表。在形狀補間動畫中選取影格,然後在「屬性」檢測器的「加/減速」區段中按一下「編輯」按鈕以開啟此對話方塊。

    您可以儲存自訂加/減速度,之後從「自訂」清單選擇即可重複使用。進行變更後,按一下編輯模式中的「儲存並套用」按鈕。在下方螢幕快照中,您可以找到自訂的加/減速預設集,名稱為 MyEase1

    自訂的加/減速預設集
    自訂的加/減速預設集

    您可以透過選取對應的範圍和套用加/減速,在時間軸的多個範圍中使用預設加/減速。

    跨多個範圍的加/減速預設集
    為多個範圍套用加/減速預設集

以形狀提示點控制形狀變更

若要控制更複雜或難度更高的變形效果,可以採用形狀提示點。形狀提示點會識別出在開始和結束形狀中相互對應的點。例如,如果正在將更改表情的臉孔製作成補間動畫,可以使用形狀提示點,標示兩隻眼睛。接著,發生形狀改變時,臉孔將不會糊成一團;眼睛仍然可以辨識得出來,並在轉換時分別改變。

以字母顯示的形狀提示點
以字母顯示的形狀提示點

形狀提示點包含字母 (a 到 z),用來識別在開始和結束形狀中相互對應的點。您最多可以使用 26 個形狀提示點。

形狀提示點會在開始關鍵影格中呈現黃色、在結束關鍵影格中呈現綠色,不在曲線上時則會呈現紅色。

如果要讓形狀補間動畫達到最佳效果,請遵守這些原則:

  • 在複雜的形狀補間動畫中,請建立中間形狀,然後在這些中間形狀之間建立補間動畫,而不僅是定義開始和結束形狀。

  • 請確認形狀提示點是合理的。例如,如果將三個形狀提示點用於一個三角形上,它們在原始三角形和補間動畫三角形上必須具有相同的順序。如果第一個關鍵影格上的順序是 a,b,c,則第二個關鍵影格上的順序不能是 a,c,b

  • 若將形狀提示點從形狀的左上角按逆時針順序放置,可以得到最佳效果。

使用形狀提示點

  1. 在形狀補間動畫的序列中選取第一個關鍵影格。
  2. 選取「修改 > 形狀 > 增加形狀提示點」。起始形狀提示點會以具有字母 a 的紅色圓形,出現在形狀上的某處。

  3. 請將形狀提示點移動到要標記的點上。
  4. 選取補間動畫序列中的最後一個關鍵影格。結束形狀提示點會以具有字母 a 的紅色圓形,出現在形狀上的某處。

  5. 將形狀提示點移動到結束形狀中的某一點上,該點會對應至您先前標記的第一個點。

  6. 若要檢視形狀提示點如何更改形狀補間動畫,再次播放動畫。若要對補間動畫進行細部調整,請移動形狀提示點。
  7. 若要新增更多形狀提示點,請重複執行這個程序。新的提示點會按照字母的順序出現 (如:bc 等等)。

檢視所有形狀提示點

  1. 選取「檢視 > 顯示形狀提示點」。包含形狀提示點的圖層和關鍵影格必須是作用中的圖層和關鍵影格,「顯示形狀提示點」才能使用。

移除形狀提示點

  1. 將它拖曳到舞台之外。

移除所有形狀提示點

  1. 選取「修改 > 形狀 > 移除全部提示點」。

使用變數寬度為筆畫增加形狀補間動畫

Animate 讓您可以使用「變數寬度」為筆畫增加形狀補間動畫。之前,Animate 只支援為實色一致筆畫和形狀建立形狀補間動畫。這使得設計人員無法為非一致筆畫 (例如使用「變數寬度工具」加深的筆畫) 建立形狀補間動畫。使用變數寬度將筆畫製成補間動畫,會大幅擴展在 Animate 內的設計可能性。

將形狀補間動畫增加至花式筆畫,不同於將形狀或實色一致筆畫製成補間動畫。此工作流程會需要您定義補間動畫的開頭和最後形狀,並且 Animate 會建立補間動畫的轉變影格。

關於變數寬度工具

「變數寬度」工具可讓您將一致的實色筆畫加深,以建立優美的花式筆畫。如需有關如何使用「變數寬度工具」加深筆畫的詳細資訊,請參閱使用變數寬度工具加深筆畫和形狀

將形狀補間動畫增加至變數寬度筆畫

  1. 在 Animate CC 中,使用「線段工具」繪製線段。

    筆畫值設定為 2 像素的線段筆畫
    在「舞台」上使用「線段工具」繪製的線段筆畫,並且「筆畫」值設定為 2 像素。

  2. 使用「變數寬度」工具,在筆畫中間增加寬度 (請見下圖)。如需有關使用「變數寬度工具」的詳細資訊,請參閱使用變數寬度工具加深筆畫

    值為 68.0 像素的變數寬度筆畫
    使用「變數寬度工具」建立的變數寬度筆畫,並且「筆畫」值設定為 68.0 像素。

  3. 選取時間軸上的其他影格,例如影格 30,並為補間動畫建立筆畫的最後形狀。

    最後形狀已增加至形狀補間動畫的最後一個關鍵影格
    最後形狀已增加至形狀補間動畫的最後一個關鍵影格。

  4. 以滑鼠右鍵按一下 1 到 30 之間的任何影格,並選取「建立形狀補間動畫」。

將形狀補間動畫增加至變數寬度描述檔

Animate 也可讓您將形狀補間動畫增加至另存為變數寬度描述檔的花式筆畫。您可以將寬度描述檔套用至補間動畫的開頭和最後形狀,並允許 Animate 建立平滑的形狀補間動畫。

寬度描述檔是使用「變數寬度工具」所建立和儲存的花式筆畫,可重複使用。如需有關「寬度描述檔」的詳細資訊,請參閱儲存寬度描述檔

若要將形狀補間動畫增加至變數寬度描述檔,請執行下列動作:

  1. 在 Animate 中,使用「線段工具」在「舞台」上繪製線段。

    值為 2 像素的線段筆畫
    在「舞台」上使用「線段工具」繪製的線段筆畫,並且「筆畫」值設定為 2 像素。

  2. 在「屬性檢測器」中,從「寬度」下拉式清單選取並套用寬度描述檔。

    筆畫值為 68.0 像素的變數寬度筆畫
    使用「變數寬度工具」建立的變數寬度筆畫,並且「筆畫」值設定為 68.0 像素。

  3. 選取時間軸上的其他影格,例如影格 30,並從「屬性檢測器」的「寬度」下拉式清單選取想要的寬度描述檔。

  4. 若要將形狀補間動畫增加至寬度描述檔,請以滑鼠右鍵按一下 1 到 30 之間的任何影格,並選取「建立形狀補間動畫」。

Adobe 標誌

登入您的帳戶