Animate CC 按鈕與動畫互動切換
目標動畫效果:應用影片片段元件與傳統補間動畫，以及多個影片片段元件的組合，包括遮色片動畫技巧，最後結合按鈕元件的使用與停止動作行為，完成互動按鈕的動態效果。
使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。
使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。
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會員
161內容數
藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站，以及安裝和放置遊戲中的簡易流程。
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法，藉由連結程式腳本和動畫編輯器，讓動畫更靈活的運作。
這篇文章將會講述 Animation 在設定後要如何使用程式觸發，並不介紹直接使用的 Animation，並簡易提到 Animator 的連結教學。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站，以及安裝和放置遊戲中的簡易流程。
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法，藉由連結程式腳本和動畫編輯器，讓動畫更靈活的運作。
這篇文章將會講述 Animation 在設定後要如何使用程式觸發，並不介紹直接使用的 Animation，並簡易提到 Animator 的連結教學。