Animate CC 網頁動畫與JS互動
49公開內容
藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!
全部內容
免費與付費
最新發佈優先
動畫裡最常需要的自然現象即是下雨，為了讓雨滴更寫實，因此使用雨滴元件而非一般的線段，搭配水面水紋漣漪與倒影的波動，來讓整個下雨場景更逼真！
目標動畫效果:利用影片片段元件安排大量的雨滴落下，加上以圓圈製作的水紋漣漪，以及以形狀補間動畫內容的遮色片表現倒影波動，完成逼真的
【檢視範例】【下載範例】
目標動畫效果:應用影片片段元件與傳統補間動畫，以及遮色片動畫表現產品出現效果，再搭配形狀補間動畫的遮色片技巧，細膩表現產品的動態呈現。
使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片動畫。
Step1.
範例檔元件庫中包含了所有將進行動畫的元件（直接由
【檢視範例】【下載範例】
目標動畫效果:應用影片片段元件與傳統補間動畫，以及應用逐格動畫的遮色片動畫技巧，細膩表現繪圖內容的動態呈現。
使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、逐格動畫、遮色片動畫、導引線。
Step1.
範例檔元件庫中包含了所有將進行遮色片繪圖的影片片段元件（
【檢視範例】【下載範例】
目標動畫效果:應用影片片段元件與傳統補間動畫，以及遮色片動畫技巧，細膩表現車子產品動作動畫，包括反光光澤，完成亮眼產品介紹。
使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。
Step1.
範例練習檔元件庫中包含車子、車身、車底、遮色片、輪轉影片片段等元件。
【檢視範例】【下載範例】
目標動畫效果:應用影片片段元件與傳統補間動畫，以及遮色片動畫技巧，表現金屬框與文字的光澤效果。
使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。
Step1.
範例檔元件庫中包含文字、圓與漸層光三元件。點取場景上文字元件並複製，新增圖層，於圖層上原地貼上文字元件
【檢視範例】【下載範例】
應用形狀補間動畫的物件變形特點，再搭配遮色片功能，不需要藉助任何的元件與濾鏡效果，即可完美演繹目標內容的動態呈現。
目標動畫效果:應用形狀補間動畫完成畫線條動畫，以及搭配遮色片呈現內容出現的效果，並細膩設定物件變形與時間點控制，達成繪圖動畫的目地。
使用動畫技巧:形狀補間
【檢視範例】【下載範例】
以漸層繪製的光束來表現移動的同時，出現文字框內容，表現光束刻畫出文字框的動畫。應用的方式是結合導引線控制光束移動，同時以遮色片逐格動畫方式控制文字外框內容的顯示，只要搭配得宜即可完成漸層光束刻字。
目標動畫效果:導引線控制光束移動，搭配遮色片控制文字外框的顯示，時間點搭配
【檢視範例】【下載範例】
在Animate動畫中的文字效果，還有中文字依筆畫，書寫出文字內容的文字動畫效果，只要將各筆畫分圖層，再依序以遮色片上的形狀補間動畫或逐格動畫，控制各筆畫出現即可。
目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式，來呈現分圖層的各文字筆畫書寫畫出，加上速度與時間差
【檢視範例】【下載範例】
應用影片片段元件與傳統補間動畫來整合遮色片動畫，呈現照片上鏡片看圖的效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。
Step1.
元件庫中包含放大鏡與鏡片元件。暫時隱藏放大鏡圖層，在鏡片遮色片圖層上插入多個關鍵影格，並依序移動遮色片元件於場景上不同位置，建立
