如何实现svg动画

这篇文章主要为大家展示了“如何实现svg动画”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何实现svg动画”这篇文章吧。

　　一、SVG 的 animation

　　SVG animation 有五大元素，他们控制着各种不同类型的动画，分别为：

　　set

　　animate

　　animateColor

　　animateTransform

　　animateMotion

　　set 为动画元素设置延迟，此元素是SVG中最简单的动画元素，但是他并没有动画效果。

　　使用语法：

　　attributeName ：是要改变的元素属性名称。

　　attributeType ：是表明attributeName属性值的列表，支持三个固定参数 CSS/XML/auto，如x,y以及transform属于XML，opacity属于CSS。auto是浏览器自动判别的意思，也是默认值，如果你不知道该选哪个就填auto，浏览器自己判别。

　　to ：动画结束的属性值。

　　begin ：动画延迟时间。

　　eg：绘制一个半径为200的圆，4秒之后，半径变为50。

　　<svg width="320" height="320">

　　<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">

　　<set attributeName="r" attributeType="XML" to="50" begin="4s" />

　　</circle>

　　</svg>

　　?

　　是基础的动画元素，实现单属性的过渡效果。

　　使用语法：

　　from ：过渡效果的属性开始值。

　　to：过渡效果的属性结束值。

　　begin：动画开始时间。

　　dur：动画过渡时间，控制动画速度。

　　repeatCount：动画重复次数。

　　eg：绘制一个半径为200的圆，4秒之后半径在2秒内从200逐渐变为50。

　　<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">

　　<animate attributeName="r" from="200" to="50"

　　begin="4s" dur="2s" repeatCount="2"></animate>

　　</circle>

　　?

　　控制颜色动画，animate也可以实现这个效果，所以该属性目前已被废弃。

　　实现transform变换动画效果，与css3的transform变换类似。实现平移、旋转、缩放等效果。

　　使用语法：

　　repeatCount：重复次数，设置为 indefinite 表示无限循环，一直执行。

　　type：添加 transform 变换类型。

　　eg：绘制一个半径为200的圆，4秒之后开始缩放，在2秒内从1.5缩小到0倍。

　　<svg width="320" height="320">

　　<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">

　　<animateTransform attributeName="transform" begin="4s"

　　dur="2s" type="scale" from="1.5" to="0"

　　repeatCount="indefinite"></animateTransform>

　　</circle>

　　</svg>

　　可以定义动画路径，让SVG各个图形，沿着指定路径运动。

　　使用语法：

　　path：定义路径，使用语法与《HTML5(八)&mdash;&mdash;SVG 之 path 详解》path的d属性一致。

　　begin：延迟时间。

　　dur：动画执行时间。

　　eg：绘制一个半径为10的圆，延迟4秒从左上角运动的右下角。

　　<svg width="320" height="320">

　　<circle cx="0" cy="0" r="10" style="stroke: none; fill: #0000ff;">

　　<animateMotion

　　path="M 0 0 L 320 320"

　　begin="4s" dur="2s"

　　></animateMotion>

　　</circle>

　　</svg>

　　?

　　实际制作动画的时候，动画太单一不酷，需要同时改变多个属性时，上边的四种元素可以互相组合，同类型的动画也能组合。以上这些元素虽然能够实现动画，但是无法动态地添加事件，所以接下来我们就看看 js 如何制作动画。

　　二、JavaScript 控制

　　上篇文章我们介绍js可以操作path，同样也可以操作SVG的内置形状元素，还可以给任意元素添加事件。

　　给SVG元素添加事件方法与普通元素一样，可以只用on+事件名 或者addEventListener添加。

　　eg：使用SVG绘制地一条线，点击线条地时候改变 x1 ,实现旋转效果。

　　<svg width="800" height="800" id="svg">

　　<line id="line" x1="100" y1="100"

　　x2="400" y2="300"

　　stroke="black" stroke-width="5"></line>

　　</svg>

　　<script>

　　window.onload=function(){

　　var line=document.getElementById("line")

　　line.onclick=function(){

　　let start=parseInt(line.getAttribute("x1")),

　　end=400,dis=start-end

　　requestAnimationFrame(next)

　　let count=0;

　　function next(){

　　count++

　　let a=count/200,cur=Math.abs(start+ dis*a)

　　line.setAttribute('x1',cur)

　　if(count<200)requestAnimationFrame(next)

　　}

　　}

　　}

　　</script>

　　?

　　js制作的SVG动画，主要利用 requestAnimationFrame 来实现一帧一帧的改变。

