VG 动画有很多种实现方法，也有很大SVG动画库，现在我们就来介绍 svg动画实现方法都有哪些？

一、SVG 的 animation

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

• set
• animate
• animateColor
• animateTransform
• animateMotion

1.1、set

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

使用语法：

<set attributeName="" attributeType="" to="" begin="" />

• 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>

1.2、animate

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

使用语法：

<animate 
 attributeName="r" 
 from="200" to="50" 
 begin="4s" dur="2s" 
 repeatCount="2"
></animate>

• 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>

1.3、animateColor

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

1.4、animateTransform

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

使用语法：

<animateTransform attributeName="transform"  type="scale" 
 from="1.5" to="0" 
 begin="2s"  dur="3s" 
 repeatCount="indefinite"></animateTransform>

• 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>

1.5、animateMotion

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

使用语法：

<animateMotion 
 path="M 0 0 L 320 320" 
begin="4s" dur="2s"></animateMotion>

• path：定义路径，使用语法与《HTML5(八)——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的地址为：https://cdn.bootcdn.net/ajax/libs/raphael/2.3.0/raphael.js

3.1、创建画布

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

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

创建语法：

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

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

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

创建语法：

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

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

3.2、绘制图形

画布创建好之后，该对象自带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：绘制一个三角形。

let sj = paper.path("M 0,0 L100,100 L100,0 'Z'")

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

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

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

3.3、设置属性

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

使用语法：circle.attr({"属性名","属性值","属性名","属性值",...})

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

注意：如果只设置一个属性时，可以省略‘{}’。如：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>

3.4、添加事件

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

使用语法：

obj.click(function(){
 //需要操作的内容
})

3.5、添加动画

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

使用语法：

obj.animate({
 "属性名1":属性值1,
 "属性名2":属性值2,
  ...
},time,type)

属性名和属性值就根据你想要的动画类型加就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的动画库挺多了，我们介绍了拉斐尔，有兴趣的小伙伴可以自行找找其他库。

人可能会疑惑，我为什么专门用一节内容来说边框和圆角。其实，不为别的，只为它们在开发中，在Web系统中，在手机页面中，太常用了。有边框的页面，让人耳目一新，一目了然；有圆角的内容，让人赏心悦目，心旷神怡。说的有点夸张了，就这么着吧。

边框(border)一般为长方形形状，有上下左右四条边，CSS边框属性允许你指定一个元素边框的样式和颜色。CSS的圆角(border-radius)方法，可给任何元素制作 "圆角"效果。

11.1 边框逼格

在CSS中，你可以通过border和其延伸的，如border-style，来实现边框的效果。上边框相关的有border-top-style样式、border-top-color颜色、border-top-width宽度和组合了它们的border-top。下、左右边框类似，换成对应的单词即可。

边框样式(border-style)常用的有dotted(点线)、dashed(虚线)、solid(实线)、double(双边框)这四种，不常用的有groove(3D沟槽)、ridge(3D脊边)、inset(3D嵌入)和outset(3D突出)。

/* --------在样式表文件中---------- */
/*4条边框一起设置*/
.four-border {
    width: 800px;
    border: 2px solid darkgreen;;
}

/*四条边框可个性化*/
.four-style {
    width: 800px;
    /* 上、右、下、左*/
    border-width: 1px 2px 3px 4px;
    /*上、右左、下*/
    border-style: solid dashed double;
    /*上下和右左*/
    border-color: darkgreen coral;
}

/*单条边框设置*/
.one-style {
    width: 800px;
    border-top: 1px groove orangered;
    border-bottom-width: 5px;
    border-bottom-style: inset;
    border-bottom-color: darkgreen;
}

HTML文件内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>边框逼格</title>
    <link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<br/><br/>
<div class="four-border">
    border统一设置四条边框<br/>
    顺序为：border-width、border-style和border-color.
</div>
<br/><br/>
<div class="four-style">
    四条边框一起设置，风格可不同<br/>
    顺序为:上、右、下、左。<br/>
    1. 只有一个值(如：border-width:2px)：表示4条边框全部一样；<br/>
    2. 有两个值(如：border-width:2px 3px)：表示上下和右左;<br/>
    3. 有三个值(如：border-width:2px 3px 1px)：表示上、右左、下;<br/>
    4. 有四个值(如：border-width:2px 3px 1px 5px):表示上、右、下、左。
</div>
<br/><br/>
<div class="one-style">
    单独一天边框进行设置<br/>
    border-top：顶部宽度、样式、颜色，一起设置<br/>
    border-top-width:上边框宽度；<br/>
    border-top-style:上边框样式；<br/>
    border-top-color:上边框颜色。
    <br/>
</div>
</body>
</html>

输出结果

11.2 圆角风格

使用CSS的border-radius 属性，你可以给任何元素制作 "圆角"。 border-radius统一指定4个圆角，顺序为左上、右上、右下和左下。如果要特定指定某个角的话，用border-top-left-radius等方式即可。

在样式表ys2.css文中的内容

/*4个角统一指定*/
.four-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-radius: 15px;
    vertical-align: middle;
    text-align: center;
}

/*单独指定一个角*/
.one-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的内容

<br/><br/>
<div class="four-radius">
    统一设置4个圆角<br/>
    一个值： 四个圆角值相同;<br/>
    两个值: 左上角与右下角，右上角与左下角;<br/>
    三个值: 左上角, 右上角和左下角，右下角;<br/>
    四个值: 左上角，右上角，右下角，左下角。
</div>
<br/>
<div class="one-radius">
    单独指定某个角<br/>
    border-top-left-radius：左上角;<br/>
    border-top-right-radius：右上角;<br/>
    border-bottom-right-radius：右下角;<br/>
    border-bottom-left-radius：左下角。
</div>

输出结果

11.3 圆角边框

不要重复造轮子，所以好多程序员一遇到问题，就喜欢搜索，我也是，哈哈哈~。CSS有指定边框的属性，也有圆角的属性，将其放在一起，是不是就可以实现圆角边框?答案毋庸置疑，答案是肯定的。

在样式表ys2.css文件中的内容

/*圆角边框*/
.corners {
    border-radius: 50px;
    border: 3px solid #8AC007;
    padding: 50px;
    width: 720px;
    line-height: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的内容

<div class="corners">
    边框属性和圆角属性，组合成圆角边框
</div>

输出结果

好了，有关CSS的圆角边框内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。

#前端##HTML5##CSS##程序员##Web#