SVG动画入门

标签: svg 动画 | 发表时间:2015-07-17 00:53 | 作者:天梯梦
出处:http://www.iteye.com

今天我们继续来学习SVG动画方面的知识。一听到动画效果,你可能就觉的头都打啦。不要担心,SVG本身提供的动画属性非常容易使用,今天我们就来学习一下基础的知识。

SVG动画入门 SVG动画入门

 

基础知识

SVG中提供了 animate的方法来制作动画属性:

<svg>  
<rect width="200" height="200" fill="slategrey">  
<animate attributeName="height" from="0" to="200" dur="3s"/>  
</rect>  
</svg>

 

 

在上面的代码中,我们在元素里面添加了一个 <animate>的标签。 <animate>包含了下面的一些属性。

  • attributeName 这个是用来指定元素要运动的属性
  • from 这个是用来设置元素属性运动的初始值
  • to 这个是用来指定运动的终止的值的
  • dur 这个是用来指定动画执行的时长。它的语法格式可以去这个地址看看 Clock Value Syntax。比如 02:33就表示2分钟33秒,如下:
SVG动画入门 SVG动画入门

比如我们要给一个圆形( <circle>)制作一个动画效果,可以这样来写:

<svg>  
<circle r="100" cx="100" cy="100" fill="slategrey">  
<animate attributeName="r" from="0" to="100" dur="3s"/>  
</circle>  
</svg>

 

具体执行效果可以去这个地址看一看 demo

 

移动一个元素

移动一个SVG元素,我们只要指定元素移动目标的坐标就可以了分别为 xy

<svg>  
<rect x="0" y="0" width="200" height="200" fill="slategrey">  
<animate attributeName="x" from="0" to="200" dur="3s" fill="freeze"/>  
</rect>  
</svg>

 

在上面的代码中,我们指定把矩形元素从0移到200的位置,动画时长为3秒,这个矩形将会从左至右水平方向,移动到200的位置。这里注意一点的是在用 animate方法的时候,有一个 fill属性的值为 freeze,fill="freeze" 特性;该特性可用于所有animate元素,它指示SVG查看器在动画完成时让元素“冻结”在其最终位置上。

SVG动画入门 SVG动画入门

我们也可以使用它来制作一个圆形的动画效果,定义 cxcy的属性值就可以了:

<svg>  
<circle r="100" cx="100" cy="100" fill="slategrey">  
<animate attributeName="cy" from="100" to="200" dur="3s" fill="freeze"/>  
</circle>  
</svg>

 

具体执行结果,可以去这个地址看看 demo

 

给多个属性执行动画

上面我们只是针对一个属性来制作动画效果,我们当然也可以对多个属性来设置动画属性,我们来看一个例子:

<svg>  
<circle r="100" cx="110" cy="110" fill="slategrey" stroke="#000" stroke-width="7">  
<animate attributeName="r" from="0" to="100" dur="3s"/>  
<animate attributeName="stroke-width" from="0" to="10" dur="7s"/>  
</circle>  
</svg>

 

这里跟上面的差不多,只不过是多了一个 animate标签,来操纵多个属性 radiusstroke with

SVG动画入门 SVG动画入门

 

跟随路径运动

在上一篇文章 在SVG中定义文字文章中,我们说到了可以让文字跟随路径的方向来排版文字。当然让元素跟随路径的方向来运动也可以做到,下面我们来看一个例子。

<svg>  

<defs>  
<path id="thepath" fill="none" stroke="#000000" d="M0.905,0.643c0,0,51.428,73.809,79.047,166.19s68.095,38.572,107.144-18.095  
c39.047-56.667,72.381-92.382,113.333-42.381S335.5,178.5,374,200.5s82-18.5,97.5-33.5"/>  
</defs>  

<circle r="15" cx="15" cy="15" fill="slategrey">  

</svg>

 

我们把路径定义在 <defs>标签里,上面代码就是这样干的。为了能使元素跟随路径来运动,我们需要用 <animateMotion>来引入路径 <mpath>,如下所示:

<animateMotion dur="3s">  
<mpath xlink:href="#thepath"/>  
</animateMotion>  

 

SVG动画入门 SVG动画入门

代码执行效果可以去这个地址看看 demo

 

Transformations

我们也可以使用transformation中的 scaletranslaterotate来制作动画效果,这个要用到 <animateTransform>

<svg>  
<rect width="200" height="200" fill="slategrey">  
<animateTransform attributeName="transform" type="scale" from="0" to="1" dur="3s"/>  
</rect>  
</svg>

 

 

transformation的使用方法跟CSS3中的transformation的使用方法相似,可以去这篇文章详细了解一下transformation的用法 CSS3 2d transformation

SVG动画入门 SVG动画入门

代码执行效果可以去这个地址看看 demo

