Hahow 好學校

SVG、網頁程式設計、網頁動畫、網頁動畫設計

Hahow 小蛙編輯

2022/08/29

翻滾吧蔥油餅!簡單 SVG 動畫製作_下集:讓場景元件動起來

本篇文章接續上集,要帶大家簡單做出好玩的 SVG 網頁動畫,讓蔥油餅翻滾!怎麼讓場景元件動起來,一步步帶你動手做。
本文翻自 [週四寫程式系列] 來做SVG動畫讓蔥油餅翻滾吧!,若是對文章內容有疑問,或是想要老闆手把手帶你飛,都可以觀看影片詳細內容。
在上集中,老闆帶大家從發想素材、將素材引入網頁,到製作場景進出的動畫。接下來我們將要賦予場景中的每個元件生命。
本篇文章會談到:
本篇文章中,老闆會帶大家完成蔥油餅小島中角色與物件的動畫,也會提示大家每個部份需要注意的地方,以下動畫的設定數值都都只是參考,開發時大家都能試試看不同的數值。
實際應用﹔讓場景中的元件動起來
怎麼讓素材動起來?
一、驚嘆號
首先我們從驚嘆號下手,老闆讓驚嘆號分布在場景的各處,用意是要提示使用者這邊有驚喜,引導使用者靠近這個區塊。為了增加提示效果,我們利用左右晃動的動畫效果,固定時間後會再撥放。
這邊使用了新的 css 屬性 animation ,需要搭配 @keyframes 使用,在 keyframes 用百分比去註記不同時間該顯示的樣式,透過 animation 定義動畫總時間,這也代表這個 keyframes 可以提供給不同元件使用,使用的元件賦予不同的時間等屬性,就是一個全新的樣貌。
要注意元件會以左上角為旋轉中心點,適時加上 transform-origin, transform-box 讓動畫更加合理。
詳見原文>
1 0 441 1