想跟風當程式工程師的你一定不能錯過本HTML5基礎系列!本篇是(12)-SVG基本圖形動畫
SVG 基本圖形動畫
前端工程師們可以使用 <animate> 元素來繪製 SVG 動畫。今天我們先來繪製一個方形，並且將動作設定在三秒鐘內往右移動，然後會重複相同的動作 3 次。HTML5原始碼與結果如下所示：
以上所有的 HTML5 標籤說明如下：
- <attributeName>
屬性名稱，就是當你指定了這個屬性，就會以這個屬性去做動作。在本例中指定紫色方塊要水平位移，水平移動的座標為 x，所以該例中 attributeName 為 x。若為垂直移動的話，attributeName 則為 y。 - <from>
動畫開始時的屬性值。 - <to>
結束動畫時的屬性值。 - <dur>
動畫持續時間。 - <repeatCount>
動畫重複次數。在本例中重複 3 次所以 repeatCount 設為 3；若要動畫無限重複的話， repeatCount 則設為 indefinite。 - <fill (freeze | remove)>
這裡的 fill 不代表填色，而是指定動畫結束時的屬性，屬性可選 freeze 或是 remove，remove 是預設值，也就是動畫結束之後，圖形返回原本的狀態，而 freeze 則是在動畫結束後，固定在結束的狀態
參考連結:
HTML5新手入門課程(1)-7個內容模組簡介
HTML5新手入門課程(2)-三大基本元素排版
HTML5新手入門課程(3)-文章標題,選項與網頁側欄元素排版
前端工程師不可不知的網頁顏色代碼,今天直接整理給你!
前端工程師入門款小常識-CSS碼特性一下就上手!
前端工程師必知第二課-CSS碼的Class選擇器宣告法
中國IT教育領導品牌 達內教育集團第一家海外授權中心
