本文翻自 [週四寫程式系列] 來做SVG動畫讓蔥油餅翻滾吧!，若是對文章內容有疑問，或是想要老闆手把手帶你飛，都可以觀看影片詳細內容。
在上一篇中，老闆帶大家從發想素材、將素材引入網頁，到製作場景進出的動畫。接下來我們將要賦予場景中的每個元件生命。
目標
本篇文章中，老闆會帶大家完成蔥油餅小島中角色與物件的動畫，也會提示大家每個部份需要注意的地方，以下動畫的設定數值都都只是參考，開發時大家都能試試看不同的數值。
- 實際應用﹔讓場景中的元件動起來
讓素材動起來吧
驚嘆號
首先我們從驚嘆號下手，老闆讓驚嘆號分布在場景的各處，用意是要提示使用者這邊有驚喜，引導使用者靠近這個區塊。為了增加提示效果，我們利用左右晃動的動畫效果，固定時間後會再撥放。
這邊使用了新的 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 製作動畫的概念，這時不妨動手試試看，讓其他小島的元件動起來。也可以畫些素材，加上動畫賦予他們生命力。動畫沒有什麼對或錯，可以按照自己喜好，去改變動畫效果或是調整時間，但要注意撰寫動畫時的連續繼承問題，像是阿伯的手(子層)會跟隨著身體(父層)擺動。下面老闆也提供三個議題，供大家在開發時參考。
引用 animate.css
每次都要重新寫 keyframe，若是寫 keyframe 寫累了或是遇到急案，為了加速開發，老闆這邊準備了一些補品，讓你可以快速套用現成的動畫效果。例如：想要實現當滑鼠進入感應區塊時，讓驚嘆號動畫改為閃爍動畫，在這邊我們結合 animate.css 製作閃爍動畫。引用 ainmate.css 後，當 data-name=”trigger ” hover 時，裡面 data-name=”sign”的動畫都改為 animation: flash 2s infinite。( flash 為 animate.css 的動畫名稱)
電腦與手機
由於手機等行動裝置不會有 hover 的行為，記得補上 focus，讓整個網頁能夠更完善。
了解你的使用者
把作品完成後，如果能夠知道自己這些得意之作是不是真的有被使用，可以做 GA 追蹤，老闆也因為 GA 的關係，發現其實使用者不太常使用換頁，導致這些動畫做了卻沒人看，參考數據後做了相對應的處理，增加作品露面的機會。
課程推薦
動畫互動網頁程式入門(HTML/CSS/JS)以簡單例子帶你入門網站的基礎架構及開發，用素材刻出簡單有趣又美觀的網頁和動畫，享受做出獨一無二的網頁所帶來的成就感，在職場上與設計師和工程師合作無間。
打好基本的互動網頁基礎之後，可以進階動畫互動網頁特效入門(JS/CANVAS)，紮實掌握JavaScript 程式與動畫基礎以及進階互動，整合應用掌控資料與顯示的Vue.js前端框架，完成具有設計感的互動網站。
