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>
