SVG accumulate和additive動畫屬性

admin發表於2018-08-22
SVG動畫
關於SVG更多動畫內容可以參閱SVG animation動畫詳解一章節。

一.accumulate屬性:

此屬性規定是否將當前動畫結束的狀態作為下一次動畫的起始狀態。

具有兩個屬性值:

（1）.none:預設值，表示從起始狀態進行下一次動畫。

（2）.sum:表示從當前動畫結束的狀態為起始點進行下一次動畫。

程式碼例項如下: 

[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="10" y="10"
        width="100" height="50"
        fill="red">
    <animate attributeType="XML"
             attributeName="x"
             from="10" to="50"
             dur="1s"
             accumulate="sum"
             repeatCount="3"
             begin="click"
             fill="freeze">
    </animate>
  </rect>
</svg>          
</body>
</html>

預設狀態下，重複的動畫都是從最初的起始狀態重新再執行一次；如果將accumulate屬性值設定為"num"，那麼下一次動畫的指定都是在上一次動畫結束狀態基礎上進行的，那麼上面程式碼的執行結果也就很好理解了。

二.additive屬性:

此屬性規定正在進行動畫行為的屬性是否可以進行附加。

預設情況下，高優先順序的動畫會被低優先順序的覆蓋，看如下程式碼例項: 

[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;
  width:400px;
  height:300px;
  margin:200px;
}
</style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect id="ant"
        x="0" y="0"
        width="40" height="40"
        fill="green">
  </rect>
  <animate xlink:href="#ant"
           attributeName="x"
           from="0"
           to="100"
           dur="5s"
           begin="0s" />
  <animate xlink:href="#ant"
           attributeName="x"
           from="0"
           to="100"
           dur="5s"
           begin="0s" />
</svg>          
</body>
</html>

程式碼為矩形的x屬性設定了兩個動畫效果，但是第二個會覆蓋第一個的效果，也就是優先順序低覆蓋優先順序高。

再來看一段程式碼例項: 

[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;
  width:400px;
  height:300px;
  margin:200px;
}
</style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect id="ant"
        x="0" y="0"
        width="40" height="40"
        fill="green">
  </rect>
  <animate xlink:href="#ant"
           attributeName="x"
           from="0"
           to="100"
           dur="5s"
           begin="0s" />
  <animate xlink:href="#ant"
           additive="sum"
           attributeName="x"
           from="0"
           to="100"
           dur="5s"
           begin="0s" />
</svg>          
</body>
</html>

為第二個動畫元素新增additive="sum"，是不是動畫速度加快了一倍，這就是優先順序高的動畫效果會附加到優先順序低的效果智商。

與accumulate一樣，additive具有兩個屬性值：

（1）.none:預設值，覆蓋前面的動畫效果。

（2）.sum:具有動畫附加效果。

相關文章