翻滾吧蔥油餅！簡單 SVG 動畫製作（下集）：讓場景元件動起來

本篇文章接續上集，要帶大家簡單做出好玩的 SVG 網頁動畫，讓蔥油餅翻滾！怎麼讓場景元件動起來，一步步帶你動手做。

對文章有興趣來不及看？點選右上角「橘色小書籤」收藏文章，再也不怕錯過就是一輩子！

本文翻自 [週四寫程式系列] 來做SVG動畫讓蔥油餅翻滾吧!，若是對文章內容有疑問，或是想要老闆手把手帶你飛，都可以觀看影片詳細內容。

在上集中，老闆帶大家從發想素材、將素材引入網頁，到製作場景進出的動畫。接下來我們將要賦予場景中的每個元件生命。

SVG01

本篇文章會談到：

本篇文章中，老闆會帶大家完成蔥油餅小島中角色與物件的動畫，也會提示大家每個部份需要注意的地方，以下動畫的設定數值都都只是參考，開發時大家都能試試看不同的數值。

實際應用﹔讓場景中的元件動起來

怎麼讓素材動起來？

一、驚嘆號

首先我們從驚嘆號下手，老闆讓驚嘆號分布在場景的各處，用意是要提示使用者這邊有驚喜，引導使用者靠近這個區塊。為了增加提示效果，我們利用左右晃動的動畫效果，固定時間後會再撥放。

這邊使用了新的 css 屬性 animation ，需要搭配 @keyframes 使用，在 keyframes 用百分比去註記不同時間該顯示的樣式，透過 animation 定義動畫總時間，這也代表這個 keyframes 可以提供給不同元件使用，使用的元件賦予不同的時間等屬性，就是一個全新的樣貌。

要注意元件會以左上角為旋轉中心點，適時加上 transform-origin, transform-box 讓動畫更加合理。

[data-name="sign"]{
// 引用動畫名稱 時間 延遲播放時間 次數
animation: drag 2s infinite;
transform-origin: center center;
transform-box: fill-box;
}
@keyframes drag {
0%{transform: rotate(0deg);}
80%{transform: rotate(0deg);}
85%{transform: rotate(10deg);}
90%{transform: rotate(-6deg);}
95%{transform: rotate(3deg);}
100%{transform: rotate(0deg);}
}

二、路人 trigger_door_man

利用前面寫過的 keyframes drag 與 data-name 的概念，我們可以快速完成這個部分的動畫。當滑鼠進入感應區塊，路人能夠開始搖擺。

[data-name="trigger\_door\_man"]{
&:hover{
animation: drag 2s infinite;
transform-origin: center bottom;
transform-box: fill-box;
}
}

驚嘆號與路人

驚嘆號與路人

三、阿伯與跳起來的蔥油餅 trigger_cookie

要讓蔥油餅動起來之前，先從阿伯的手開始，結合蔥油餅動畫之後，讓蔥油餅宛如真的被阿伯翻了起來。撰寫這邊的動畫時，要注意調整 transform-origin ，決定動畫旋轉的參考點，阿伯的上半身也是用相同的方式處理，若是動畫沒調好，很有可能瞬間變成凶殺案，阿伯被腰斬的畫面。

透過 animation 內延遲時間設為負值，讓動畫預先開跑到其他時間點，也是讓動畫更加順暢的小訣竅。

[data-name="trigger\_cookie"]{
&:hover {
[data-name="man\_upper"]{
animation: bake\_cookies 2s infinite ;
transform-origin: center bottom;
transform-box: fill-box;
}
[data-name="hand"]{
// 動畫名稱 動畫時間 次數 延遲時間
animation: drag 2s infinite -0.8s;
transform-origin: left center;
transform-box: fill-box;
}
}
}
@keyframes bake\_cookies {
40%{
transform: rotate(5deg);
}
50%{
transform: rotate(-6deg);
}
70%{
transform: rotate(-10deg);
}
90%{
transform: rotate(-6deg);
}
100%{
transform: rotate(5deg);
}
}

接著我們要來處理跳起來的蔥油餅了，蔥油餅的思維比較不同，我們要讓蔥油餅分段顯示。 keyframe 的動畫內容改為使用透明度，讓透明度跟著時間改變，營造出分段顯示的效果，利用 animation-delay 來讓四個位置的蔥油餅，在不同的時間點顯示。這邊起始為置的蔥油餅會出現大部分的時間，所以要特別為它寫一個 keyframe。大家也可以試試看，調出順暢有趣的效果。

[data-name="trigger\_cookie"] {
&:hover {
...
[data-name="cookie1"] {
animation: bake\_cookies\_locus 2s infinite -1s;
}
[data-name="cookie2"] {
animation: bake\_cookies\_locus 2s infinite -0.8s;
}
[data-name="cookie3"] {
animation: bake\_cookies\_locus 2s infinite -0.6s;
}
[data-name="cookie4"] {
animation: bake\_cookies\_locus 2s infinite -0.4s;
}
[data-name="now\_cookie"] {
animation: now\_cookie 2s infinite;
}
}
}
@keyframes bake\_cookies {
40% {
transform: rotate(5deg);
}
50% {
transform: rotate(-6deg);
}
70% {
transform: rotate(-10deg);
}
90% {
transform: rotate(-6deg);
}
100% {
transform: rotate(5deg);
}
}
@keyframes now\_cookie {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
}
90% {
opacity: 0;
}
91% {
opacity: 1;
}
}

小孩與媽媽 trigger_cookie

不可能整個畫面都使用同樣的搖擺動態吧？所以我們為小孩換一個動態效果，讓他原地跳躍，要達成這個效果，可以改變 y 的值來達成，媽媽則是繼續搖擺效果。

[data-name="trigger\_cookie"] {
&:hover {
[data-name="child"] {
animation: jump 2s infinite -1s;
}
[data-name="mother"] {
animation: drag 5s infinite;
transform-origin: left bottom;
transform-box: fill-box;
}
}
}
@keyframes jump {
0%{
transform: translateY(0px);
}
50%{
transform: translateY(0px);
}
51%{
transform: translateY(0px);
}
75%{
transform: translateY(-10px);
}
100%{
transform: translateY(0px);
}
}

結語

跟著操作之後，應該有 svg + css 製作動畫的概念，這時不妨動手試試看，讓其他小島的元件動起來。也可以畫些素材，加上動畫賦予他們生命力。動畫沒有什麼對或錯，可以按照自己喜好，去改變動畫效果或是調整時間，但要注意撰寫動畫時的連續繼承問題，像是阿伯的手(子層)會跟隨著身體(父層)擺動。下面老闆也提供三個議題，供大家在開發時參考。

1. 引用 animate.css

每次都要重新寫 keyframe，若是寫 keyframe 寫累了或是遇到急案，為了加速開發，老闆這邊準備了一些補品，讓你可以快速套用現成的動畫效果。例如：想要實現當滑鼠進入感應區塊時，讓驚嘆號動畫改為閃爍動畫，在這邊我們結合 animate.css 製作閃爍動畫。引用 ainmate.css 後，當 data-name=”trigger ” hover 時，裡面 data-name=”sign”的動畫都改為 animation: flash 2s infinite。( flash 為 animate.css 的動畫名稱)