Animate CC Q版側面跑步動畫

閱讀時間約 1 分鐘
Q版人物通常都是頭大、手短、腳短,因此在跑步時的動作步伐比較小,同樣需要注意手腳與身體元件的配合,搭配傳統補間動畫即可確保跑步動作的流暢。
目標動畫效果:應用影片片段元件表現可愛人物的跑步動作,除了元件的準備與安排來表現動作之外,以傳統補間動畫讓動作更為流暢。
使用動畫技巧:影片片段元件、傳統補間動畫、變形中心。
Step1.
範例檔元件庫中的人物元件包括頭、手、身體與腳均為獨立元件與獨立圖層所組成,眼睛眨眼元件是同5-5-1的眨眼元件製作方式準備的。
進入人物元件內,使用自由變形工具來改變每個元件製作動畫時需要的變形中心點位置,頭於下巴處、二隻手及腳於與身體連接處。
Step2.
繼續在人物元件內,影子圖層於影格12插入影格,其餘圖層於影格4、7、10、12插入關鍵影格,依序設定各關鍵影格上的元件移動與旋轉,來表現較細膩的跑步姿勢。
Step3.
全部圖層建立傳統補間動畫,完成人物元件。最後回到場景上,新增人物圖層,並置入人物元件於場景左側外,至影格120處插入關鍵影格並移動人物至場景右側外,建立傳統補間動畫完成此範例。
即將進入廣告,捲動後可繼續閱讀
為什麼會看到廣告
avatar-img
29會員
161內容數
藉由Animate CC製作網頁上的動畫,並發佈成HTML5+CANVAS+JAVASCRIPT格式,已是最有效率設計製作專業網頁動畫效果的方式,筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧,歡迎一起讓網頁上的內容動起來!
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
哩老師的沙龍 的其他內容
對於是以相片人物來製作動畫時,當然必需要在Photoshop中事先處裡好每個元件細節,然後再正確匯入Animate中來完成動畫,同樣是需要注意元件變形中心與動畫動作的設定。 目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫,需注意匯入檔案的正確方式,除了元件的準備
接著將介紹更為細膩的角色跑步動畫,細膩處即是手與腳都各分為二部分,因此無論是各元件的調整與設定都需要更仔細,否則將有元件中途分開的問題。 目標動畫效果:應用影片片段元件表現線條人物的的跑步,除了元件的準備與安排來表現動作之外,手與腳的部分均以二元件組成,所有元件將以傳統補
角色的動作還可以是跳躍的方式,類似球拋物線彈跳的方式來表現角色活潑的跳躍動作,讓角色由場景左上角跳躍至場中央,再跳躍至場景右上角,最後再跳躍回原處,由於動作特別,因此每個身上元件都需要仔細的調整。 目標動畫效果:應用影片片段元件表現可愛的角色跳躍動作,除了元件的準備與安排
對於人物角色的走路動作,首先介紹最輕易可完成的半側面角度,這個角度的動作姿勢是最好表現的,只要準備好角色各肢體的獨立元件,搭配變形中心與傳統補間動畫即可完成。 目標動畫效果:應用影片片段元件表現角色人物的走路,除了元件的準備與安排來表現動作之外,將以傳統補間動畫製作肢體的
首先先注重於角色的臉部表情細節的動畫表現,臉部表情之中,眼睛的眨眼算是最重要的,將配合Animate的繪圖功能,快速準備好眨眼所需要的素材內容,最後搭配轉頭動作,角色的動作就更細膩了。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路,除了元件的準備與安排來表現動作
可愛版的動物走路,最大特色是在於腳的部分將省略因走路而彎曲的動作,而是以短比例的腳來表現可愛風格,所以仍然需要注意走路時腳元件的調整。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路,除了元件的準備與安排來表現動作之外,將以傳統補間動畫讓動作更為流暢。 使用動畫技
對於是以相片人物來製作動畫時,當然必需要在Photoshop中事先處裡好每個元件細節,然後再正確匯入Animate中來完成動畫,同樣是需要注意元件變形中心與動畫動作的設定。 目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫,需注意匯入檔案的正確方式,除了元件的準備
接著將介紹更為細膩的角色跑步動畫,細膩處即是手與腳都各分為二部分,因此無論是各元件的調整與設定都需要更仔細,否則將有元件中途分開的問題。 目標動畫效果:應用影片片段元件表現線條人物的的跑步,除了元件的準備與安排來表現動作之外,手與腳的部分均以二元件組成,所有元件將以傳統補
角色的動作還可以是跳躍的方式,類似球拋物線彈跳的方式來表現角色活潑的跳躍動作,讓角色由場景左上角跳躍至場中央,再跳躍至場景右上角,最後再跳躍回原處,由於動作特別,因此每個身上元件都需要仔細的調整。 目標動畫效果:應用影片片段元件表現可愛的角色跳躍動作,除了元件的準備與安排
對於人物角色的走路動作,首先介紹最輕易可完成的半側面角度,這個角度的動作姿勢是最好表現的,只要準備好角色各肢體的獨立元件,搭配變形中心與傳統補間動畫即可完成。 目標動畫效果:應用影片片段元件表現角色人物的走路,除了元件的準備與安排來表現動作之外,將以傳統補間動畫製作肢體的
首先先注重於角色的臉部表情細節的動畫表現,臉部表情之中,眼睛的眨眼算是最重要的,將配合Animate的繪圖功能,快速準備好眨眼所需要的素材內容,最後搭配轉頭動作,角色的動作就更細膩了。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路,除了元件的準備與安排來表現動作
可愛版的動物走路,最大特色是在於腳的部分將省略因走路而彎曲的動作,而是以短比例的腳來表現可愛風格,所以仍然需要注意走路時腳元件的調整。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路,除了元件的準備與安排來表現動作之外,將以傳統補間動畫讓動作更為流暢。 使用動畫技
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
又到了一個月結束,暑假沒有想像中的用功,這一次畫的是引導線和元件腳色的圖層
Thumbnail
資源彎曲工具,終於要來做一隻會動的貓咪。
Thumbnail
電腦有點反應遲鈍,而且雲朵如果要加上模糊的濾鏡,就一定要重開軟體才看的到效果。
Thumbnail
看了一些動畫學習者的心路過程,有些有文字的習慣,就是把自己的發想寫成部落格,或是寫一些學習的體驗。
Thumbnail
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
Thumbnail
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站,以及安裝和放置遊戲中的簡易流程。
Thumbnail
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法,藉由連結程式腳本和動畫編輯器,讓動畫更靈活的運作。
Thumbnail
這篇文章將會講述 Animation 在設定後要如何使用程式觸發,並不介紹直接使用的 Animation,並簡易提到 Animator 的連結教學。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
又到了一個月結束,暑假沒有想像中的用功,這一次畫的是引導線和元件腳色的圖層
Thumbnail
資源彎曲工具,終於要來做一隻會動的貓咪。
Thumbnail
電腦有點反應遲鈍,而且雲朵如果要加上模糊的濾鏡,就一定要重開軟體才看的到效果。
Thumbnail
看了一些動畫學習者的心路過程,有些有文字的習慣,就是把自己的發想寫成部落格,或是寫一些學習的體驗。
Thumbnail
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
Thumbnail
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站,以及安裝和放置遊戲中的簡易流程。
Thumbnail
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法,藉由連結程式腳本和動畫編輯器,讓動畫更靈活的運作。
Thumbnail
這篇文章將會講述 Animation 在設定後要如何使用程式觸發,並不介紹直接使用的 Animation,並簡易提到 Animator 的連結教學。