Animate CC 簡易半側面人物走路動畫

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

檢視範例】【下載範例

對於人物角色的走路動作,首先介紹最輕易可完成的半側面角度,這個角度的動作姿勢是最好表現的,只要準備好角色各肢體的獨立元件,搭配變形中心與傳統補間動畫即可完成。

目標動畫效果:應用影片片段元件表現角色人物的走路,除了元件的準備與安排來表現動作之外,將以傳統補間動畫製作肢體的動作,讓動作更為流暢。
使用動畫技巧:影片片段元件、傳統補間動畫、變形中心。

Step1.
範例檔元件庫中的人物元件,包括頭、手與腳均是以獨立元件與圖層來組合起來。首先進入到人物影片片段元件內,即可看到所有的肢體元件均已分散至個別獨立圖層上。

raw-image

Step2.
使用自由變形工具來改變每個元件製作動畫時需要的變形中心點位置,頭於下巴處、二隻手均於與身體連接處、花於與左手相接處,二隻腳的變形重心請移至約為身體中央處,好讓腳的旋轉更自然。接著影子圖層於影格24插入影格,其餘圖層於影格6、11、14、19、24插入關鍵影格,準備開始調整走路時的各元件角度。

raw-image

Step3.
使用自由變形工具依序旋轉調整每個關鍵影格上各元件,於走路時所該呈現的角度,影格6與19上保持原站姿不動。

raw-image
raw-image

除了影子外,建立影格1-11與14-24間的傳統補間動畫,影格11-14間的安排是要讓該姿勢稍作停留,因此不建立傳統補間動畫。

Step4.
最後回到場景上新增人物圖層於背景圖層之上,置入人物元件於右側場景之外,於影格300處插入關鍵影格,移動人物元件至左側場景之外,建立傳統補間動畫,背景圖層於影格300處插入影格,完成此範例。

raw-image

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