如果你很擅长用SVG来制作动画效果,可以尝试去模仿下这两个动画效果来创建两个动画效果 效果一效果二

用SVG创建动画效果比用Flash创建动画效果要好的一个优势是,不需要依赖第三方插件以及运行的性能也要比Flash要好。而且现在Adobe公司也停止了flash对安卓设备的支持,现在是时候在你的项目中,用SVG来创建动画效果了。

推荐阅读:

Demo源代码下载

 

原文: http://janily.gitcafe.io/life/2013/12/06/svg-animation/

本文: SVG动画入门

下载: source

 



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [svg 动画] 推荐:

SVG动画入门

- - Web前端 - ITeye博客
今天我们继续来学习SVG动画方面的知识. 一听到动画效果,你可能就觉的头都打啦. 不要担心,SVG本身提供的动画属性非常容易使用,今天我们就来学习一下基础的知识. SVG中提供了 animate的方法来制作动画属性:. 在上面的代码中,我们在元素里面添加了一个 的标签. 包含了下面的一些属性.

了解SVG

- - CSDN博客推荐文章
语言: JavaScript,HTML, SVG.         SVG- 可缩放矢量图形 ,是一个XML风格标记驱动的矢量图形的浏览器渲染引擎. 除了IE 9.0和Android V3之前版本外的所有浏览器都支持SVG. Canvas也有同样的支持情况,所以问题往往表现为:我们应该使用哪种方案.

SVG的用法

- - WebHek
先让大家感受一下用SVG技术制作的简单动画:. 如果你看不到这个演示,说明你的浏览器不支持SVG,请使用最新版的谷歌浏览器或火狐浏览器. 《 如何画出一条会动的线》这篇文章专门介绍了上面这SVG动画是如何简单的实现的. SVG是 Scalable Vector Graphics三个单词的首字母缩写.

[图]Snap.svg让Adode重拾了对可伸缩矢量图形(SVG)动画的信仰

- - 最科技 | 关注互联网科技与应用创新的科技媒体
距Adobe Systems 34亿美元收购Macromedia已经过去了8年的时间-后者的可伸缩矢量图形(SVG)格式以及Flash技术自然也属于这一部分. 而现在,鉴于浏览器开发人员渐渐地抛弃插件,该公司在周三于旧金山举办的HTML5开发者大会上,宣布了一个名叫Snap.svg的开源项目,旨在将类Flash的特性带到Web上.

SVG使用示例

- - JavaScript - Web前端 - ITeye博客
当用户在圆上点击时,使用js创建一个元素:. // 更高效的计时器,类似于setTimeout,不会发生丢. 已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

理解SVG的viewport,viewBox,preserveAspectRatio

- - Web前端 - ITeye博客
        一个svg,设置了viewBox之后,viewBox的长宽值如果都小于svg的viewport的长宽值,那么结果一定是放大;但是viewBox的长宽值一旦有一个值大于vewport之后,最后的实际效果就不是放大,而是缩小了.         因为viewBox的目的是要自己设置的长宽范围填满viewport.

【转载】SVG是什么?SVG有什么用途?

- - HTML5研究小组
随着网络上信息数据的大量涌现,如何正确显示和出版是有效传输、接收和利用它们的基础. 图形、图像是信息数据可视化的主要方式. 但现有的图形、图像格式存在着缺陷:非开放式,显示和印刷质量及适应性差,难以创建Web上图文信息的个性化定制、交互式以及实时动态方面的应用等. SVG正是在这样的背景下诞生的. SVG(Scalable Vector Graphics,可伸缩性矢量图形)是由万维网联盟(W3C)推出的基于XML编码的开放式图形、图像标准.

【转载】比较html5、GML、SVG、VML

- - HTML5研究小组
web图形方案比较 html5、 GML、 SVG、 VML. GML、SVG和VML都是基于XML的可用来描述矢量图形的标记语言,都是XML词表,它们的语法并不难理解,但它们都有各自不同的用途和特点,下面简单介绍一下. 是基于XML的空间信息编码标准,由OpenGIS Consortium (OGC)提出,得到了许多公司的大力支持,如Oracle、Galdos、MapInfo、CubeWerx等.

jQuery矢量SVG地图插件JVectorMap

- - HTML5资源教程
JVectorMap是一款基于jQuery的矢量地图插件,它是基于SVG结构的,和其他jQuery地图插件不同的是,jVectorMap是矢量地图,但是它同样支持地图缩放和地图平面移动等相应的功能. 由于JVectorMap是基于jQuery的,所以支持大部分主流的浏览器,应用也相当广泛.

未来必热:SVG Sprite技术介绍

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=4264. 这里所说的Sprite技术,没错,类似于CSS中的Sprite技术. 图标图形整合在一起,实际呈现的时候准确显示特定图标. 另,本文图片甚多,爪机党继续浏览需慎重. 二、SVG Sprite与symbol元素.