Animate CC 按鈕與動畫互動切換
更新於 發佈於 閱讀時間約 5 分鐘
目標動畫效果:應用影片片段元件與傳統補間動畫，以及多個影片片段元件的組合，包括遮色片動畫技巧，最後結合按鈕元件的使用與停止動作行為，完成互動按鈕的動態效果。
使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。
使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。
Step1.
範例檔內場景上各個動畫素材均已各自轉換為影片片段元件。暫時隱藏紙質按鈕元件圖層，點取彩色元件圖層，執行『修改 > 轉換成元件』轉換該圖層上所有元件成為一個影片片段元件『彩色元件動畫』，進入彩色元件動畫元件內，選取圖層1執行『修改 > 時間軸 > 分散至圖層』將元件分散至獨立圖層，刪除原圖層1、整理圖層順序並於影格80處均插入關鍵影格。
範例檔內場景上各個動畫素材均已各自轉換為影片片段元件。暫時隱藏紙質按鈕元件圖層，點取彩色元件圖層，執行『修改 > 轉換成元件』轉換該圖層上所有元件成為一個影片片段元件『彩色元件動畫』，進入彩色元件動畫元件內，選取圖層1執行『修改 > 時間軸 > 分散至圖層』將元件分散至獨立圖層，刪除原圖層1、整理圖層順序並於影格80處均插入關鍵影格。
Step2.
於書圖層上，插入關鍵影格於10、13、15，設定影格1上的書元件移至左側，並設定Alpha:0%，影格10上書略向右移、影格13上書本略向左移，均插入傳統補間，設定加減速度：-100（1-10之間）、100（10-13之間）、-100（13-15之間）。相同方式處理設定小飛機圖層動畫，完成二物件由左側飛入動畫。
於書圖層上，插入關鍵影格於10、13、15，設定影格1上的書元件移至左側，並設定Alpha:0%，影格10上書略向右移、影格13上書本略向左移，均插入傳統補間，設定加減速度：-100（1-10之間）、100（10-13之間）、-100（13-15之間）。相同方式處理設定小飛機圖層動畫，完成二物件由左側飛入動畫。
Step3.
於扇子圖層上，插入關鍵影格於10、13、15均插入傳統補間動畫，設定影格1至10順時針旋轉2圈，影格10上稍做順時針變形旋轉，影格13上稍做逆時針變形旋轉，設定加減速度：-100、100、-100。
於扇子圖層上，插入關鍵影格於10、13、15均插入傳統補間動畫，設定影格1至10順時針旋轉2圈，影格10上稍做順時針變形旋轉，影格13上稍做逆時針變形旋轉，設定加減速度：-100、100、-100。
Step4.
於二紙傘圖層上，均插入關鍵影格於10、13、15並建立傳統補間動畫，設定影格1上紙傘均縮小，影格10上均放大、影格13上略縮小，設定加減速度：-100、100、-100。
於二紙傘圖層上，均插入關鍵影格於10、13、15並建立傳統補間動畫，設定影格1上紙傘均縮小，影格10上均放大、影格13上略縮小，設定加減速度：-100、100、-100。
Step5.
於燈籠圖層上，插入關鍵影格於10、13、16、19並建立傳統補間動畫，影格10上變形略微逆時針旋轉、影格13上變形略微順時針旋轉、影格16上變形略微逆時針旋轉，最後設定加減速度：-100、100、-100、100。
於燈籠圖層上，插入關鍵影格於10、13、16、19並建立傳統補間動畫，影格10上變形略微逆時針旋轉、影格13上變形略微順時針旋轉、影格16上變形略微逆時針旋轉，最後設定加減速度：-100、100、-100、100。
Step6.
於全部風車圖層上，均插入關鍵影格於10、13、15與建立傳統補間動畫，設定影格1上所有風車置中對齊並移至左上角位置，影格10上略放大所有風車、影格13上略縮小風車，最後設定全部風車圖層影格1-10之間順時針旋轉3圈，設定全部風車圖層加減速度：-100、100、-100。
於全部風車圖層上，均插入關鍵影格於10、13、15與建立傳統補間動畫，設定影格1上所有風車置中對齊並移至左上角位置，影格10上略放大所有風車、影格13上略縮小風車，最後設定全部風車圖層影格1-10之間順時針旋轉3圈，設定全部風車圖層加減速度：-100、100、-100。
Step7.
最後調整所有圖層動畫區段時間差如圖所示，安排每個物件的出現時間；在影格80處加入在此影格停止動作『this.stop( );』(視窗>程式碼片段>HTML5 Canvas>時間軸瀏覽>在此影格停止，按二下加入)，完成此影片片段元件內的動畫。
最後調整所有圖層動畫區段時間差如圖所示，安排每個物件的出現時間；在影格80處加入在此影格停止動作『this.stop( );』(視窗>程式碼片段>HTML5 Canvas>時間軸瀏覽>在此影格停止，按二下加入)，完成此影片片段元件內的動畫。
Step8.
新增影片片段『書晃動』並置入書元件，插入關鍵影格於5、10、15、旋轉變形影格5與10上的書元件，建立傳統補間動畫完成書晃動內容；新增影片片段『風車轉動』並置入風車元件，插入關鍵影格於影格25與50、建立傳統補間動畫，設定影格1-25間順時針旋轉與影格25-50間逆時針旋轉。
新增影片片段『書晃動』並置入書元件，插入關鍵影格於5、10、15、旋轉變形影格5與10上的書元件，建立傳統補間動畫完成書晃動內容；新增影片片段『風車轉動』並置入風車元件，插入關鍵影格於影格25與50、建立傳統補間動畫，設定影格1-25間順時針旋轉與影格25-50間逆時針旋轉。
新增影片片段『燈籠晃動』並置入燈籠元件，使用變形工具更改變形中心至燈籠上方的環節處，插入關鍵影格於影格10、15、20、25，變形旋轉影格10、15、20上的燈籠元件，建立傳統補間動畫、設定加減速度：-100、100、-100、100。
Step9.
新增影片片段『傘旋轉』，暫時先置入目標按鈕元件內容（元件庫/按鈕元件/走過風華）於圖層1上，再新增二圖層分別置入二傘元件並調整傘尺寸約與目標按鈕上相當，刪除圖層1並為二傘圖層插入關鍵影格於15，建立傳統補間動畫、設定順時針旋轉。
新增影片片段『傘旋轉』，暫時先置入目標按鈕元件內容（元件庫/按鈕元件/走過風華）於圖層1上，再新增二圖層分別置入二傘元件並調整傘尺寸約與目標按鈕上相當，刪除圖層1並為二傘圖層插入關鍵影格於15，建立傳統補間動畫、設定順時針旋轉。
Step10.
新增影片片段『扇子動畫』並置入扇子元件，使用變形工具更改變形中心至扇子軸心；新增遮色片圖層，使用基本橢圓工具繪製寬高：260之正圓形填色物件，確定圓形中心與扇子軸中心位置相府（按下遮色片圖層的外框檢視），設定圓形填色物件開始角度：240、結束角度：25之扇形，確定扇形物件可完整覆蓋扇子元件，並打散遮色片上的基本橢圓物件。
新增影片片段『扇子動畫』並置入扇子元件，使用變形工具更改變形中心至扇子軸心；新增遮色片圖層，使用基本橢圓工具繪製寬高：260之正圓形填色物件，確定圓形中心與扇子軸中心位置相府（按下遮色片圖層的外框檢視），設定圓形填色物件開始角度：240、結束角度：25之扇形，確定扇形物件可完整覆蓋扇子元件，並打散遮色片上的基本橢圓物件。
鎖定遮色片圖層，並在遮色片與扇子圖層上於影格15、30、45處插入關鍵影格，旋轉影格1扇子至遮色片左側外，並複製扇子圖層影格1、至扇子圖層影格40上貼上影格；解除遮色片圖層鎖定，於遮色片圖層的影格15、30上使用筆刷工具繪製填色內容範圍將扇子完整覆蓋，為扇子圖層建立傳統補間動畫（1-15、30-45之間）、設定遮色片完成扇子動畫。
Step11.
分別進入到5個按鈕元件內，新增圖層並置入該按鈕內容的影片片段元件（燈籠晃動），對齊正確位置後請直接移動一般影格上的關鍵影格至滑入影格位置，相同方式完成五個包含影片片段元件於『滑入影格』的動態按鈕元件。
分別進入到5個按鈕元件內，新增圖層並置入該按鈕內容的影片片段元件（燈籠晃動），對齊正確位置後請直接移動一般影格上的關鍵影格至滑入影格位置，相同方式完成五個包含影片片段元件於『滑入影格』的動態按鈕元件。
Step12.
回到場景上點取紙質按鈕元件圖層上所有按鈕元件，執行『修改 > 轉換成元件』轉換為影片片段元件『全部按鈕』；為彩色元件圖層於影格80、90處插入關鍵影格，設定彩色元件圖層影格90上元件Alpha:0 %，建立傳統補間動畫；
回到場景上點取紙質按鈕元件圖層上所有按鈕元件，執行『修改 > 轉換成元件』轉換為影片片段元件『全部按鈕』；為彩色元件圖層於影格80、90處插入關鍵影格，設定彩色元件圖層影格90上元件Alpha:0 %，建立傳統補間動畫；
複製移動(按住ALT)紙質按鈕元件圖層上關鍵影格至影格80處，並於影格90處插入關鍵影格，同樣為紙質按鈕元件圖層的影格1、影格80處均設定全部按鈕元件Alpha:0 %，建立影格80-90傳統補間完成按鈕切換。在影格90上加入在此影格停止動作『this.stop( );』(視窗>程式碼片段>HTML5 Canvas>時間軸瀏覽>在此影格停止，按二下加入)，完成此範例。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
為什麼會看到廣告
29會員
129內容數
多媒體設計的專業能力養成過程，除了有效率學習軟體之外，更重要的是各個軟體間的整合應用!
Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等，相關的整合應用有機會皆會與大家分享喔~
留言0
查看全部
你可能也想看
Google News 追蹤
提問的內容越是清晰，強者、聰明人越能在短時間內做判斷、給出精準的建議，他們會對你產生「好印象」，認定你是「積極」的人，有機會、好人脈會不自覺地想引薦給你
Animation Presets 是預設的動畫效果和屬性設定，套用後就可以做出動畫效果。
Animate Out 是預設的文字出場(離開)效果。
Animation Presets 是預設的動畫效果和屬性設定，套用後就可以做出動畫效果，無需從零開始進行複雜的調整。
其中的 Animate In 是讓文字以各種動畫方式進場。可用來製作標題或字幕進場的動畫。
從2021年就在日本巡迴的《Animage雜誌和吉卜力展》，現在從1/8～4/6在華山1914文創園區東2C、D棟展出。
在這一章中，我們介紹了 CSS 的過渡效果和動畫效果。過渡效果使 CSS 屬性的變化更加平滑，而動畫效果則允許我們更精細地控制元素的多個屬性隨時間變化的過程。我們通過基本語法和示例展示了如何使用這些效果，並提供了一個綜合應用的實踐案例來幫助理解。這些技術可以讓你的網頁更具互動性和動態效果。
在這篇文章中，我們將探討如何製作章節轉場動畫，讓您的作品更具吸引力。本文包含了準備素材、定義圖片、製作簡易動畫等步驟，適合初學者進行學習和操作。我們提供了必要的資源和範例，讓您能輕鬆上手。期待透過這篇教學，能讓您在創作中達到更高的境界！
本文介紹瞭如何使用 Photoshop 和 Cinema 4D 創建手繪風格動畫場景。從照片處理到模型建模、材質貼圖、額外元素建模、光線和打光、渲染與後期處理，逐步解說了創建過程。通過這些建議，你將能夠創建一個既細緻又富有動畫效果的手繪風格場景，為你的動畫作品增添獨特的魅力和視覺吸引力。
Ae 小技巧：Motion Tile 連續圖 / 背景
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
提問的內容越是清晰，強者、聰明人越能在短時間內做判斷、給出精準的建議，他們會對你產生「好印象」，認定你是「積極」的人，有機會、好人脈會不自覺地想引薦給你
Animation Presets 是預設的動畫效果和屬性設定，套用後就可以做出動畫效果。
Animate Out 是預設的文字出場(離開)效果。
Animation Presets 是預設的動畫效果和屬性設定，套用後就可以做出動畫效果，無需從零開始進行複雜的調整。
其中的 Animate In 是讓文字以各種動畫方式進場。可用來製作標題或字幕進場的動畫。
從2021年就在日本巡迴的《Animage雜誌和吉卜力展》，現在從1/8～4/6在華山1914文創園區東2C、D棟展出。
在這一章中，我們介紹了 CSS 的過渡效果和動畫效果。過渡效果使 CSS 屬性的變化更加平滑，而動畫效果則允許我們更精細地控制元素的多個屬性隨時間變化的過程。我們通過基本語法和示例展示了如何使用這些效果，並提供了一個綜合應用的實踐案例來幫助理解。這些技術可以讓你的網頁更具互動性和動態效果。
在這篇文章中，我們將探討如何製作章節轉場動畫，讓您的作品更具吸引力。本文包含了準備素材、定義圖片、製作簡易動畫等步驟，適合初學者進行學習和操作。我們提供了必要的資源和範例，讓您能輕鬆上手。期待透過這篇教學，能讓您在創作中達到更高的境界！
本文介紹瞭如何使用 Photoshop 和 Cinema 4D 創建手繪風格動畫場景。從照片處理到模型建模、材質貼圖、額外元素建模、光線和打光、渲染與後期處理，逐步解說了創建過程。通過這些建議，你將能夠創建一個既細緻又富有動畫效果的手繪風格場景，為你的動畫作品增添獨特的魅力和視覺吸引力。
Ae 小技巧：Motion Tile 連續圖 / 背景
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。