SVG 线条动画入门

作者:信息技术

SVG 线条动画入门

2016/12/29 · HTML5 · SVG, 动画

正文小编: 伯乐在线 - chokcoco 。未经小编许可,幸免转载!
款待出席伯乐在线 专栏作者。

万般我们说的 Web 动画,饱含了三大类。

  • CSS3 动画
  • javascript 动画(canvas)
  • html 动画(SVG)

私家以为 3 种动画半斤八两,实际行使中依据了解情形作出选取,本文研究的是本人感到 SVG 中在实际项目中十二分有选用价值 SVG 线条动画。

  • CSS3 动画
  • javascript 动画(canvas)
  • html 动画(SVG)

举个栗子

SVG 线条动画,在有的特定的场子下得以化解接纳 CSS 不能实现的动画片。越发是在进程条方面,看看近期项目里的三个小要求,三个这种造型的进程条:

图片 1

把当中的进程条单独拿出去,也便是索要实现那样四个效果:

图片 2

脑洞大开一下,使用 CSS3 如何兑现那样叁个进度条呢。

CSS3 是足以成功的,正是很麻烦。然则假诺使用 SVG 的话,一下子就解决了。

See the Pen 非寻常进程条 by Chokcoco (@Chokcoco) on CodePen.

咱俩只要你在阅读本文的时候有了自然的 SVG 基础,上边代码看看就懂了,好了,本文到此甘休。

图片 3

行吗,依然一步一步解释,下边进程条的要害 SVG 代码如下:

<svg version="1.1" xmlns="" xmlns:xlink="" xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400"> <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-path"/> <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-fill"/> </svg>

1
2
3
4
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400">
  <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-path"/>
  <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-fill"/>
</svg>

个人认为 3 种动画各有高低,实际运用中依据理解景况作出抉择,本文商讨的是我感到 SVG 中在其实项目中十三分有应用价值 SVG 线条动画。

SVG 为何

可缩放矢量图形,即SVG,是W3C XML的分枝语言之一,用于标识可缩放的矢量图形。(摘自MDN)

上边代码中,先谈谈 svg 标签:

  • version: 表示 `` 的本子,方今独有 1.0,1.1 两种
  • xmlnshttp://www.w3.org/2000/svg 固定值
  • xmlns:xlinkhttp://www.w3.org/1999/xlink 固定值
  • xml:spacepreserve 固定值,上述四个值固定,表示命名空间,当数码单独存在svg文本内时,那3个值无法轻巧
  • class:便是大家熟谙的 class
  • width | height: 定义 svg 画布的轻重缓急
  • viewbox: 定义了画布上得以显得的区域,当 view博克斯 的深浅和 svg 区别一时候,viewBox 在显示屏上的展现会缩放至 svg 同等大小(暂且能够毫不通晓)

有了 svg 标签,大家就能够愉悦的在个中增添 SVG 图形了,上面,我在 svg 中定义了四个 polyline 标签。

 

SVG 基本造型

polyline:是SVG的八在那之中央造型,用来成立一两种直线连接五个点。

其实,polyline 是八个相比不时用的造型,相比较常用的是pathrectcircle 等。这里本身利用polyline 的源委是索要使用 stroke-linejoin 和 stroke-linecap 属性,在线段连接处成立狡猾过渡角。

SVG 中定义了有个别主导造型,在这里起彼伏下文在此以前,建议点进去先驾驭一些主导图形的价签及写法:

图片 4

举个栗子

SVG 线条动画,在局地特定的场面下能够消除使用 CSS 不可能形成的卡通。特别是在进程条方面,看看近年来项目里的多个小必要,贰个这种形象的进程条:

 

把里面包车型客车进程条单独拿出来,也正是内需贯彻如此一个作用:

 

脑洞大开一下,使用 CSS3 怎么样贯彻如此两个进程条呢。

CSS3 是能够产生的,正是很劳碌。但是倘诺应用 SVG 的话,一蹴而就。

 

作者们只要你在翻阅本文的时候有了断定的 SVG 基础,上边代码看看就懂了,好了,本文到此结束。

 

可以吗,仍然一步一步解释,上面进程条的基本点 SVG 代码如下:

1
2
3
4
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400">
    <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-path"/>
    <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-fill"/>
</svg>

SVG 线条动画

好,终于到本文的显要了。

图片 5

地方,大家给三个 polyline 都设置了 class,SVG 图形的三个收益便是局地品质样式能够选取 CSS 的方法书写,更关键的是能够包容 CSS 动画一同行使。

上面,主要的 CSS 代码:

.g-rect-path{ fill: none; stroke-width:10; stroke:#d3dce6; stroke-linejoin:round; stroke-linecap:round; } .g-rect-fill{ fill: none; stroke-width:10; stroke:#ff7700; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray: 0, 1370; stroke-dashoffset: 0; animation: lineMove 2s ease-out infinite; } @keyframes lineMove { 0%{ stroke-dasharray: 0, 1350; } 100%{ stroke-dasharray: 1350, 1350; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.g-rect-path{
    fill: none;
    stroke-width:10;
    stroke:#d3dce6;
    stroke-linejoin:round;
    stroke-linecap:round;
}
 
