Animate CC 網頁動畫與JS互動
49公開內容
藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!
全部內容
免費與付費
最新發佈優先
Q版人物通常都是頭大、手短、腳短，因此在跑步時的動作步伐比較小，同樣需要注意手腳與身體元件的配合，搭配傳統補間動畫即可確保跑步動作的流暢。
目標動畫效果:應用影片片段元件表現可愛人物的跑步動作，除了元件的準備與安排來表現動作之外，以傳統補間動畫讓動作更為流暢。
使用動畫技
對於是以相片人物來製作動畫時，當然必需要在Photoshop中事先處裡好每個元件細節，然後再正確匯入Animate中來完成動畫，同樣是需要注意元件變形中心與動畫動作的設定。
目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫，需注意匯入檔案的正確方式，除了元件的準備
接著將介紹更為細膩的角色跑步動畫，細膩處即是手與腳都各分為二部分，因此無論是各元件的調整與設定都需要更仔細，否則將有元件中途分開的問題。
目標動畫效果:應用影片片段元件表現線條人物的的跑步，除了元件的準備與安排來表現動作之外，手與腳的部分均以二元件組成，所有元件將以傳統補
角色的動作還可以是跳躍的方式，類似球拋物線彈跳的方式來表現角色活潑的跳躍動作，讓角色由場景左上角跳躍至場中央，再跳躍至場景右上角，最後再跳躍回原處，由於動作特別，因此每個身上元件都需要仔細的調整。
目標動畫效果:應用影片片段元件表現可愛的角色跳躍動作，除了元件的準備與安排
對於人物角色的走路動作，首先介紹最輕易可完成的半側面角度，這個角度的動作姿勢是最好表現的，只要準備好角色各肢體的獨立元件，搭配變形中心與傳統補間動畫即可完成。
目標動畫效果:應用影片片段元件表現角色人物的走路，除了元件的準備與安排來表現動作之外，將以傳統補間動畫製作肢體的
首先先注重於角色的臉部表情細節的動畫表現，臉部表情之中，眼睛的眨眼算是最重要的，將配合Animate的繪圖功能，快速準備好眨眼所需要的素材內容，最後搭配轉頭動作，角色的動作就更細膩了。
目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路，除了元件的準備與安排來表現動作
可愛版的動物走路，最大特色是在於腳的部分將省略因走路而彎曲的動作，而是以短比例的腳來表現可愛風格，所以仍然需要注意走路時腳元件的調整。
目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路，除了元件的準備與安排來表現動作之外，將以傳統補間動畫讓動作更為流暢。
使用動畫技
對於較細膩的動物跑步動作，若是要以傳統補間完成的話，就元件繪製時就需要考慮到元件上顏色的銜接問題，否則將出現腳元件與身體的不連續問題，另外動作上的設定也需要更細膩些，在此將以小狗跑步來解說。
目標動畫效果:應用影片片段元件表現可愛動物四隻腳的跑步，除了元件的準備與安排表現
對於動物跑步較複雜之處是在四隻腳的動作表現上，包括跑步時的腳彎曲，是不易以補間動畫表現的，因此需藉由預先準備的彎曲腳元件來替換，由於是不同的元件替換，因此僅能以逐格動畫來表現。
目標動畫效果:應用影片片段元件表現可愛動物四隻腳的簡易跑步，除了元件的準備與安排表現動作之外，
可愛動作的表現，除了準備好元件之外，對於各個部位元件的控制，將是動作製作時的重點，例如表情、身體部位等元件，搭配補間動畫與逐格動畫的方式，即可掌握可愛動作。
目標動畫效果:應用影片片段元件表現小動物的可愛動作，對於要動起來的部位元件均需要定義且安排於獨立圖層上，才能夠個別
在交通工具中，就屬腳踏車動畫的細節最多，因為除了輪子的轉動外，人物角色二隻腳來踩動腳踏車踏板是最需要注意動畫細節的，其中包括雙腳的動作與踏板的旋轉，雙腳動作需注意變形中心與補間動畫的應用，踏板的旋轉即是要依靠導引線來控制繞圈旋轉，最後搭配場景上場景元件的移動，即可完成騎腳
車子動畫部分，除了車子的移動之外，介紹的是車子商品進場的動畫效果，包括車子減速移入與車門開啟的動畫，完美展現車子的動態！
目標動畫效果:應用影片片段元件的安排，表現車子移動時輪子旋轉的速度，以及車門開啟的特殊動作，讓車子動畫更豐富。
使用動畫技巧:影片片段元件、傳統補間動
直昇機在飛行時，主螺旋槳與尾翼副螺旋槳是表現重點，此外還可以加上飛彈發射的安排，以及背景的移動，讓動畫更逼真與完整！
目標動畫效果:應用影片片段元件安排各元件的動畫，包括直昇機與飛彈，最後組合成完整直昇機與飛彈發射，表現特別的交通工具動畫。
使用動畫技巧:影片片段元件、傳
在大自然的場景下，除了昆蟲與樹葉的動態表現外，樹葉上的露水滴落往往成為動畫的焦點，因此水滴滴落時的動態表現，不同於雨滴，需要更細膩的表現出來。
目標動畫效果:利用影片片段元件與導引線動畫，表現大自然之中的元素動態，包括昆蟲飛舞、葉子晃動、葉上水滴滴落等。
使用動畫技巧:
動畫裡最常需要的自然現象即是下雨，為了讓雨滴更寫實，因此使用雨滴元件而非一般的線段，搭配水面水紋漣漪與倒影的波動，來讓整個下雨場景更逼真！
目標動畫效果:利用影片片段元件安排大量的雨滴落下，加上以圓圈製作的水紋漣漪，以及以形狀補間動畫內容的遮色片表現倒影波動，完成逼真的
若要表現花飄落的效果，除了落下的軌跡外，最重要的是花在落下的同時是伴隨著細微的旋轉，最後再以導引線控制飄落軌跡與搭配落入水中時的水紋，即可完成！
目標動畫效果:搭配影片片段元件與導引線的使用，加上水紋與移動的安排，來完成花落入水中的各個細節。
使用動畫技巧:影片片段元件、
對於包含了陰影與倒影的文字內容，若要製作字元移動動畫效果時，同樣面臨元件與圖層眾多的問題，因此善用移動補間動畫新增至『自訂移動預設效果』的方式，即可快速套用自訂的動畫效果，迅速完成多元件的文字動畫效果。
目標動畫效果:利用移動補間動畫與移動編輯器，先設定好一個字元的動畫後
【檢視範例】【下載範例】
自然現象效果煙的部分，尤其是在熱騰騰的食物上，包括火鍋、泡麵、溫泉等場景的煙，此種煙的特性是較為急促向上冒，也比較濃厚。
目標動畫效果:使用圓形漸層影片片段元件做為煙的構成內容，搭配在影片片段元件內製作多重的煙元件向上移動，只要安排得宜，即可完成頗具效果的熱騰騰煙霧。
使
【檢視範例】【下載範例】
以漸層繪製的光束來表現移動的同時，出現文字框內容，表現光束刻畫出文字框的動畫。應用的方式是結合導引線控制光束移動，同時以遮色片逐格動畫方式控制文字外框內容的顯示，只要搭配得宜即可完成漸層光束刻字。
目標動畫效果:導引線控制光束移動，搭配遮色片控制文字外框的顯示，時間點搭配
【檢視範例】【下載範例】
在Animate動畫中的文字效果，還有中文字依筆畫，書寫出文字內容的文字動畫效果，只要將各筆畫分圖層，再依序以遮色片上的形狀補間動畫或逐格動畫，控制各筆畫出現即可。
目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式，來呈現分圖層的各文字筆畫書寫畫出，加上速度與時間差
