Animate CC 花飄落水中動畫

更新 發佈閱讀 3 分鐘
raw-image

檢視範例】【下載範例

若要表現花飄落的效果,除了落下的軌跡外,最重要的是花在落下的同時是伴隨著細微的旋轉,最後再以導引線控制飄落軌跡與搭配落入水中時的水紋,即可完成!

目標動畫效果:搭配影片片段元件與導引線的使用,加上水紋與移動的安排,來完成花落入水中的各個細節。
使用動畫技巧:影片片段元件、傳統補間動畫、移動補間動畫、導引線。

Step1.
範例檔元件庫中包含花朵與白圈二元件。新增影片片段元件『花朵旋轉』,置入花朵元件於中心並建立移動補間動畫,分別於影格10、20、30插入關鍵影格(全部),於影格20與30上使用『變形工具』略微旋轉花朵元件。

raw-image

Step2.
回到場景上,新增花朵旋轉圖層並置入花朵旋轉元件於右上角樹枝上,於影格90插入關鍵影格移動花朵至水面上並建立傳統補間動畫,背景圖層於影格90插入影格。

raw-image

新增花朵旋轉圖層的導引線圖層,使用鉛筆工具繪製花朵落下的軌跡,移動前後關鍵影格上的花朵元件使其中心點吸附導引線,完成花朵的導引線動畫。

Step3.
新增水面花朵圖層,於影格90處插入關鍵影格並置入『花朵』元件使其對齊花朵旋轉元件的位置,移動關鍵影格90至91處,再於影格120處插入關鍵影格,背景圖層於影格130處插入影格。向下移動影格130上的花朵並設定 Alpha:0,建立傳統補間動畫,設定訂加減速:100;

raw-image

在影格100處於水面花朵圖層上插入關鍵影格,使用變形工具向左轉正花朵,完成花朵沈入水中。

raw-image

Step4.
新增影片片段元件『水紋』,置入白圈元件並於影格5、20插入關鍵影格,設定影格1上的白圈Alpha:0、放大影格20上的白圈並設定Alpha:0,建立傳統補間動畫,設定影格5-20間加減速:100。向上新增四個圖層,反選圖層1上所有影格並移動複製至上方圖層上(按住Alt),成5個影格時間差的安排。

raw-image

Step5.
回到場景上,新增水紋圖層於水面花朵圖層之下,並於影格91處插入關鍵影格,置入水紋元件於水面花朵下方,壓扁變形並設定Alpha:30%,完成此範例效果。

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
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
在 After Effects 中,彈跳效果(Bounce Expression)可以讓層看起來像是受到彈簧或重力的影響,常用於創建自然的運動效果。這些表達式可以應用於位置(Position)、比例(Scale)、透明度(Opacity)等屬性。
Thumbnail
在 After Effects 中,彈跳效果(Bounce Expression)可以讓層看起來像是受到彈簧或重力的影響,常用於創建自然的運動效果。這些表達式可以應用於位置(Position)、比例(Scale)、透明度(Opacity)等屬性。
Thumbnail
音樂可以Free Style, 舞蹈可以Free Style 足球也有Free Style,花式足球。 花道也有Free style,自由花。 自由花,可以利用身邊隨手可得的器物、依據自己的想法、美感即興發揮、自由創作。 因此,人人都能插花。 只是,想插出有意境、有深度、既能呈現自己的想法,又能令人
Thumbnail
音樂可以Free Style, 舞蹈可以Free Style 足球也有Free Style,花式足球。 花道也有Free style,自由花。 自由花,可以利用身邊隨手可得的器物、依據自己的想法、美感即興發揮、自由創作。 因此,人人都能插花。 只是,想插出有意境、有深度、既能呈現自己的想法,又能令人
Thumbnail
除了控制場景上時間軸的影格播放外,更可以控制影片片段元件內時間軸的播放,因此只要影片片段元件安排得當,並正確加上元件實體名稱,就可以做出更有互動性的動畫內容控制安排,請注意在程式碼中需正確完整撰寫由場景至每個影片片段元件的順序。 STEP1. 範例檔中已完成摩托車的動畫
Thumbnail
除了控制場景上時間軸的影格播放外,更可以控制影片片段元件內時間軸的播放,因此只要影片片段元件安排得當,並正確加上元件實體名稱,就可以做出更有互動性的動畫內容控制安排,請注意在程式碼中需正確完整撰寫由場景至每個影片片段元件的順序。 STEP1. 範例檔中已完成摩托車的動畫
Thumbnail
角色的動作還可以是跳躍的方式,類似球拋物線彈跳的方式來表現角色活潑的跳躍動作,讓角色由場景左上角跳躍至場中央,再跳躍至場景右上角,最後再跳躍回原處,由於動作特別,因此每個身上元件都需要仔細的調整。 目標動畫效果:應用影片片段元件表現可愛的角色跳躍動作,除了元件的準備與安排
Thumbnail
角色的動作還可以是跳躍的方式,類似球拋物線彈跳的方式來表現角色活潑的跳躍動作,讓角色由場景左上角跳躍至場中央,再跳躍至場景右上角,最後再跳躍回原處,由於動作特別,因此每個身上元件都需要仔細的調整。 目標動畫效果:應用影片片段元件表現可愛的角色跳躍動作,除了元件的準備與安排
Thumbnail
可愛版的動物走路,最大特色是在於腳的部分將省略因走路而彎曲的動作,而是以短比例的腳來表現可愛風格,所以仍然需要注意走路時腳元件的調整。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路,除了元件的準備與安排來表現動作之外,將以傳統補間動畫讓動作更為流暢。 使用動畫技
Thumbnail
可愛版的動物走路,最大特色是在於腳的部分將省略因走路而彎曲的動作,而是以短比例的腳來表現可愛風格,所以仍然需要注意走路時腳元件的調整。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路,除了元件的準備與安排來表現動作之外,將以傳統補間動畫讓動作更為流暢。 使用動畫技
Thumbnail
對於動物跑步較複雜之處是在四隻腳的動作表現上,包括跑步時的腳彎曲,是不易以補間動畫表現的,因此需藉由預先準備的彎曲腳元件來替換,由於是不同的元件替換,因此僅能以逐格動畫來表現。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的簡易跑步,除了元件的準備與安排表現動作之外,
Thumbnail
對於動物跑步較複雜之處是在四隻腳的動作表現上,包括跑步時的腳彎曲,是不易以補間動畫表現的,因此需藉由預先準備的彎曲腳元件來替換,由於是不同的元件替換,因此僅能以逐格動畫來表現。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的簡易跑步,除了元件的準備與安排表現動作之外,
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News