您的位置:首页> HTML5教程> SVG教程

SVG accumulate和additive动画属性

2018-8-22 00:35| 作者: admin| 查看: 1239| 评论: 0|来自: 蚂蚁部落

关于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:具有动画附加效果。


鲜花

握手

雷人

路过

鸡蛋
返回顶部