svg动画实现(Svg动画)

svg动画的实现方式有很多种，也有很大的SVG动画库。现在来介绍一下如何实现SVG动画。
一、动画VG动画有五个元素，控制各种类型的动画，分别是：
set animate color animate tetraformanimate Motion 1.1和setset设置动画元素的延迟。这个元素是SVG中最简单的动画元素，但是没有动画效果。使用语法：
AttributeName:是要更改的元素的属性名。Attribute:是指示attributeType的属性值的列表。它支持三个固定参数CSS/XML/auto，比如x，y和transform属于XML，opacity属于CSS。Auto表示浏览器自动判断，也是默认值。如果不知道选哪个，就填auto，浏览器会自行判断。到：动画结束的属性值。开始：动画延迟时间。画一个半径为200的圆。4秒钟后，半径变为50。
1.2.animate是基本的动画元素，实现单一属性的过渡效果。使用语法：
From:过渡效果的属性起始值。到：过渡效果的属性结束值。开始：动画开始时间。Dur:动画过渡时间，控制动画速度。RepeatCount:动画重复的次数。画一个半径为200的圆。4秒后，半径在2秒内从200逐渐变为50。
1.3.animateColor控制彩色动画。animate也能达到这个效果，所以目前已经放弃了这个属性。1.4.animatetransform实现变换动画效果，类似于css3的变换。实现平移、旋转、缩放等效果。使用语法：
RepeatCount:重复的次数，设置为不定表示无限循环，总是执行。类型：添加转换转换类型。例：画一个半径为200的圆，4秒后开始缩放，2秒内从1.5倍缩小到0倍。1.5.animateMotion可以定义动画路径，让SVG的所有图形都能沿着指定的路径移动。使用语法：
Path:定义路径，使用的语法与《HTML5(八)——SVG 之 path 详解》 path的D属性一致。开始：拖延时间。Dur:动画执行时间。例：画一个半径为10的圆，从左上角移动到右下角，延时4秒。
实际制作动画时，动画太单一，不酷。当需要同时改变多个属性时，上述四个元素可以相互组合，也可以组合成同类型的动画。这些元素虽然可以实现动画，但是不能动态添加事件，所以我们来看看js是如何动画的。
第二，JavaScript控件。在上一篇文章中，我们介绍了js可以操作path，以及SVG内置的shape元素，还可以向任何元素添加事件。向SVG元素添加事件的方法与普通元素相同，只能通过使用on event name或addEventListener来添加。例：用SVG画一条线，当你点击这条线时，改变x1实现旋转效果。
js制作的SVG动画主要使用requestAnimationFrame逐帧变化。SVG图形、动画等。上面制作的在较低版本IE中运行，发现SVG只有IE9以上版本支持，较低版本不支持。为了兼容较低版本的浏览器VML，VML需要添加一些额外的东西，v:元素到每个元素，behavier到风格，这是经常用来绘制地图。因为用起来太麻烦，所以我们用Raphael.js库。
三。Raphal.js (Raphael) Raphael.js是通过SVG/VML js实现跨浏览器的矢量图形。VML用于IE浏览器，SVG用于非IE浏览器，类似于jquery。Raphael.js本质上是一个javascript库，简单易用。在使用之前，需要引入Raphael.js库文件。cdn的地址是：https://cdn.bootcdn.net/ajax/libs/raphael/2.3.0/raphael.js3.1,创作油画拉斐尔。创建画布有两种方法：第一种方法是在浏览器窗口上创建画布。创建语法：var paper=Raphael (x，y，width，height) x，y是画布左上角的坐标。此时，画布的位置是绝对的，可能会与其他html元素重叠。宽度和高度是画布的宽度和高度。二、在一个元素中创建画布：var paper=raphael (element，width，height)；是元素节点本身还是ID宽度和高度是画布的宽度和高度。3.2.在创建了绘图画布之后，对象就有了SVG。内置图形为矩形、圆形和椭圆形。他们的方法是：
paper.circle(cx，cy，r)；//(cx，cy)中心坐标r半径paper.rect(x，y，宽度，高度，r)；//(x，y)左上角坐标宽度高度r圆角半径(可选)纸张。椭圆(cx，cy，rx，ry)；//(cx，cy)中心坐标rx水平半径ry垂直半径
用p画一个圆，一个椭圆和一个矩形。
运行结果如下：
除了简单的图形，还可以画复杂的图形，比如三角形和心形。在这种情况下，使用路径方法。使用语法：paper . path(path string)path string由一个或多个命令组成，每个命令以字母开头，多个参数用逗号分隔。画一个三角形。
SJ=paper.path (‘m 0，0l100，100l100，0’ z ‘ ‘)也可以画文字。如果需要换行，使用\ n .语法：paper.text(x，y，text)(x，y)是文本坐标，text是要绘制的文本。3.3.设置属性在绘制图形后，我们通常会添加笔触、填充、笔触宽度等。让图形更漂亮。Raphael使用attr来设置图形的属性。使用语法：circle.attr({ ‘属性名’，’属性值’，’属性名’，’属性值’，})如果只有属性名没有属性值，那就是获取属性，如果有，那就是设置属性。注意：如果只设置了一个属性，可以省略“{}”。例如：rect.attr(‘fill ‘，’ pink ‘)例如：给顶部矩形添加边框和背景色。
3.4.添加事件RaphaelJS一般有以下事件：click、dblclick、拖动、隐藏、悬停、mousedown、mouseout、mouseup、mouseover等。而对应的取消事件，只要在前面加上“un”即可(unclick，undblclick)。使用语法：
Obj.click(function(){ //需要操作什么})3.5。Add animate为指定图形添加动画并执行。使用语法：
Obj.animate({ ‘属性名1′:属性值1，’属性名2’ 3360属性值2，}、时间、类型)属性名和属性值根据你想要的动画类型添加，就ok了。时间：动画制作所需的时间。类型：指动画缓动类型。常见的值有：
线性-线性渐变缓入|缓出|-从慢到快缓出|缓出|-从快到慢缓入|缓出|-从慢到快到慢回入|回入回出|回出端弹性橡皮筋反弹-反弹例如：
复制上面的代码，分别在各个浏览器和较低版本的IE浏览器中运行，发现都可以正常运行。SVG有很多动画库。我们介绍了拉斐尔，有兴趣的朋友可以自行寻找其他图书馆。