Animate CC 動畫類型

更新於 發佈於 閱讀時間約 2 分鐘

1. 基本四大類型

AnimateCC的基礎動畫可分為基本四大類型,逐格動畫、形狀補間動畫、傳統(移動)補間動畫、(新的)移動補間動畫,全都是要成為 Animate CC動畫得心應手的必備動畫基礎。

(1)逐格動畫

raw-image

製作方式:依序在要設定內容的時間點上插入關鍵影格,設定更改內容即可。

(2)形狀補間動畫

raw-image

製作方式:
STEP1. 在要設定內容的時間點上插入關鍵影格,設定更改內容。
STEP2. 在二個關鍵影格之間【建立形狀補間】。

(3)傳統(移動)補間動畫

raw-image

製作方式:
STEP1. 準備好要製作傳統捕間動畫的元件,可以新增元件(插入>新增元件)並由元件庫拉入場景;也可以直接點取畫面上的物件傳換成元件(修改>轉換成元件),圖像元件與影片片段元件均可。
STEP2. 依序在要設定不同屬性(尺寸、位置等)的時間點上插入關鍵影格,再更改元件屬性。
STEP3. 在二個關鍵影格之間【建立傳統補間】。

(4)(新的)移動補間動畫

raw-image

製作方式:
STEP1. 直接點取畫面上的物件並【建立移動補間】(按下滑鼠右鍵),並自動建立影片片段元件,影格長度預設為1秒,請自行增加影格長度。
STEP2. 依序在要設定不同屬性(尺寸、位置等)的時間點上插入關鍵影格(選擇全部),再更改元件屬性;也可以在要設定不同屬性(尺寸、位置等)的時間點上直接更改屬性,則會自動產生屬性關鍵影格。

2.移動補間動畫與傳統補間動畫


raw-image

相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果

