如何使用移動編輯器編輯移動補間動畫

  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 CC 中的「移動編輯器」可協助您花費最少的力氣來建立複雜的移動補間動畫。「移動編輯器」會在一個精簡檢視中以二維圖表顯示套用至所選補間動畫範圍的所有屬性。您可以選擇個別修改每個圖表,以及圖表的對應補間動畫屬性。透過精準的控制項和高度細微性,您可以使用「移動編輯器」讓動畫更加豐富,以模擬真實行為。

關於移動編輯器

「移動編輯器」是為了讓您輕鬆建立複雜的補間動畫所設計的。「移動編輯器」可讓您控制及操作補間動畫的屬性。建立移動補間動畫之後,您可以善加利用「移動編輯器」,精確地優化您的補間動畫。「移動編輯器」讓您可以一次選取並修改一個屬性,以便專注於編輯補間動畫。

為何使用移動編輯器?

「移動編輯器」是為了讓您輕鬆建立複雜的補間動畫所設計的。因此,「移動編輯器」提供補間動畫及其屬性的細部控制項。下列各項只能透過使用「移動編輯器」達成:

  • 在單一面板內輕鬆存取及修改所有套用至補間動畫的屬性。
  • 增加不同加/減速預設效果或自訂預設效果:「移動編輯器」可讓您增加不同預設效果、增加多個預設效果或建立自訂加/減速。為補間動畫的屬性新增加/減速可以輕鬆地模擬物件的真實行為。
  • 產生的曲線:您可以將加/減速套用至個別屬性,並使用「產生的曲線」在個別屬性圖表上查看加/減速的效果。產生的曲線代表實際的補間動畫。
  • 錨點和控制點:您可以使用錨點和控制點來隔離及編輯補間動畫的關鍵區段。
  • 優化的動畫:「移動編輯器」是唯一可以製作特定動畫種類的方法,例如,透過調整屬性曲線,在個別屬性上建立曲線路徑補間動畫。
(A) 套用至補間動畫的屬性 (B)「增加錨點」按鈕 (C)「符合檢視大小」切換 (D)「移除屬性」按鈕 (E) 增加加/減速 (F)「垂直縮放」切換

開啟移動編輯器面板

本文假設您已經建立移動補間動畫,並且使用「移動編輯器」來優化您的補間動畫。如需有關建立移動補間動畫的資訊,請參閱移動補間動畫

若要開啟「移動編輯器」,請執行下列動作:

  1. 在「時間軸」上,選取您要優化的移動補間動畫範圍,並且按兩下補間動畫範圍。此外,您也可以在補間動畫範圍上按一下滑鼠右鍵,並選取「優化補間動畫」以調出「移動編輯器」。

屬性曲線

「移動編輯器」使用一個名為「屬性曲線」的二維圖表來表示補間動畫的屬性。這些圖表是在「移動編輯器」的格線內組成。每個屬性都有專屬的屬性曲線,該曲線是根據水平軸 (從左到右) 上的「時間」,以及垂直軸上「屬性值的變動」而繪製。

您可以在「移動編輯器」內編輯屬性曲線,藉此操作移動補間動畫。到最後,「移動編輯器」有助於順暢地編輯屬性曲線,提供您精確的補間動畫控制能力。您可以新增屬性關鍵影格或錨點來操作屬性曲線。這讓您可以針對希望補間動畫為所述屬性顯示的轉變,操作屬性曲線的關鍵部分。

請注意,「移動編輯器」可讓您只編輯能在補間動畫範圍期間更改的那些屬性。舉例來說,在補間動畫範圍期間,只能為漸層斜角濾鏡的「品質」屬性指派一個值,因此,無法使用「移動編輯器」進行編輯。

(A) 重疊在彼此上方的屬性曲線。(B) 目前所選屬性的焦點屬性曲線。

錨點

「錨點」提供較佳的屬性曲線控制能力,讓您可以明確修改曲線的關鍵部分。您可以在「移動編輯器」中新增屬性關鍵影格或錨點,藉此精確控制大部分曲線的形狀。

「錨點」在格線上顯示為正方形。透過使用「移動編輯器」,您可以為屬性曲線新增錨點或修改其位置,以便控制補間動畫的行為。新增錨點時,會建立「轉角」,而曲線會通過角度。不過,您可以使用控制點的「貝茲」控制項來平滑化屬性曲線的任何線段。

控制點

「控制點」可讓您平滑化或修改錨點任一邊上的屬性曲線。您可以使用標準的「貝茲」控制項來修改「控制點」。

編輯屬性曲線

若要編輯補間動畫的屬性,請執行下列動作:

  1. 在 Animate CC 中,選取補間動畫範圍之後,以滑鼠右鍵按一下選取「優化補間動畫」叫出「移動編輯器」(或者,只要按兩下選取的補間動畫範圍即可)。
  2. 向下捲動並選取您要編輯的屬性。若要反選,請以滑鼠右鍵按一下並選取「反選」。
  3. 出現所選屬性的屬性曲線之後,您可以選擇執行下列動作:
    1. 按一下 按鈕並在「屬性曲線」上按一下想要的影格,以新增錨點。或者,按兩下曲線以新增錨點。
    2. 選取現有錨點並移動 (以任何方向) 到格線上想要的影格中。移動的垂直限制受限於屬性的值範圍。
    3. 選取並按下 Ctrl+按一下 (在 MAC 上則為 Cmd+按一下),以移除錨點。

使用控制點編輯屬性曲線

若要使用「控制點」來編輯屬性曲線,請執行下列動作:

  1. 在 Animate CC 中,選取補間動畫範圍之後,以滑鼠右鍵按一下選取「優化補間動畫」叫出「移動編輯器」(或者,按兩下選取的補間動畫範圍)。
  2. 向下捲動並選取您要編輯的屬性。若要反選,請以滑鼠右鍵按一下並選取「反選」。
  3. 出現所選屬性的屬性曲線之後,您可以選擇執行下列動作:
    1. 按一下 按鈕並在格線內按一下想要的影格,以新增錨點。或者,按兩下曲線以新增錨點。



    2. 選取格線上的現有錨點。
  4. 選取錨點之後,Alt 鍵並垂直拖移,以啟用控制點。您可以修改曲線的形狀,藉由使用貝茲控制項來平滑化轉角線段。 

複製屬性曲線

您也可以在「移動編輯器」內複製屬性間的屬性曲線。

若要複製屬性曲線,請執行下列動作:

  1. 在 Animate CC 中,選取補間動畫範圍之後,以滑鼠右鍵按一下選取「優化補間動畫」叫出「移動編輯器」(或者,按兩下選取的補間動畫範圍)。
  2. 選取您要複製之曲線的屬性,並以滑鼠右鍵按一下選取「複製」,或者按下 Ctrl+C (在 MAC 上則為 Cmd+C)。
  3. 若要以絕對值貼上曲線,請選取您要貼上所複製屬性曲線的屬性,並以滑鼠右鍵按一下選取「貼上」,或者按下 Ctrl+V (在 MAC 上則為 Cmd+V)。
  4. 若要在目標曲線的範圍內貼上曲線,請選取您要將複製的屬性曲線貼到其中的屬性,並以滑鼠右鍵按一下選取「貼上」,以符合目前範圍。

反轉屬性曲線

若要反轉屬性曲線,請執行下列動作:

  1. 在「移動編輯器」中選取屬性。
  2. 以滑鼠右鍵按一下選取「反轉」,以反轉屬性曲線。

套用預設效果和自訂加/減速

加/減速可讓您控制補間動畫的速度,以便產生逼真的動作及令人滿意的效果。在移動補間動畫上套用「加/減速」可讓您操作動畫的開始和結束部分,使物件的移動更為自然。舉例來說,加/減速的常用方式之一,就是在物件的移動路徑兩端增添逼真的加速和減速效果。概括地說,Animate CC 會根據所套用的加/減速來更改屬性值的變動速率。

加/減速可以簡單,也可以複雜。Animate 包含各種您可以套用的預設加/減速,以求簡單或複雜的效果。您也可以為「加/減速」指派「強度」,以加強補間動畫的視覺效果。在「移動編輯器」裡,您也可以建立自己的自訂加/減速曲線。

「移動編輯器」中的加/減速曲線可為複雜曲線,因此您不需要在「舞台」上建立複雜的移動路徑,即可運用曲線在「舞台」上建立複雜的移動。您也可以使用加/減速曲線來建立除了空間屬性 (例如位置 X 和 Y) 以外任何其他屬性的複雜補間動畫。

針對跳躍預設加/減速所繪製的曲線

自訂加/減速

自訂加/減速可讓您使用「移動編輯器」中的「自訂速度」曲線來建立自己的加/減速。然後,您可以將自訂加/減速套用至所選補間動畫的任何屬性。

自訂加/減速圖表表示動作隨時間移動的程度。影格是以水平軸表示,而補間動畫的變動百分比是以垂直軸表示。動畫中的第一個值為 0%,並且最後一個關鍵影格可以設定為 0 到 100%。補間動畫的實體的變動速率是根據圖表曲線的傾斜度來顯示。如果您在圖表上建立水平線 (沒有傾斜度),則速度為零;如果在圖表上建立垂直線,則表示有瞬間的變動速率。

將加/減速曲線套用到屬性曲線