　　我们上述制作的 SVG 图形、动画等，运行在低版本IE中，发现SVG只有IE9以上才支持，低版本的并不能支持，为了兼容低版本浏览器，可以使用 VML ,VML需要添加额外东西，每个元素需要添加 v:元素，样式中还需要添加 behavier ，经常用于绘制地图。由于使用太麻烦，所以我们借助 Raphael.js 库。

　　三、Rapha?l.js (拉斐尔)

　　Raphael.js是通过SVG/VML+js实现跨浏览器的矢量图形，在IE浏览器中使用VML，非IE浏览器使用SVG，类似于jquery，本质还是一个javascript库，使用简单，容易上手。

　　使用之前需要先引入Raphael.js库文件。cdn的地址为：

　　Rapheal有两种创建画布的方式：

　　第一种：浏览器窗口上创建画布

　　创建语法：

　　var paper=Raphael(x,y,width,height)

　　x,y是画布左上角的坐标，此时画布的位置是绝对定位，有可能会与其他html元素重叠。width、height是画布的宽高。

　　第二种：在一个元素中创建画布

　　创建语法：

　　var paper=Raphael(element, width, height);

　　element是元素节点本身或ID width、height是画布的宽度和高度。

　　画布创建好之后，该对象自带SVG内置图形有矩形、圆形、椭圆形。他们的方法分别为：

　　paper.circle(cx, cy, r); // (cx , cy)圆心坐标 r 半径

　　paper.rect(x, y, width, height, r); // (x,y)左上角坐标 width宽度 height高度 r圆角半径(可选)

　　paper. ellipse(cx, cy, rx, ry); // (cx , cy)圆心坐标 rx水平半径 ry垂直半径

　　eg：在div中绘制一个圆形，一个椭圆、一个矩形。

　　<div id="box"></div>

　　<script>

　　var paper=Raphael("box",300,300)

　　paper.circle(150,150,150)

　　paper.rect(0,0,300,300)

　　paper.ellipse(150,150,100,150)

　　</script>

　　?

　　运行结果如下：

　　?

　　除了简单图形之外，还可以绘制复杂图形，如三角形、心型，这时就使用path方法。

　　使用语法：paper.path(pathString)

　　pathString是由一个或多个命令组成，每个命令以字母开始，多个参数是由逗号分隔。

　　eg：绘制一个三角形。

　　还可以绘制文字，如果需要换行，使用 \n 。

　　文字语法：paper.text(x,y,text)

　　(x,y)是文字坐标，text是要绘制的文字。

　　图形绘制之后，我们通常会添加stroke、fill、stroke-width等让图形更美观，Raphael使用attr给图形设置属性。

　　使用语法：circle.attr()

　　如果只有属性名没有属性值，则是获取属性，如果有属性值，则是设置属性。

　　注意：如果只设置一个属性时，可以省略&lsquo;{}&rsquo;。如：rect.attr('fill','pink')

　　eg：给上边的矩形添加边框和背景色。

　　<div id="box"></div>

　　<script>

　　var paper=Raphael("box",300,300)

　　let rect=paper.rect(100,100,150,200)

　　rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})

　　</script>

　　?

　　RaphaelJS一般具有以下事件：

　　click、dblclick、drag、hide、hover、mousedown、mouseout、mouseup、mouseover等以及对应的解除事件，只要在前面加上“un”就可以了（unclick、undblclick）。

　　使用语法：

　　animate为指定图形添加动画并执行。

　　使用语法：

　　属性名和属性值就根据你想要的动画类型加就ok。

　　time：动画所需时间。

　　type：指动画缓动类型。常用值有：

　　linear - 线性渐变

　　ease-in | easeIn | < - 由慢到快

　　ease-out | easeOut | > - 由快到慢

　　ease-in-out | easeInOut | <> - 由慢到快再到慢

　　back-in | backIn - 开始时回弹

　　back-out | backOut - 结束时回弹

　　elastic - 橡皮筋

　　bounce - 弹跳

　　eg：点击矩形，矩形缓缓变大。

　　<div id="box"></div>

　　<script>

　　var paper=Raphael("box",800,500)

　　let rect=paper.rect(100,100,150,100)

　　rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})

　　rect.attr('fill','pink')

　　rect.click(function(){

　　rect.animate({

　　"width":300,

　　"height":300

　　},1000,"bounce")

　　})

　　</script>

　　?

　　复制上边的代码，分别在各个浏览器和低版本IE浏览器运行，发现都可以正常运行。SVG的动画库挺多了，我们介绍了拉斐尔，有兴趣的小伙伴可以自行找找其他库。

以上是“如何实现svg动画”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！