留言
avatar-img
留言分享你的想法!
avatar-img
哩老師的沙龍
29會員
129內容數
多媒體設計的專業能力養成過程,除了有效率學習軟體之外,更重要的是各個軟體間的整合應用! Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等,相關的整合應用有機會皆會與大家分享喔~
哩老師的沙龍的其他內容
2020/02/13
Q版人物通常都是頭大、手短、腳短,因此在跑步時的動作步伐比較小,同樣需要注意手腳與身體元件的配合,搭配傳統補間動畫即可確保跑步動作的流暢。 目標動畫效果:應用影片片段元件表現可愛人物的跑步動作,除了元件的準備與安排來表現動作之外,以傳統補間動畫讓動作更為流暢。 使用動畫技
Thumbnail
2020/02/13
Q版人物通常都是頭大、手短、腳短,因此在跑步時的動作步伐比較小,同樣需要注意手腳與身體元件的配合,搭配傳統補間動畫即可確保跑步動作的流暢。 目標動畫效果:應用影片片段元件表現可愛人物的跑步動作,除了元件的準備與安排來表現動作之外,以傳統補間動畫讓動作更為流暢。 使用動畫技
Thumbnail
2020/02/13
對於是以相片人物來製作動畫時,當然必需要在Photoshop中事先處裡好每個元件細節,然後再正確匯入Animate中來完成動畫,同樣是需要注意元件變形中心與動畫動作的設定。 目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫,需注意匯入檔案的正確方式,除了元件的準備
Thumbnail
2020/02/13
對於是以相片人物來製作動畫時,當然必需要在Photoshop中事先處裡好每個元件細節,然後再正確匯入Animate中來完成動畫,同樣是需要注意元件變形中心與動畫動作的設定。 目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫,需注意匯入檔案的正確方式,除了元件的準備
Thumbnail
2020/02/13
接著將介紹更為細膩的角色跑步動畫,細膩處即是手與腳都各分為二部分,因此無論是各元件的調整與設定都需要更仔細,否則將有元件中途分開的問題。 目標動畫效果:應用影片片段元件表現線條人物的的跑步,除了元件的準備與安排來表現動作之外,手與腳的部分均以二元件組成,所有元件將以傳統補
Thumbnail
2020/02/13
接著將介紹更為細膩的角色跑步動畫,細膩處即是手與腳都各分為二部分,因此無論是各元件的調整與設定都需要更仔細,否則將有元件中途分開的問題。 目標動畫效果:應用影片片段元件表現線條人物的的跑步,除了元件的準備與安排來表現動作之外,手與腳的部分均以二元件組成,所有元件將以傳統補
Thumbnail
看更多
你可能也想看
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
利用影片片段安排要控制的動畫內容,包括圖片切換顯示動畫,以及各個設定互動控制的按鈕元件,再搭配正確的互動控制程式碼片段,即可完成具動畫效果的動態產品介紹互動設計。  Step1. 點取介紹內容並設定實體名稱『all_mc』。 進入到全部內容元件內,點取上方介紹內容設定實
Thumbnail
利用影片片段安排要控制的動畫內容,包括圖片切換顯示動畫,以及各個設定互動控制的按鈕元件,再搭配正確的互動控制程式碼片段,即可完成具動畫效果的動態產品介紹互動設計。  Step1. 點取介紹內容並設定實體名稱『all_mc』。 進入到全部內容元件內,點取上方介紹內容設定實
Thumbnail
目標動畫效果:應用影片片段元件與傳統補間動畫,以及多個影片片段元件的組合,包括遮色片動畫技巧,最後結合按鈕元件的使用與停止動作行為,完成互動按鈕的動態效果。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔內場景上各個動畫素材均已各自轉換為
Thumbnail
目標動畫效果:應用影片片段元件與傳統補間動畫,以及多個影片片段元件的組合,包括遮色片動畫技巧,最後結合按鈕元件的使用與停止動作行為,完成互動按鈕的動態效果。 使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔內場景上各個動畫素材均已各自轉換為
Thumbnail
對於是以相片人物來製作動畫時,當然必需要在Photoshop中事先處裡好每個元件細節,然後再正確匯入Animate中來完成動畫,同樣是需要注意元件變形中心與動畫動作的設定。 目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫,需注意匯入檔案的正確方式,除了元件的準備
Thumbnail
對於是以相片人物來製作動畫時,當然必需要在Photoshop中事先處裡好每個元件細節,然後再正確匯入Animate中來完成動畫,同樣是需要注意元件變形中心與動畫動作的設定。 目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫,需注意匯入檔案的正確方式,除了元件的準備
Thumbnail
對於人物角色的走路動作,首先介紹最輕易可完成的半側面角度,這個角度的動作姿勢是最好表現的,只要準備好角色各肢體的獨立元件,搭配變形中心與傳統補間動畫即可完成。 目標動畫效果:應用影片片段元件表現角色人物的走路,除了元件的準備與安排來表現動作之外,將以傳統補間動畫製作肢體的
Thumbnail
對於人物角色的走路動作,首先介紹最輕易可完成的半側面角度,這個角度的動作姿勢是最好表現的,只要準備好角色各肢體的獨立元件,搭配變形中心與傳統補間動畫即可完成。 目標動畫效果:應用影片片段元件表現角色人物的走路,除了元件的準備與安排來表現動作之外,將以傳統補間動畫製作肢體的
Thumbnail
首先先注重於角色的臉部表情細節的動畫表現,臉部表情之中,眼睛的眨眼算是最重要的,將配合Animate的繪圖功能,快速準備好眨眼所需要的素材內容,最後搭配轉頭動作,角色的動作就更細膩了。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路,除了元件的準備與安排來表現動作
Thumbnail
首先先注重於角色的臉部表情細節的動畫表現,臉部表情之中,眼睛的眨眼算是最重要的,將配合Animate的繪圖功能,快速準備好眨眼所需要的素材內容,最後搭配轉頭動作,角色的動作就更細膩了。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路,除了元件的準備與安排來表現動作
Thumbnail
對於包含了陰影與倒影的文字內容,若要製作字元移動動畫效果時,同樣面臨元件與圖層眾多的問題,因此善用移動補間動畫新增至『自訂移動預設效果』的方式,即可快速套用自訂的動畫效果,迅速完成多元件的文字動畫效果。 目標動畫效果:利用移動補間動畫與移動編輯器,先設定好一個字元的動畫後
Thumbnail
對於包含了陰影與倒影的文字內容,若要製作字元移動動畫效果時,同樣面臨元件與圖層眾多的問題,因此善用移動補間動畫新增至『自訂移動預設效果』的方式,即可快速套用自訂的動畫效果,迅速完成多元件的文字動畫效果。 目標動畫效果:利用移動補間動畫與移動編輯器,先設定好一個字元的動畫後
Thumbnail
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫表現產品出現效果,再搭配形狀補間動畫的遮色片技巧,細膩表現產品的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含了所有將進行動畫的元件(直接由
Thumbnail
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫表現產品出現效果,再搭配形狀補間動畫的遮色片技巧,細膩表現產品的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含了所有將進行動畫的元件(直接由
Thumbnail
【檢視範例】【下載範例】 應用形狀補間動畫的物件變形特點,再搭配遮色片功能,不需要藉助任何的元件與濾鏡效果,即可完美演繹目標內容的動態呈現。 目標動畫效果:應用形狀補間動畫完成畫線條動畫,以及搭配遮色片呈現內容出現的效果,並細膩設定物件變形與時間點控制,達成繪圖動畫的目地。 使用動畫技巧:形狀補間
Thumbnail
【檢視範例】【下載範例】 應用形狀補間動畫的物件變形特點,再搭配遮色片功能,不需要藉助任何的元件與濾鏡效果,即可完美演繹目標內容的動態呈現。 目標動畫效果:應用形狀補間動畫完成畫線條動畫,以及搭配遮色片呈現內容出現的效果,並細膩設定物件變形與時間點控制,達成繪圖動畫的目地。 使用動畫技巧:形狀補間
Thumbnail
【檢視範例】【下載範例】 在Animate動畫中的文字效果,還有中文字依筆畫,書寫出文字內容的文字動畫效果,只要將各筆畫分圖層,再依序以遮色片上的形狀補間動畫或逐格動畫,控制各筆畫出現即可。 目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式,來呈現分圖層的各文字筆畫書寫畫出,加上速度與時間差
Thumbnail
【檢視範例】【下載範例】 在Animate動畫中的文字效果,還有中文字依筆畫,書寫出文字內容的文字動畫效果,只要將各筆畫分圖層,再依序以遮色片上的形狀補間動畫或逐格動畫,控制各筆畫出現即可。 目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式,來呈現分圖層的各文字筆畫書寫畫出,加上速度與時間差
Thumbnail
1. 基本四大類型 AnimateCC的基礎動畫可分為基本四大類型,逐格動畫、形狀補間動畫、傳統(移動)補間動畫、(新的)移動補間動畫,全都是要成為 Animate CC動畫得心應手的必備動畫基礎。 (1)逐格動畫    製作方式:依序在要設定內容的時間點上插入關鍵影格,設定更改內容即可。 (2)
Thumbnail
1. 基本四大類型 AnimateCC的基礎動畫可分為基本四大類型,逐格動畫、形狀補間動畫、傳統(移動)補間動畫、(新的)移動補間動畫,全都是要成為 Animate CC動畫得心應手的必備動畫基礎。 (1)逐格動畫    製作方式:依序在要設定內容的時間點上插入關鍵影格,設定更改內容即可。 (2)
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News