若要為補間動畫的屬性新增加/減速,請執行下列動作:

  1. 在「移動編輯器」中,選取您要套用加/減速的屬性,然後按一下「增加加/減速」按鈕,以顯示「加/減速」面板。
  2. 在「加/減速」面板上,您可以選擇:
    1. 從左邊窗格選取預設效果,以套用預設加/減速。在「加/減速」欄位中輸入值,以指定加/減速強度。
    2. 選取左邊窗格的「自訂加/減速」並修改加/減速曲線,以建立自訂加/減速。如需詳細資訊,請參閱建立並套用自訂加/減速曲線
  3. 按一下「加/減速」面板外任何一處,關閉面板。請注意,「增加加/減速」按鈕會讀取您套用到屬性的加/減速名稱。

建立並套用自訂加/減速曲線

若要建立自訂加/減速以套用到補間動畫的屬性,請執行下列動作:

  1. 在「移動編輯器」中,選取您要套用自訂加/減速的屬性,然後按一下「增加加/減速」按鈕,以顯示「加/減速」面板。
  2. 在「加/減速」面板上,您可以依照下列方式修改預設的自訂加/減速曲線:
    1. 按下 Alt+按一下,在曲線上新增錨點。進一步地,您可以將這些點移到格線上任何想要的點上。
    2. 啟用錨點上的控制點 (在錨點上按 Alt 鍵並按一下),可平滑化錨點其中一端的曲線線段。
  3. 在「加/減速」面板外按一下,關閉面板。請注意,「增加加/減速」按鈕會讀取「自訂」,表示您已將「自訂加/減速」套用到屬性。

複製加/減速曲線

若要複製加/減速曲線,請執行下列動作:

  1. 在「加/減速」面板上,選取您要複製的加/減速曲線,並按下 Ctrl+C (在 MAC 上則為 Cmd+C)。
  2. 選取您要將複製的加/減速曲線貼到其中的屬性,並按下 Ctrl+V (在 MAC 上則為 Cmd+V)。

將加/減速套用到多個屬性

您現在可以將預設或自訂的加/減速套用到屬性群組。「移動編輯器」會以階層方式將屬性組織成屬性群組和子屬性。您可以在這個階層內,選擇將任何層級的加/減速套用到個別屬性或屬性群組。

請注意,將加/減速套用到屬性群組之後,您就可以繼續個別編輯子屬性。這也表示,您可以將不同的加/減速 (不同於群組的加/減速) 套用到子屬性。

若要將加/減速套用到多個屬性,請執行下列動作:

  1. 在「移動編輯器」中,選取「屬性群組」,然後按一下「增加加/減速」按鈕,以顯示「加/減速」面板。
  2. 在「加/減速」面板中,選取「預設加/減速」或建立自訂加/減速。在「加/減速」面板之外任何地方按一下,在「屬性群組」上套用選取的加/減速。

產生的曲線

屬性曲線一旦套用了加/減速曲線,格線上就會出現視覺重疊效果,稱為「產生的曲線」。產生的曲線代表套用至屬性曲線的實際加/減速效果,表明補間動畫物件的最後動畫。此產生的曲線可讓您在測試動畫時,更容易了解在「舞台」上看到的效果。

(A) 套用至位置 X 屬性之彈入預設加/減速的產生曲線。

控制移動編輯器的顯示

在「移動編輯器」中,您可以控制讓哪一個屬性曲線出現進行編輯,以及每一個屬性曲線的顯示大小。顯示大尺寸的屬性曲線讓您編輯起來更輕鬆。

  • 新版「移動編輯器」只會顯示套用到補間動畫的那些屬性。
  • 您可以使用「符合檢視大小」切換 (),讓「移動編輯器」符合時間軸的寬度。
  • 您可以調整「移動編輯器」的大小,並使用「時間軸縮放」控制項來選擇顯示較少影格 () 或較多影格 ()。此外,您也可以使用滑桿,為「移動編輯器」設定適用的檢視。
  • 「移動編輯器」還配備垂直縮放切換。您可以使用「垂直縮放」,顯示「移動編輯器」內適用的屬性值範圍。放大顯示也可讓您將焦點放在屬性曲線並更精準地進行編輯。
  • 根據預設,「屬性」會以展開的狀態出現在「移動編輯器」左邊窗格。不過,按一下屬性名稱即可收合下拉式清單。

鍵盤快速鍵

按兩下屬性曲線,可新增錨點。

Alt 鍵並拖移錨點,可啟用控制點。

Alt 鍵並拖移可操作選取的控制點 (一端編輯)。

Alt+按一下錨點,可停用控制點 (轉折點)。

Shift 鍵並拖移可以線性方向移動錨點。

Command/Control+按一下可刪除錨點。

向上鍵/向下鍵可垂直移動選取的錨點。

Command/Control+C/V 可複製/貼上選取的曲線。

Command/Control+R 可反轉選取的曲線。

Command/Control 並捲動可放大/縮小顯示。

Adobe 標誌

登入您的帳戶