svg动画效果

svg的动画效果是基于动画标签元素实现的：

　　<animate>实现单属性的过渡效果，

　　<animateTransform>实现transform变换动画效果，

　　<animateMotion>实现路径动画效果。

svg的写法很灵活，样式可以写成标签属性也可以写在style里面，动画标签可以通过xlink指定元素，也可以写在动画元素的内部。如下演示animateTransform的xlink写法

animateTransform支持更多更灵活的属性设置：

values：多个关键点的值，替代from和to，例如 values="0;1;0"

keyTimes：跟values对应，各个点的时间点

calcMode：动画快慢方式。discrete | linear | paced | spline

keySplines：设置运动的贝塞尔控制点，calcMode为spline时有效对svg动画的更详细介绍

SVG 中 <path> 标签.

用<path>标签创建 SVG,就像用指令的方式来控制一只画笔,例如移动画笔到某一坐标位置,画一条线,画一条曲线,结束.<path>标签所支持的指令有以下儿种。

M = moveto(M X,Y):将画笔移动到指定的坐标位置,但未发生绘制
L = lineto(L X.Y): 両直线到指定的坐标位置
H = horizontal lineto(H X): 画水平线到指定的 X 坐标位置
V = vertical lineto(V Y):画垂直线到指定的Y坐标位置
C = curveto(C XI,YI.X2,Y2,ENDX,ENDY): 三次贝赛曲线
S = smooth curveto(S X2,Y2.ENDX,ENDY): 三次贝赛曲线
Q = quadratic Belzier curve(Q X.Y.ENDX,ENDY): 二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射前面路径后的终点
A=clliptical Arc(A RX.RY,XROTATION,FLAGI,FLAG2,X,Y): 弧线
Z=closepath:关闭路径

A指令用来绘制一段弧线,且.允许弧线不闭合。可以把A命令绘制的弧线想象成是椭圆的某一段,A指令以下有七个参数。

1)RX,RY指所在椭园的半轴大小.

2)XROTATION 指椭圆的 X 轴与水平方向顺时针方向夹角, 可以想象成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度。

3)FLAGI只有两个值,1表示大角度弧线,0为小角度弧线.

4)FLAG2只有两个值,确定从起点至终点的方向,1为顺时针,0为逆时针。

5)X,Y轴为终点坐标。

<!DOCTYPE html>
<html>
<body>

<p><b>Note:</b> This example only works in Firefox and Google Chrome.</p>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="20" y="20" width="250" height="250" style="fill:blue">
      <animate attributeType="CSS" attributeName="opacity" values="0.5;1;0.5" dur="1s" repeatCount="indefinite" />
  </rect>
</svg>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p><b>Note:</b> This example only works in Firefox and Google Chrome.</p>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="20" y="20" width="250" height="250" style="fill:blue">
    <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
  </rect>
</svg>

</body>
</html>

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
    <rect x="0" y="0" width="300" height="100" fill="yellow" stroke-width="1" stroke="red" />
    <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
        <animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
    </circle>
</svg>

svg动画效果

SVG 中 <path> 标签.

推荐阅读