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

SVG animation动画详解

2017-9-16 23:08| 作者: admin| 查看: 8961| 评论: 0|来自: 蚂蚁部落

不但可以使用SVG绘制静态图形,也可以利用动画元素创建动画效果。

SVG提供的动画元素主要有如下几个:

(1).<set>:在指定的时间之后执行指定的动画。

(2).<animate>:基础动画元素,实现单属性的动画效果。

(3).<animateTransform>:实现transform变换动画效果,参阅SVG animateTransform变换动画一章节。

(4).<animateMotion>:实现路径动画效果,参阅SVG animateMotion路径动画一章节。

本章节主要介绍<animate>元素实现的动画效果,其他动画效果可以参阅相关文章。

由于<set>元素比较简单,所以这里一并介绍,下面进入正题。

一.<set>元素:

此元素并不会产生任何动画效果,但是具有延迟的功能。

看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  width:300px;
  height:200px;
  border:1px solid blue;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect
        id="ant"
        x="10" y="10"
        width="50" height="50"
        fill="blue">
 
  </rect>
  <set xlink:href="#ant"
       attributeName="x"  
       to="100"
       begin="3s" />
</svg>
</body>
</html>

代码并没有动画效果,只会在3s之后将矩形从横坐标10位置移动到100位置。

<set>元素也具有一些属性,不过<animate>元素也同时具有,所以这里就不做介绍。

二.<animate>元素:

此元素可以创建单属性动画过渡效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  width:300px;
  height:200px;
  border:1px solid blue;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="ant"
        x="10" y="10"
        width="50" height="50"
        fill="blue">
 
  </rect>
  <animate
           xlink:href="#ant"
           attributeName="x"  
           to="100"
           dur="3s"
           begin="0s"/>
</svg>
</body>
</html>

用3s的时间,矩形元素从x轴10处以动画方式移动到100处。

下面对主要属性做一下介绍:

(1).attributeName:

它用来规定元素的哪个属性会产生动画效果。

比如上面代码的x轴坐标,也可以是透明度等类似属性。

(2).attributeType:

此属性用来为attributeName规定的属性值规定名称空间;支持三个属性值:CSS/XML/auto。

比如x和y属于XML,而opacity则属于css。

此属性通常不用显示规定,能够自动进行识别,且不用担心出错。

如果没有规定,默认auto,首先查找CSS属性列表中是否有匹配的值,如果没有,则去XML名称空间中查找。

(3).from、to和by:

from属性规定attributeName属性的起始值,如果起始值和默认值相同,from可以省略。

to属性规定attributeName属性的终止值。

by属性规定了一个相对于from的值(to是绝对值)。假如from值是10,by的值是50,那么最终值是60。

特别说明:如果同时规定了to和by,那么to的优先级会更高。

(4).values属性:

此属性功能与from和to类似。

它也是规定attributeName的起点和终点,并且起点和终点之间也可以有关键帧。

属性值是一个用分号分隔的一个或多个值。

特别说明:如果规定了values属性,那么from, to和by都会被忽略。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  width:500px;
  height:200px;
  border:1px solid blue;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="ant"
        x="10" y="10"
        width="50" height="50"
        fill="blue">
 
  </rect>
  <animate
           xlink:href="#ant"
           attributeName="x"  
           values="10;200;10;200"
           dur="3s"
           begin="0s"/>
</svg>
</body>
</html>

(5).begin和end属性:

begin属性用来规定动画开始的时间,end属性用来规定动画结束的时间。

这里重点介绍begin属性,end和它是相同的原理。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  width:500px;
  height:200px;
  border:1px solid blue;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="ant"
        x="10" y="10"
        width="50" height="50"
        fill="blue">
 
  </rect>
  <animate
           xlink:href="#ant"
           attributeName="x"  
           values="10;200;10;200"
           dur="3s"
           begin="click"/>
</svg>
</body>
</html>

上面的代码规定,点击矩形以后动画才会开始。

begin属性值其实相当复杂的:

[XML] 纯文本查看 复制代码
offset-value | syncbase-value | event-value | repeat-value | accessKey-value | media-marker-value | wallclock-sync-value | "indefinite"

(1).offset-value:

相对于svg文档开始时间(可以简单理解为svg文档就绪)的一个偏移值;之前所有的演示代码都是运用的这个语法格式,比如

[XML] 纯文本查看 复制代码
begin="5s"

上面表示文档就绪5s秒后开始动画的执行;偏移值可以是负数,代码实例如下:

[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="0" y="10"
        width="50" height="50"
        fill="blue">
 
  </rect>
  <animate
           xlink:href="#ant"
           attributeName="x"  
           values="0;200;0;200"
           dur="10s"
           begin="-1s"/>
</svg>
</body>
</html>

如果说正的偏移是规定文档就绪后多长时间开始动画,那么负的偏移可以简单理解为,在文档就绪之前就开始动画;以上面代码为例子,我们看到的动画运行初始状态是动画开始运行1秒后的状态。

(2).syncbase-value:

基于同步确定的时间点开始动画,语法结构如下:

[XML] 纯文本查看 复制代码
[元素的id].begin/end +/- 时间值

也就是基于一个指定元素开始或者结束时间点的偏移值。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  width:450px;
  height:200px;
  border:1px solid blue;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="one"
        x="0" y="10"
        width="50" height="50"
        fill="blue">
 
  </rect>
 
  <rect id="two"
        x="0" y="70"
        width="50" height="50"
        fill="blue">
 
  </rect>
  <animate xlink:href="#one"
           attributeName="x"
           values="0;200"
           dur="5s"
           fill="freeze"
           id="rect-anim" />
 
  <animate
           xlink:href="#two"
           attributeName="x"  
           values="0;200"
           fill="freeze"
           dur="5s"
           begin="rect-anim.begin + 1s"/>
</svg>
</body>
</html>

规定第二个动画在第一个动画开始后2s开始运行。

(3).event-value:

从名称就可以看到,动画的开始是与事件相关联的,语法结构如下:

[XML] 纯文本查看 复制代码
[元素的id].[事件类型] +/- 时间值

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  width:450px;
  height:200px;
  border:1px solid blue;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="ant"
        x="0" y="10"
        width="50" height="50"
        fill="blue">
 
  </rect>
 
  <animate
           xlink:href="#ant"
           attributeName="x"  
           values="0;200"
           fill="freeze"
           dur="2s"
           begin="click + 1s"/>
</svg>
</body>
</html>

上面的代码中,点击一秒后开始动画;偏移时间可以省略。

事件对象可以不是元素本身,看如下代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  width:450px;
  height:200px;
  border:1px solid blue;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="one"
        x="0" y="10"
        width="50" height="50"
        fill="blue">
  </rect>
  <rect id="two"
        x="0" y="70"
        width="50" height="50"
        fill="blue">
  </rect>
  <animate
           xlink:href="#two"
           attributeName="x"  
           values="0;200"
           fill="freeze"
           dur="5s"
           begin="one.click + 1s"/>
</svg>
</body>
</html>

上面的代码中,点击第一个矩形1秒后,第二个矩形开始动画效果。

(4).repeat-value:

规定动画是在其他某个动画重复执行指定次数后开始,语法结构如下:

[XML] 纯文本查看 复制代码
[元素的id].repeat(整数) +/- 时间值

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  width:450px;
  height:200px;
  border:1px solid blue;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="one"
        x="0" y="10"
        width="50" height="50"
        fill="blue">
  </rect>
  <rect id="two"
        x="0" y="70"
        width="50" height="50"
        fill="blue">
 
  </rect>
  <animate
           xlink:href="#one"
           attributeName="x"
           values="0;200"
           dur="5s"
           repeatCount="4"
           fill="freeze"
           id="rect-anim" />
  <animate
           xlink:href="#two"
           attributeName="x"  
           values="0;200"
           fill="freeze"
           dur="5s"
           begin="rect-anim.repeat(2)+2s"/>
</svg>
</body>
</html>

上面的代码中,第一个矩形动画重复两次2秒之后,第二个矩形元素开始动画行为。

(5).accessKey-value:

定义动画开始的快捷键,语法结构如下:

[XML] 纯文本查看 复制代码
accessKey("character") +/- 时间值

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  width:450px;
  height:200px;
  border:1px solid blue;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="ant"
        x="0" y="10"
        width="50" height="50"
        fill="blue">
  </rect>
  <animate
           xlink:href="#ant"
           attributeName="x"  
           values="0;200"
           fill="freeze"
           dur="5s"
           begin="accessKey(d)+1s"/>
</svg>
</body>
</html>

上面的代码,在点击d键一秒后开始动画效果。

特别说明:在写本文之时,谷歌浏览器并不支持,但是在火狐浏览器下能够顺畅运行。

(6).wallclock-sync-value:

以真实的世界时钟时间来规定动画的开始,语法结构如下:

[XML] 纯文本查看 复制代码
wallclock("wallclock-value")

w3c文档的介绍貌似有点复杂,引用w3c文档一个时间:1997-07-16T19:20+01:00。

实际应用中,出场的机会估计不会太多,更多内容可以参阅w3c关于Wallclock-sync values的介绍。

(7).indefinite:

只有在特殊条件下才能触发,比如通过beginElement()或者通过超链接调用,否则将会无限期等待下去。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  width:450px;
  height:200px;
  border:1px solid blue;
}
</style>
<script>
window.onload = function () {
  var obt = document.getElementById("bt");
  var animate = document.getElementById("rect-animate");
  obt.onclick = function () {
    animate.beginElement();
  }
}
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect id="ant"
        x="0" y="10"
        width="50" height="50"
        fill="blue">
 
  </rect>
  <animate id="rect-animate"
           xlink:href="#ant"
           attributeName="x"  
           values="0;200"
           fill="freeze"
           dur="5s"
           begin="indefinite"/>
  <a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rect-animate">          
    <text
          x="0" y="120"
          fill="red"
          font-size="20">查看效果</text>     
  </a>
</svg><br/>
<input type="button" id="bt" value="查看效果">
</body>
</html>

(6).dur属性:

此属性规定动画持续的时间,在前面的代码中都有涉及,就不演示了。

(7).calcMode, keyTimes和keySplines属性:

由于篇幅原因,此属性的用法参阅calcMode, keyTimes和keySplines属性一章节。

(8).repeatCount和repeatDur属性:

此属性的用法参阅SVG repeatCount和repeatDur属性一章节。

(9).fill属性:

此属性的用法参阅SVG fill动画属性一章节。

(10).restart属性:

此属性的用法参阅SVG restart动画属性一章节。


鲜花

握手

雷人

路过

鸡蛋
返回顶部