SVG repeatCount和repeatDur屬性
SVG更多動畫內容可以參閱SVG animation動畫詳解一章節。
一.repeatCount屬性:
此屬性用來規定動畫重複的次數。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin: 0px; padding: 0px; } svg { border:1px solid blue; margin:50px; } </style> </head> <body> <svg width="500" height="180" > <rect x="50" y="50" width="100" height="50" fill="red"> <animate attributeType="XML" attributeName="x" from="50" to="300" dur="5s" repeatCount="2" fill="freeze"> </animate> </rect> </svg> </body> </html>
上面的程式碼中,矩形動畫可以重複兩次。
repeatCount屬性值不但可以是數字,也可以是"indefinite",表示可以無限迴圈下去。
二.repeatDur屬性:
此屬性用來限制動畫重複的時間。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin: 0px; padding: 0px; } svg { border:1px solid blue; margin:50px; } </style> </head> <body> <svg width="500" height="180" > <rect x="50" y="50" width="100" height="50" fill="red"> <animate attributeType="XML" attributeName="x" from="50" to="300" dur="5s" repeatDur="10s" repeatCount="4" fill="freeze"> </animate> </rect> </svg> </body> </html>
動畫可以重複4次,理論耗時是20秒,但是通過repeatDur屬性規定重複總時間是10秒,所以動畫只會執行10s。
相關文章
- SVG keyPoints 屬性SVG
- SVG accumulate和additive動畫屬性SVG動畫
- SVG 動畫 fill 屬性SVG動畫
- SVG restart 動畫屬性SVGREST動畫
- SVG restart動畫屬性SVGREST動畫
- SVG:理解stroke-dasharray和stroke-dashoffset屬性SVG
- svg02——svg繪製基本圖形,瞭解常用的屬性SVG
- defer 屬性和 async 屬性
- VueJs中動態更改svg的相關屬性VueJSSVG
- 屬性和方法
- vue計算屬性和vue實力的屬性和方法Vue
- 屬性和監聽
- C#屬性和lamdaC#
- Winform Anchor和Dock屬性ORM
- calcMode, keyTimes和keySplines 屬性
- C#反射設定屬性值和獲取屬性值C#反射
- Python的tkinter獲取元件屬性和設定元件屬性Python元件
- css可繼承屬性和非繼承屬性一覽CSS繼承
- Python類屬性和例項屬性分別是什麼?Python
- SQL Server 生成C#公共實體屬性和私有屬性SQLServerC#
- CMake 屬性之全域性屬性
- Python __dict__屬性:檢視物件內部所有屬性名和屬性值組成的字典Python物件
- html中Position屬性值介紹和position屬性四種用法HTML
- Python函式屬性和PyCodeObjectPython函式Object
- 字串的常用屬性和方法字串
- disabled和readonly屬性區別
- 【01】DataFrame的建立和屬性
- WebElement的常用屬性和方法Web
- XML DOM – 屬性和方法概述XML
- xss標籤和屬性爆破
- PHP動態屬性和stdclassPHP
- 深入理解JavaScript類與物件:揭秘類欄位和靜態屬性的妙用,js靜態屬性和例項屬性JavaScript物件JS
- SVG <linearGradient> 線性漸變SVG
- React學習手記2-屬性校驗和預設屬性React
- vue例項的屬性和方法Vue
- 深入解析React props和state屬性React
- HTML 常用的標籤和屬性HTML
- JavaScript刪除和清空物件屬性JavaScript物件