SVG animateTransform變換動畫

admin發表於2018-09-13
SVGORM動畫

SVG提供的動畫元素主要有如下幾個:

（1）.<set>:在指定的時間之後執行指定的動畫，具體參閱SVG animation動畫一章節。

（2）.<animate>:基礎動畫元素，實現單屬性的動畫效果，具體參閱SVG animation動畫一章節。

（3）.<animateTransform>:實現transform變換動畫效果。

（4）.<animateMotion>:實現路徑動畫效果，具體參閱SVG animateMotion路徑動畫一章節。

本章節將通過程式碼例項詳細介紹一下<animateTransform>元素的用法。

animateTransform是animate+transform的組合，很明顯是對svg元素transform變換的動畫操作。

關於transform變換可以參閱以下幾篇文章:

（1）.SVG transform用法詳解一章節。

（2）.SVG transform變換深入理解一章節。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:250px;
  height:200px;
  border:1px solid blue;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="ant"
        x="20" y="20"
        width="50" height="50"
        fill="blue">
  </rect>
  <animateTransform
                    xlink:href="#ant"
                    attributeName="transform"
                    begin="0s"
                    dur="3s"
                    type="scale"
                    from="1" to="2"
                    repeatCount="indefinite" />
</svg>
</body>
</html>

上面的程式碼可以在3秒內，將舉行放大2倍，下面介紹一下相關屬性。

attributeName、begin、dur、from、to和repeatCount參閱SVG animation動畫一章節。

type屬性:

此屬性用來規定transform的變換型別。

from、to和by屬性:

這兩個屬性基本用法可以參閱SVG animation動畫一章節。

這裡再通過一個程式碼例項做一下加強，如下:

[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:100px;
}
</style>
</head>
<body>
<svg width="500" height="250" >
  <rect
        x="50" y="50"
        width="50" height="50"
        fill="red">
    <animateTransform
                      attributeName="transform"
                      attributeType="XML"
                      type="rotate"
                      from="0 75 75"
                      to="360 75 75"
                      dur="2"
                      repeatCount="indefinite" />
  </rect>
</svg>          
</body>
</html>

上面的程式碼可以設定矩形圍繞點（75,75）進行旋轉，這和transform變換的語法是想通的。

相關文章