Animate CC Q版騎腳踏車動畫

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

檢視範例】【下載範例

在交通工具中,就屬腳踏車動畫的細節最多,因為除了輪子的轉動外,人物角色二隻腳來踩動腳踏車踏板是最需要注意動畫細節的,其中包括雙腳的動作與踏板的旋轉,雙腳動作需注意變形中心與補間動畫的應用,踏板的旋轉即是要依靠導引線來控制繞圈旋轉,最後搭配場景上場景元件的移動,即可完成騎腳踏車動畫。

目標動畫效果:應用影片片段元件與傳統補間動畫,控制變形中心點位置來表現腳的動作,再搭配導引線控制腳踏車踏板的旋轉,來表現腳踩動腳踏車的動畫細節。
使用動畫技巧:影片片段元件、傳統補間動畫、導引線、變形中心。

Step1.
範例檔場景上是一份尺寸較大的森林場景元件,參考線範圍內即是實際場景尺寸,元件庫中包含了角色人物與腳踏車元件,人物部分雙腳是需要分開個別元件的。

raw-image

首先進入騎腳踏車元件內,每個要設定動畫的元件均已分圖層與轉換成元件,點取前輪轉換成影片片段元件『前輪旋轉』、點取後輪轉換成影片片段元件『後輪旋轉』。分別進入前輪旋轉與後輪旋轉元件內,於影格24插入關鍵影格並建立傳統補間動畫、設定逆時針選轉1圈。

raw-image

Step2.
再次進到騎腳踏車元件內,為所有圖層於影格24處插入關鍵影格,暫時隱藏人物相關元件圖層,於踏板圖層的影格24插入關鍵影格並建立傳統補間動畫,在導引線圖層上按下滑鼠右鍵選擇執行『導引線』,啟動缺口圓形導引線功能並鎖定導引線圖層,移動踏板圖層至導引線圖層下緣使其感應並作用導引線,移動影格1上的踏板元件至導引線缺口下方起點處,移動影格24上的踏板至導引線缺口的上方終點處,完成導引線控制旋轉的踏板。

raw-image

Step3.
繼續在騎腳踏車元件內,顯示所有圖層並依序更改雙腳四元件的變形中心,下半腳變形中心點於膝蓋上、上半腳中心點魚與身體接合處。

raw-image

於四個腳元件圖層的6、12、18、24插入關鍵影格,開始來配合踏板位置設定腳的動作,請使用旋轉與移動來安排影格1、6、12、18上腳元件的正確位置(如圖所示,注意前後腳的相對位置),並複製影格1至影格24,建立四圖層傳統補間動畫,完成腳踩踏板的動畫。

raw-image

Step4.
繼續在騎腳踏車元件內,更改右手元件變形中心於手肘處、頭元件於下巴處,於影格4、8、12插入關鍵影格,旋轉影格4與8上的右手與頭元件,建立影格1-12間傳統補間動畫。

raw-image

回到場景上,新增騎腳踏車圖層於一棵樹圖層之下,置入騎腳踏車元件於右側場景外,為三個圖層於影格240處插入影格。

Step5.
在騎腳踏車圖層上,於影格30、60、120、180、240插入關鍵影格,依序設定元件位置並建立傳統補間動畫。

raw-image
raw-image

繼續為森林圖層於影格240插入關鍵影格,向右移動森林元件至元件左側於場景左側外,最後為一棵樹圖層於影格120、240處插入關鍵影格,移動120上的一棵樹至場景中央、移動影格240上的一棵樹至場景右側外,均建立傳統補間動畫完成此範例。

相關課程 : 優勢多媒體 - 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
這件雕塑放置在台中市豐樂雕塑公園靠近向心路一側,最有趣之處在於:在靜態中表現動感。 將動態手勢和動作濃縮成靜態的作品,是需要高度技巧的。動感的雕塑往往能給觀賞者錯覺,讓人覺得作品中的人物即將開始動作。 動感的雕塑往往意在傳遞雕塑家的情感,好讓觀者產生共鳴。因而動作便是重點
Thumbnail
這件雕塑放置在台中市豐樂雕塑公園靠近向心路一側,最有趣之處在於:在靜態中表現動感。 將動態手勢和動作濃縮成靜態的作品,是需要高度技巧的。動感的雕塑往往能給觀賞者錯覺,讓人覺得作品中的人物即將開始動作。 動感的雕塑往往意在傳遞雕塑家的情感,好讓觀者產生共鳴。因而動作便是重點
Thumbnail
散步時來到彩虹輪狀跑道練習場,看到小朋友在晃晃走路都還搖搖晃晃的時候,就已經可以開始練習滑步車了,樣子真是可愛極了。滑步車的練習可以幫助小朋友鍛鍊平衡感、協調性和肌肉力量,為日後學習騎自行車打下基礎。 這個大人這一直繞著到這整個場地不斷的來回溜著,看起來好瀟灑。不過也替旁邊騎小車子的小朋友擔心,萬
Thumbnail
散步時來到彩虹輪狀跑道練習場,看到小朋友在晃晃走路都還搖搖晃晃的時候,就已經可以開始練習滑步車了,樣子真是可愛極了。滑步車的練習可以幫助小朋友鍛鍊平衡感、協調性和肌肉力量,為日後學習騎自行車打下基礎。 這個大人這一直繞著到這整個場地不斷的來回溜著,看起來好瀟灑。不過也替旁邊騎小車子的小朋友擔心,萬
Thumbnail
除了控制場景上時間軸的影格播放外,更可以控制影片片段元件內時間軸的播放,因此只要影片片段元件安排得當,並正確加上元件實體名稱,就可以做出更有互動性的動畫內容控制安排,請注意在程式碼中需正確完整撰寫由場景至每個影片片段元件的順序。 STEP1. 範例檔中已完成摩托車的動畫
Thumbnail
除了控制場景上時間軸的影格播放外,更可以控制影片片段元件內時間軸的播放,因此只要影片片段元件安排得當,並正確加上元件實體名稱,就可以做出更有互動性的動畫內容控制安排,請注意在程式碼中需正確完整撰寫由場景至每個影片片段元件的順序。 STEP1. 範例檔中已完成摩托車的動畫
Thumbnail
角色的動作還可以是跳躍的方式,類似球拋物線彈跳的方式來表現角色活潑的跳躍動作,讓角色由場景左上角跳躍至場中央,再跳躍至場景右上角,最後再跳躍回原處,由於動作特別,因此每個身上元件都需要仔細的調整。 目標動畫效果:應用影片片段元件表現可愛的角色跳躍動作,除了元件的準備與安排
Thumbnail
角色的動作還可以是跳躍的方式,類似球拋物線彈跳的方式來表現角色活潑的跳躍動作,讓角色由場景左上角跳躍至場中央,再跳躍至場景右上角,最後再跳躍回原處,由於動作特別,因此每個身上元件都需要仔細的調整。 目標動畫效果:應用影片片段元件表現可愛的角色跳躍動作,除了元件的準備與安排
Thumbnail
可愛版的動物走路,最大特色是在於腳的部分將省略因走路而彎曲的動作,而是以短比例的腳來表現可愛風格,所以仍然需要注意走路時腳元件的調整。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路,除了元件的準備與安排來表現動作之外,將以傳統補間動畫讓動作更為流暢。 使用動畫技
Thumbnail
可愛版的動物走路,最大特色是在於腳的部分將省略因走路而彎曲的動作,而是以短比例的腳來表現可愛風格,所以仍然需要注意走路時腳元件的調整。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路,除了元件的準備與安排來表現動作之外,將以傳統補間動畫讓動作更為流暢。 使用動畫技
Thumbnail
對於動物跑步較複雜之處是在四隻腳的動作表現上,包括跑步時的腳彎曲,是不易以補間動畫表現的,因此需藉由預先準備的彎曲腳元件來替換,由於是不同的元件替換,因此僅能以逐格動畫來表現。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的簡易跑步,除了元件的準備與安排表現動作之外,
Thumbnail
對於動物跑步較複雜之處是在四隻腳的動作表現上,包括跑步時的腳彎曲,是不易以補間動畫表現的,因此需藉由預先準備的彎曲腳元件來替換,由於是不同的元件替換,因此僅能以逐格動畫來表現。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的簡易跑步,除了元件的準備與安排表現動作之外,
Thumbnail
在交通工具中,就屬腳踏車動畫的細節最多,因為除了輪子的轉動外,人物角色二隻腳來踩動腳踏車踏板是最需要注意動畫細節的,其中包括雙腳的動作與踏板的旋轉,雙腳動作需注意變形中心與補間動畫的應用,踏板的旋轉即是要依靠導引線來控制繞圈旋轉,最後搭配場景上場景元件的移動,即可完成騎腳
Thumbnail
在交通工具中,就屬腳踏車動畫的細節最多,因為除了輪子的轉動外,人物角色二隻腳來踩動腳踏車踏板是最需要注意動畫細節的,其中包括雙腳的動作與踏板的旋轉,雙腳動作需注意變形中心與補間動畫的應用,踏板的旋轉即是要依靠導引線來控制繞圈旋轉,最後搭配場景上場景元件的移動,即可完成騎腳
Thumbnail
若要表現花飄落的效果,除了落下的軌跡外,最重要的是花在落下的同時是伴隨著細微的旋轉,最後再以導引線控制飄落軌跡與搭配落入水中時的水紋,即可完成! 目標動畫效果:搭配影片片段元件與導引線的使用,加上水紋與移動的安排,來完成花落入水中的各個細節。 使用動畫技巧:影片片段元件、
Thumbnail
若要表現花飄落的效果,除了落下的軌跡外,最重要的是花在落下的同時是伴隨著細微的旋轉,最後再以導引線控制飄落軌跡與搭配落入水中時的水紋,即可完成! 目標動畫效果:搭配影片片段元件與導引線的使用,加上水紋與移動的安排,來完成花落入水中的各個細節。 使用動畫技巧:影片片段元件、
Thumbnail
【檢視範例】【範例下載】 關於逐格動畫最常使用的時機,其實就是當無法以補間動畫方式來呈現的動畫,就得退而求其次的以逐格動畫呈現,即是逐一安排關鍵影格的動畫內容來呈現出動畫,當然就需要搭配適當的變形編輯與動畫內容的準備。 目標動畫效果:由逐格動畫搭配變形編輯與傳統補間動畫導引線,製作蝴蝶循移動軌跡飛
Thumbnail
【檢視範例】【範例下載】 關於逐格動畫最常使用的時機,其實就是當無法以補間動畫方式來呈現的動畫,就得退而求其次的以逐格動畫呈現,即是逐一安排關鍵影格的動畫內容來呈現出動畫,當然就需要搭配適當的變形編輯與動畫內容的準備。 目標動畫效果:由逐格動畫搭配變形編輯與傳統補間動畫導引線,製作蝴蝶循移動軌跡飛
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News