留言
avatar-img
留言分享你的想法!
avatar-img
哩老師的沙龍
29會員
129內容數
多媒體設計的專業能力養成過程,除了有效率學習軟體之外,更重要的是各個軟體間的整合應用! Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等,相關的整合應用有機會皆會與大家分享喔~
哩老師的沙龍的其他內容
2020/02/05
要構成動畫的二大元素『時間』與『動畫內容』,在Animate中都是仰賴時間軸控制版,動畫內容即是以圖層來構成,而動畫時間的控制就得仰賴時間軸上的『影格』,來進行動畫設計製作與記錄。 1.時間軸 Adobe Animate CC 中的「時間軸」會隨著時間的經過,在圖層與影格中組織並控制文件內容。就像影
Thumbnail
2020/02/05
要構成動畫的二大元素『時間』與『動畫內容』,在Animate中都是仰賴時間軸控制版,動畫內容即是以圖層來構成,而動畫時間的控制就得仰賴時間軸上的『影格』,來進行動畫設計製作與記錄。 1.時間軸 Adobe Animate CC 中的「時間軸」會隨著時間的經過,在圖層與影格中組織並控制文件內容。就像影
Thumbnail
2020/02/05
建立文字打散後的漸層編輯應用,設定製作出文字倒影與陰影素材,進而隨後表現其動畫效果。 STEP1. 在深色背景上建立白色文字並打散二次成圖像,各向上、下複製出另二份文字圖像共三份。 首先選取第二份文字,使用油漆桶工具為第二份文字填入黑白線性漸層(請確認使用油漆桶工具於文字上點一下倒入整體漸層),
Thumbnail
2020/02/05
建立文字打散後的漸層編輯應用,設定製作出文字倒影與陰影素材,進而隨後表現其動畫效果。 STEP1. 在深色背景上建立白色文字並打散二次成圖像,各向上、下複製出另二份文字圖像共三份。 首先選取第二份文字,使用油漆桶工具為第二份文字填入黑白線性漸層(請確認使用油漆桶工具於文字上點一下倒入整體漸層),
Thumbnail
2020/02/05
使用橢圓、矩型、鋼筆工具建立物件基本造型,搭配物件重疊合併的編輯,以及漸層填色技巧,完成仿3D的場景內之球、舞台、光線、陰影等動畫素材物件。 STEP1. 為方便編輯請先設定場景背景色為灰色,選擇填色為黑白放射狀漸層,繪製正圓形無邊框黑白漸層,再使用漸層變形工具調整漸層中心至圓內左上角,放大漸層範圍
Thumbnail
2020/02/05
使用橢圓、矩型、鋼筆工具建立物件基本造型,搭配物件重疊合併的編輯,以及漸層填色技巧,完成仿3D的場景內之球、舞台、光線、陰影等動畫素材物件。 STEP1. 為方便編輯請先設定場景背景色為灰色,選擇填色為黑白放射狀漸層,繪製正圓形無邊框黑白漸層,再使用漸層變形工具調整漸層中心至圓內左上角,放大漸層範圍
Thumbnail
看更多
你可能也想看
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
利用影片片段安排要控制的動畫內容,包括圖片切換顯示動畫,以及各個設定互動控制的按鈕元件,再搭配正確的互動控制程式碼片段,即可完成具動畫效果的動態產品介紹互動設計。  Step1. 點取介紹內容並設定實體名稱『all_mc』。 進入到全部內容元件內,點取上方介紹內容設定實
Thumbnail
利用影片片段安排要控制的動畫內容,包括圖片切換顯示動畫,以及各個設定互動控制的按鈕元件,再搭配正確的互動控制程式碼片段,即可完成具動畫效果的動態產品介紹互動設計。  Step1. 點取介紹內容並設定實體名稱『all_mc』。 進入到全部內容元件內,點取上方介紹內容設定實
Thumbnail
利用影片片段安排要控制的動畫內容,以及各個設定互動控制的按鈕元件,再搭配正確的互動控制程式碼片段,即可完成具動畫效果的畫面切換內容。  Step 1. 場景左側由遮色片控制顯示範圍的所有頁面元件實體名稱為【all_mc】,另外五個按鈕元件實體名稱依序為【b1_btn ~
Thumbnail
利用影片片段安排要控制的動畫內容,以及各個設定互動控制的按鈕元件,再搭配正確的互動控制程式碼片段,即可完成具動畫效果的畫面切換內容。  Step 1. 場景左側由遮色片控制顯示範圍的所有頁面元件實體名稱為【all_mc】,另外五個按鈕元件實體名稱依序為【b1_btn ~
Thumbnail
利用按鈕元件與程式碼片段面板,加入HTML5 Canvas網頁格式的按鈕互動控制javaScript,控制場景上動畫內容的播放,若是有包含漸變動畫內容,則是使用【前往影格並播放gotoAndPlay();】,且可以在關鍵影格上設定影格標籤,用影格標籤來控制播放。  STE
Thumbnail
利用按鈕元件與程式碼片段面板,加入HTML5 Canvas網頁格式的按鈕互動控制javaScript,控制場景上動畫內容的播放,若是有包含漸變動畫內容,則是使用【前往影格並播放gotoAndPlay();】,且可以在關鍵影格上設定影格標籤,用影格標籤來控制播放。  STE
Thumbnail
目標動畫效果:應用影片片段元件與傳統補間動畫,以及多個影片片段元件的組合,包括遮色片動畫技巧,最後結合按鈕元件的使用與停止動作行為,完成互動按鈕的動態效果。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔內場景上各個動畫素材均已各自轉換為
Thumbnail
目標動畫效果:應用影片片段元件與傳統補間動畫,以及多個影片片段元件的組合,包括遮色片動畫技巧,最後結合按鈕元件的使用與停止動作行為,完成互動按鈕的動態效果。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔內場景上各個動畫素材均已各自轉換為
Thumbnail
對於是以相片人物來製作動畫時,當然必需要在Photoshop中事先處裡好每個元件細節,然後再正確匯入Animate中來完成動畫,同樣是需要注意元件變形中心與動畫動作的設定。 目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫,需注意匯入檔案的正確方式,除了元件的準備
Thumbnail
對於是以相片人物來製作動畫時,當然必需要在Photoshop中事先處裡好每個元件細節,然後再正確匯入Animate中來完成動畫,同樣是需要注意元件變形中心與動畫動作的設定。 目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫,需注意匯入檔案的正確方式,除了元件的準備
Thumbnail
對於包含了陰影與倒影的文字內容,若要製作字元移動動畫效果時,同樣面臨元件與圖層眾多的問題,因此善用移動補間動畫新增至『自訂移動預設效果』的方式,即可快速套用自訂的動畫效果,迅速完成多元件的文字動畫效果。 目標動畫效果:利用移動補間動畫與移動編輯器,先設定好一個字元的動畫後
Thumbnail
對於包含了陰影與倒影的文字內容,若要製作字元移動動畫效果時,同樣面臨元件與圖層眾多的問題,因此善用移動補間動畫新增至『自訂移動預設效果』的方式,即可快速套用自訂的動畫效果,迅速完成多元件的文字動畫效果。 目標動畫效果:利用移動補間動畫與移動編輯器,先設定好一個字元的動畫後
Thumbnail
【檢視範例】【下載範例】 應用形狀補間動畫的物件變形特點,再搭配遮色片功能,不需要藉助任何的元件與濾鏡效果,即可完美演繹目標內容的動態呈現。 目標動畫效果:應用形狀補間動畫完成畫線條動畫,以及搭配遮色片呈現內容出現的效果,並細膩設定物件變形與時間點控制,達成繪圖動畫的目地。 使用動畫技巧:形狀補間
Thumbnail
【檢視範例】【下載範例】 應用形狀補間動畫的物件變形特點,再搭配遮色片功能,不需要藉助任何的元件與濾鏡效果,即可完美演繹目標內容的動態呈現。 目標動畫效果:應用形狀補間動畫完成畫線條動畫,以及搭配遮色片呈現內容出現的效果,並細膩設定物件變形與時間點控制,達成繪圖動畫的目地。 使用動畫技巧:形狀補間
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News