当前位置: 沃微圈 > 阅读 > 财经 >

SVG 线条动画入门

来源:转载

(点击上方公众号,可快速关注)


作者:伯乐在线专栏作者 - chokcoco

如有好文章投稿,请点击 → 这里了解详情

如需转载,发送「转载」二字查看说明


通常我们说的 Web 动画,包含了三大类。

  • CSS3 动画

  • javascript 动画(canvas)

  • html 动画(SVG)

个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论的是我认为 SVG 中在实际项目中非常有应用价值 SVG 线条动画。

举个栗子

SVG 线条动画,在一些特定的场合下可以解决使用 CSS 无法完成的动画。尤其是在进度条方面,看看最近项目里的一个小需求,一个这种形状的进度条:

把里面的进度条单独拿出来,也就是需要实现这样一个效果:

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

CSS3 是可以做到的,就是很麻烦。但是如果采用 SVG 的话,迎刃而解。

See the Pen 不规则进度条 by Chokcoco (@Chokcoco) on CodePen.

我们假定你在阅读本文的时候有了一定的 SVG 基础,上面代码看看就懂了,好了,本文到此结束。

好吧,还是一步一步解释,上面进度条的主要 SVG 代码如下:

<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 为何

可缩放矢量图形,即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: 定义了画布上可以显示的区域,当 viewBox 的大小和 svg 不同时,viewBox 在屏幕上的显示会缩放至 svg 同等大小(暂时可以不用理解)

有了 svg 标签,我们就可以愉快的在内部添加 SVG 图形了,上面,我在 svg 中定义了两个 polyline 标签。

SVG 基本形状

polyline:是SVG的一个基本形状,用来创建一系列直线连接多个点。

其实,polyline 是一个比较不常用的形状,比较常用的是pathrectcircle 等。这里我使用polyline 的原因是需要使用 stroke-linejoin 和 stroke-linecap 属性,在线段连接处创建圆滑过渡角。

SVG 中定义了一些基本形状,在继续下文之前,建议点进去先了解一些基本图形的标签及写法:

SVG 线条动画

好,终于到本文的重点了。

上面,我们给两个 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;

    }

}


这尼玛是什么 CSS?怎么除了 animation 全都不认识? 

莫慌,其实很多和 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;

    }

}


stroke-dasharray: 0, 1350;,表示线框短划线和缺口的长度分别为 0 和 1350,所以一开始整个图形都是被缺口占据,所以在视觉效果上长度为 0。

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

掌握了这个技巧后,就可以使用 stroke-dasharray 和 stroke-dashoffset 制作很多不错的交互场景:

SVG 线条动画实现按钮交互

See the Pen svg线条动画实现按钮交互 by Chokcoco (@Chokcoco) on CodePen.

SVG 线条动画实现圆形进度条

See the Pen svg线条动画实现圆形进度条 by Chokcoco (@Chokcoco) on CodePen.

多 SVG 图形线条动画配合

之前我司一个 h5 里面应用过的,多SVG 图形线条动画配合,可以制作一些比较酷炫的动画,很有科技感。

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

正文结束,我在我的 Github 上,使用 SVG 实现了一些图形 — SVG奇思妙想(https://github.com/chokcoco/SVG),Demo可以戳这里(http://sbco.cc/demo/svg/html/index.html)。

下篇文章将会详述非规则图形,如何使用 PS + AI 生成 path 路径,实现 SVG 动画,放个 Demo,敬请期待。


到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

点击阅读原文,查看文中Demo



觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能


译者简介 ( 点击 → 加入专栏作者 )


chokcoco:经不住流年似水,逃不过此间少年。


分享给朋友:
您可能感兴趣的文章:
随机阅读: