Animate CC 畫線與色塊變形繪圖動畫

更新於 發佈於 閱讀時間約 3 分鐘
應用形狀補間動畫的物件變形特點,再搭配遮色片功能,不需要藉助任何的元件與濾鏡效果,即可完美演繹目標內容的動態呈現。
目標動畫效果:應用形狀補間動畫完成畫線條動畫,以及搭配遮色片呈現內容出現的效果,並細膩設定物件變形與時間點控制,達成繪圖動畫的目地。
使用動畫技巧:形狀補間動畫、變形編輯、時間軸圖層內容控制。
Step1.
在範例檔中首先僅顯示邊框圖層、暫時隱藏其他圖層,點取左側邊框線並剪下,新增邊框1圖層,在該圖層上執行『編輯 > 在原地貼上』原位置貼上左側邊框於邊框1圖層上,相同方式請依序剪下下方邊框原位置貼至新增的邊框2圖層,剪下右側邊框並原位置貼上新增的邊框3圖層,最後邊框圖層名稱改為邊框4,完成四邊框分散至四獨立圖層的整理準備。
Step2.
暫時隱藏邊框2-4,於邊框1的影格6插入關鍵影格,移動播放磁頭至影格1選取邊框下半部並直接刪除成僅留下上方短的邊框,建立形狀補間動畫完成由上至下畫線動畫。
顯示邊框2圖層,選取並移動關鍵影格至影格7處,於邊框2的影格12插入關鍵影格,移動播放磁頭至影格6選取邊框右半部並直接刪除成僅留下左方短的邊框,建立形狀補間動畫完成由左至右畫線動畫。
顯示邊框3圖層,選取並移動關鍵影格至影格13處,於邊框3的影格18插入關鍵影格,移動播放磁頭至影格13選取邊框上半部並直接刪除成僅留下下方短的邊框,建立形狀補間動畫完成由下至上畫線動畫。
顯示邊框4圖層,選取並移動關鍵影格至影格19處,於邊框4的影格24插入關鍵影格,移動播放磁頭至影格19選取邊框左半部並直接刪除成僅留下右方短的邊框,建立形狀補間動畫完成由右至左畫線動畫。
Step3.
至影格100處為四個邊框圖層均插入影格,完成邊框繪製動畫並鎖定完成的四邊框圖層。顯示填色圖層並移動關鍵影格至影格24處,於影格36處插入關鍵影格、影格100處插入影格,移動播放磁頭至影格24,點取填色物件並等比例縮小至最小(按住Shift),建立影格24-36間的形狀補間,完成矩型色塊放大動畫並鎖定填色圖層。
Step4.
顯示內容圖層並移動關鍵影格至影格36處,於影格100處插入影格。新增空白圖層於內容圖層之上並命名為遮色片,於影格36處插入關鍵影格,使用橢圓工具繪製紅色填色無邊框的正圓形於門把上,做為遮色片內容。
至影格50處插入關鍵影格,使用變形工具等比例放大(Shift)圓形至可完全覆蓋內容圖層,建立影格36-50間的形狀補間動畫,設定遮色片圖層的遮色片功能,完成以遮色片控制顯示內容的動畫。
Step5.
顯示『門框線』、『門』、『內容挖去門』、『漸層光』四圖層,並移動四圖層關鍵影格至影格60處,在遮色片與內容二圖層的影格60處『插入空白關鍵影格』來中斷二圖層內容的顯示,即是影格60後改以上方圖層內容為主。為『門框線』、『門』、『內容挖去門』、『漸層光』四圖層影格100處插入影格。
Step6.
於『門』圖層的影格75處插入關鍵影格,顯示『影子』圖層並移動影子圖層關鍵影格至影格75處,於影格100處插入影格。點取門圖層的關鍵影格75,使用變形工具的扭曲變形,扭曲門的右上角與右下角,讓右下角與影子位置相府合,建立門圖層影格50-75的形狀補間動畫,並設定減速100。
Step7.
複製影子圖層的關鍵影格75至影格61處貼上影格,暫時隱藏門圖層並使用移動工具直接調整影子內容成如圖所示,建立影子圖層影格61-75間的形狀補間動畫、減速100,顯示門圖層完成開門與門影子的動畫內容。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
為什麼會看到廣告
avatar-img
29會員
129內容數
多媒體設計的專業能力養成過程,除了有效率學習軟體之外,更重要的是各個軟體間的整合應用! Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等,相關的整合應用有機會皆會與大家分享喔~
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
哩老師的沙龍 的其他內容
【檢視範例】【下載範例】 以漸層繪製的光束來表現移動的同時,出現文字框內容,表現光束刻畫出文字框的動畫。應用的方式是結合導引線控制光束移動,同時以遮色片逐格動畫方式控制文字外框內容的顯示,只要搭配得宜即可完成漸層光束刻字。 目標動畫效果:導引線控制光束移動,搭配遮色片控制文字外框的顯示,時間點搭配
【檢視範例】【下載範例】 在Animate動畫中的文字效果,還有中文字依筆畫,書寫出文字內容的文字動畫效果,只要將各筆畫分圖層,再依序以遮色片上的形狀補間動畫或逐格動畫,控制各筆畫出現即可。 目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式,來呈現分圖層的各文字筆畫書寫畫出,加上速度與時間差
【檢視範例】【下載範例】 應用影片片段元件與傳統補間動畫來整合遮色片動畫,呈現照片上鏡片看圖的效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 元件庫中包含放大鏡與鏡片元件。暫時隱藏放大鏡圖層,在鏡片遮色片圖層上插入多個關鍵影格,並依序移動遮色片元件於場景上不同位置,建立
【檢視範例】【下載範例】 以漸層繪製的光束來表現移動的同時,出現文字框內容,表現光束刻畫出文字框的動畫。應用的方式是結合導引線控制光束移動,同時以遮色片逐格動畫方式控制文字外框內容的顯示,只要搭配得宜即可完成漸層光束刻字。 目標動畫效果:導引線控制光束移動,搭配遮色片控制文字外框的顯示,時間點搭配
【檢視範例】【下載範例】 在Animate動畫中的文字效果,還有中文字依筆畫,書寫出文字內容的文字動畫效果,只要將各筆畫分圖層,再依序以遮色片上的形狀補間動畫或逐格動畫,控制各筆畫出現即可。 目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式,來呈現分圖層的各文字筆畫書寫畫出,加上速度與時間差
【檢視範例】【下載範例】 應用影片片段元件與傳統補間動畫來整合遮色片動畫,呈現照片上鏡片看圖的效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 元件庫中包含放大鏡與鏡片元件。暫時隱藏放大鏡圖層,在鏡片遮色片圖層上插入多個關鍵影格,並依序移動遮色片元件於場景上不同位置,建立
你可能也想看
Google News 追蹤
Thumbnail
/ 大家現在出門買東西還會帶錢包嗎 鴨鴨發現自己好像快一個禮拜沒帶錢包出門 還是可以天天買滿買好回家(? 因此為了記錄手機消費跟各種紅利優惠 鴨鴨都會特別注意銀行的App好不好用! 像是介面設計就是會很在意的地方 很多銀行通常會為了要滿足不同客群 會推出很多App讓使用者下載 每次
Thumbnail
本文介紹瞭如何使用 Photoshop 和 Cinema 4D 創建手繪風格動畫場景。從照片處理到模型建模、材質貼圖、額外元素建模、光線和打光、渲染與後期處理,逐步解說了創建過程。通過這些建議,你將能夠創建一個既細緻又富有動畫效果的手繪風格場景,為你的動畫作品增添獨特的魅力和視覺吸引力。
Thumbnail
Ae 小技巧:CC Bend It 彎曲 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:Mask path 轉成形狀路徑 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:宣紙噪點+抽幀效果 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:Adjustment Layer 調整圖層 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:製作3D 方塊 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:Trim Paths 的應用 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:如何製作網格 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
這個影片是上一篇插畫的後半部,延續草圖的後續,進入到了對我而言的完稿階段。 通常這個階段也是比較瑣碎的,比較不會有突然大破大立的階段,相對來說也是比較花時間,卻可能從影片中看不出變化的階段,畫圖的時候總是苦惱快樂參雜在一起,選項一和選項二、三、四的選擇,從中選取適合的搭配。 最後呈現的有部分是進
Thumbnail
/ 大家現在出門買東西還會帶錢包嗎 鴨鴨發現自己好像快一個禮拜沒帶錢包出門 還是可以天天買滿買好回家(? 因此為了記錄手機消費跟各種紅利優惠 鴨鴨都會特別注意銀行的App好不好用! 像是介面設計就是會很在意的地方 很多銀行通常會為了要滿足不同客群 會推出很多App讓使用者下載 每次
Thumbnail
本文介紹瞭如何使用 Photoshop 和 Cinema 4D 創建手繪風格動畫場景。從照片處理到模型建模、材質貼圖、額外元素建模、光線和打光、渲染與後期處理,逐步解說了創建過程。通過這些建議,你將能夠創建一個既細緻又富有動畫效果的手繪風格場景,為你的動畫作品增添獨特的魅力和視覺吸引力。
Thumbnail
Ae 小技巧:CC Bend It 彎曲 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:Mask path 轉成形狀路徑 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:宣紙噪點+抽幀效果 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:Adjustment Layer 調整圖層 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:製作3D 方塊 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:Trim Paths 的應用 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:如何製作網格 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
這個影片是上一篇插畫的後半部,延續草圖的後續,進入到了對我而言的完稿階段。 通常這個階段也是比較瑣碎的,比較不會有突然大破大立的階段,相對來說也是比較花時間,卻可能從影片中看不出變化的階段,畫圖的時候總是苦惱快樂參雜在一起,選項一和選項二、三、四的選擇,從中選取適合的搭配。 最後呈現的有部分是進