HTML5新手入門課程(12)-SVG基本圖形動畫


HTML5新手入門課程(12)-SVG基本圖形動畫

想跟風當程式工程師的你一定不能錯過本HTML5基礎系列!本篇是(12)-SVG基本圖形動畫 

SVG 基本圖形動畫

前端工程師們可以使用 <animate> 元素來繪製 SVG 動畫。
今天我們先來繪製一個方形,並且將動作設定在三秒鐘內往右移動,然後會重複相同的動作 3 次。HTML5原始碼與結果如下所示:
See the Pen SVG 基本圖形動畫 by Tedutw (@Tedutw) on CodePen.

以上所有的 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教育領導品牌 達內教育集團第一家海外授權中心 ​​​​​​​

全球首屆元宇宙時裝周,複刻20年前的失敗?

全球首屆元宇宙時裝周, 遇到瓶頸 複刻20年前的失敗? 目錄 元宇宙時裝周參與盛況 叫好不叫座?新興技術的行銷瓶頸 由虛擬實境平台 Decentraland 所舉辦的「元宇宙時裝週」(Metaverse Fashion Week...