.g-rect-fill{
    fill: none;
    stroke-width:10;
    stroke:#ff7700;
    stroke-linejoin:round;
    stroke-linecap:round;
    stroke-dasharray: 0, 1370;
    stroke-dashoffset: 0;
    animation: lineMove 2s ease-out infinite;
}
 
@keyframes lineMove {
    0%{
        stroke-dasharray: 0, 1350;
    }
    100%{
        stroke-dasharray: 1350, 1350;
    }
}

这尼玛是如何CSS?怎么除了 animation 全都不认知? 图片 6

莫慌,其实过多和 CSS 相比一下不胜好理解,只是换了个名字:

  • fill:类比 css 中的 background-color,给 svg 图形填充颜色;
  • stroke-width:类比 css 中的 border-width,给 svg 图形设定边框宽度;
  • stroke:类比 css 中的 border-color,给 svg 图形设定边框颜色;
  • stroke-linejoin | stroke-linecap:上文稍微提到过,设定线段连接处的体制;
  • stroke-dasharray:值是一组数组,非常少上限,每一个数字交替表示划线与间距的宽窄;
  • stroke-dashoffset:则是虚线的偏移量

珍视讲讲能够实现线条动画的主要属性 stroke-dasharray 。

属性 stroke-dasharray 可调整用来描边的点划线的图腾范式。

它是一个和数列,数与数以内用逗号或许空白隔绝,内定短划线和缺口的尺寸。要是提供了奇数个值,则那几个值的数列重复贰遍,进而成为偶数个值。由此,5,3,2等同于5,3,2,5,3,2

表明很苍白,直接看例子:

See the Pen stroke-dasharray by Chokcoco (@Chokcoco) on CodePen.

地点,填充进程条,使用了下边那么些动画 :

@keyframes lineMove { 0%{ stroke-dasharray: 0, 1350; } 100%{ stroke-dasharray: 1350, 1350; } }

1
2
3
4
5
6
7
8
@keyframes lineMove {
    0%{
        stroke-dasharray: 0, 1350;
    }
    100%{
        stroke-dasharray: 1350, 1350;
    }
}

stroke-dasharray: 0, 1350;,表示线框短划线和缺口的尺寸分别为 0 和 1350,所以一起头全方位图形都以被缺口攻陷,所以在视觉效果上长度为 0。

然后对接到 stroke-dasharray: 1350, 1350,表示线框短划线和缺口的长度分别为 1350 和 1350,因为全数图形的尺寸就是1350,所以整个进程条会被慢慢填充满。

驾驭了这么些本领后,就足以应用 stroke-dasharray 和 stroke-dashoffset 制作非常多毋庸置疑的并行场景:

 

SVG 线条动画完成开关交互

图片 7

See the Pen svg线条动画完成开关交互 by Chokcoco (@Chokcoco) on CodePen.

SVG 为何

可缩放矢量图形,即SVG,是W3C XML的分枝语言之一,用于标志可缩放的矢量图形。(摘自MDN)

下面代码中,先谈谈 svg 标签:

  • version: 表示 <svg> 的本子,如今唯有 1.0,1.1 三种
  • xmlnshttp://www.w3.org/2000/svg 固定值
  • xmlns:xlinkhttp://www.w3.org/1999/xlink 固定值
  • xml:spacepreserve 固定值,上述四个值固定,表示命名空间,当数码单独存在svg文本内时,那3个值不可能简单
  • class:正是大家熟稔的 class
  • width | height: 定义 svg 画布的高低
  • viewbox: 定义了画布上能够突显的区域,当 viewBox 的尺寸和 svg 差异的时候,viewBox 在显示器上的来得会缩放至 svg 同等大小(暂时能够绝不领会)

有了 svg 标签,大家就能够欢娱的在内部增多 SVG 图形了,上面,我在 svg 中定义了八个 polyline 标签。

SVG 线条动画完成圆形进程条

See the Pen svg线条动画达成圆形进程条 by Chokcoco (@Chokcoco) on CodePen.

 

多 SVG 图形线条动画协作

事先笔者司贰个 h5 里面应用过的,多SVG 图形线条动画同盟,能够创造一些比较炫丽的动画,很有科学技术感。

图片 8

See the Pen JbQNME by Chokcoco (@Chokcoco) on CodePen.

正文截至,作者在自家的 Github 上,使用 SVG 完成了有些图纸 — SVG奇思妙想,德姆o能够戳这里。

下卷小说将会详述非法则图形,怎样行使 PS + AI 生成 path 路径,实现 SVG 动画,放个 Demo,敬请期望。

图片 9

到此本文甘休,要是还大概有何疑难还是建议,可以多多调换,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏帮助笔者写出越来越多好文章,多谢!

打赏笔者

SVG 基本造型

polyline:是SVG的多个为主造型,用来创立一文山会海直线连接多少个点。

其实,polyline 是三个比较有的时候用的形状,相比常用的是pathrectcircle 等。这里自个儿使用polyline 的原因是亟需采纳 stroke-linejoin 和 stroke-linecap 属性,在线段连接处创设油滑过渡角。

SVG 中定义了有的骨干造型,在继续下文在此以前,提出点进去先了然部分中央图形的标签及写法:

 

打赏辅助我写出越来越多好小说,谢谢!

任选一种支付办法

图片 10 图片 11

1 赞 10 收藏 评论

 

本文由杏彩发布,转载请注明来源

关键词: