svg线条动画

原创 ShanaFang 教程 基础知识 164阅读 2018-04-19 18:29:41 举报

SVG 线条动画

一、 什么是SVG

SVG,即可缩放的矢量图(Scalable Vector Graphics),是一种XML应用。什么是矢量图?在计算机的图形系统中有两大系统,分别是栅格图形(位图)和矢量图形。矢量图可以描述为一组绘图指令,而位图则是在特定的位置填充颜色的点。位图用来表示照片,矢量图形可以用来设计动画等。

二、需要知道的基础知识

  1. SVG中有个比较重要的属性分支,名为stroke, 中文软件中称之为“描边”。参考文档
  • stroke 表示描边颜色
  • stroke-width 表示描边的粗细
  • stroke-linecap 表示描边的表现形式,可用值有:butt, round, square, inherit. 表现如下图:stroke-linecap表现形式
  • stroke-linejoin 表示描边转角的表现方式。可用值有:miter, round, bevel, inherit. 表现如下图:stroke-linejoin不同值的表现
  • stroke-dasharray 表示虚线描边。可选值为:none, <dasharray>, inherit. 其中,none表示不是虚线;<dasharray>为一个逗号或空格分隔的数值列表。表示各个虚线端的长度。可以是固定的长度值,也可以是百分比值;inherit表继承。
  • stroke-dashoffset 表示虚线的起始偏移。可选值为:<percentage>, <length>, inherit. 百分比值,长度值,继承。两个值时,第一个是虚线的宽度,第二个是虚线之间的间距。
  • stroke-opacity 表示描边透明度。默认是1

而与我们这次相关的动画效果只有stroke-dasharraystroke-dashoffset

  1. SVG形状
    名称描述属性
    <rect>矩形x, y:左侧顶点坐标<br />rxry:设置圆角<br />width:矩形宽<br />height:矩形高
    <circle>圆形cx,cy:圆心坐标<br />r:半径
    <ellipse>椭圆cx,cy:圆心坐标<br />rx:在x轴的椭圆半径<br />ry:在y轴的椭圆半径
    <line>直线x1,y1:起点坐标<br />x2,y2:终点坐标
    <polyline>折线points:点的集合<br /><polyline fill="none" stroke="black" points="20,100 40,60 70,80 100,20"/>
    <polygon>多边形points:点的集合(与polyline的用法一样)
    path路径d:路径<br />pathlength:指定路径长度<br />fillOpacity:填充透明度

❤ path属性d (参考文档)

名称描述参数
M = moveto点之间的移动<path d="M50,100..." />
L = lineto直线,从当前点到终点<br />V:垂直直线<br />H:水平直线<path d="M50,100 L100,100" /><br /><path d="M50,100 V200"><br /><path d="M50,100 H100">
Q = quadratic Belzier curve二次贝塞尔曲线cpx1 cpy1:控制点<br /> x y:终点坐标
T = smooth quadratic Belzier curve平滑二次贝塞尔曲线
C = curveto三次贝塞尔曲线cpx1 cpy1:控制点1<br />cpx2 cpy2:控制点2<br /> x y:终点坐标
S = smooth curveto平滑的三次贝塞尔曲线cpx cpy:控制点<br /> x y:终点坐标
A = arcto圆弧rx,ry:圆弧的x和y轴半径<br />xAxisRotate:x轴的旋转角度<br />LargeArcFlag:圆弧的角度小于180度,为0;大于或等于180度,则为1<br />SweepFlag:以负角度绘制为0,否则为1<br /> x,y:终点的x,y坐标
Z = closepath关闭路径

注释:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。

三、栗子

1、基础动画效果
2、场景一:饼图

想使用饼图,但是第三方图标库太大且不易修改

函数值的说明
matrix(a,b,c,d,e,f)数值a:水平方向上的尺寸缩放<br />数值b:垂直方向上的倾斜率(sin(x))<br />数值c:水平方向上的倾斜率(-sin(x))<br />数值d:垂直方向上的尺寸缩放<br />数值e:水平方向上的移动距离<br />数值f:垂直方向上的移动距离
3、场景二:自定义的loading动画效果

animateMotion来设置动画,可以引用一个事先定义好的动画路径,让图像元素按路径定义的方式运动:

  • dur:动画的时间
  • repeatCount:重复次数
  • keyPoints:运动路径的关键点
  • timePoints:时间的关键点
  • calcMode:控制动画的运动速率的变化,discrete | linear | paced | spline四个属性可选
  • mpath:指定一个外部定义的路径
4、场景三:倒计时⏳
5、快速制作动画
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复