TAT.tennylv 线条之美,玩转 SVG 线条动画
In 未分类 on 2017年02月27日 by view: 25,521
5

通常来说 web 前端实现动画效果主要通过下面几种方案:

  • css 动画;利用 css3 的样式效果可以将 dom 元素做出动画的效果来。
  • canvas 动画;利用 canvas 提供的 API,然后利用清除-渲染这样一帧一帧的做出动画效果。
  • svg 动画;同样 svg 也提供了不少的 API 来实现动画效果,并且兼容性也不差,本文主要讲解一下如何制作 svg 线条动画。


先来看几个效果:

demo

demo

demo

以上这些效果都是利用 SVG 线条动画实现的,只用了 css3 和 svg,没有使用一行 javascript 代码,这一点和 canvas 比起来要容易一些,下面就说明一下实现这些效果的原理。

关于 SVG 的基础知识,我这里就不再叙述了,大家可以直接在文档中查看相关的 API,这里只说一下实现线条动画主要用到的:path(路径)

<path> 标签命令

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Belzier curve
  • T = smooth quadratic Belzier curveto
  • A = elliptical Arc
  • Z = closepath

利用 path 的这些命令我们可以实现我们想要的任何线条组合,以一段简单的线条为例:

效果:

呵呵,看起来很简单,但是,如何让这个线条动起来呢?这里就要明白到 SVG 里的 path 的一些主要属性:

  1. stroke:标识路径的颜色;
  2. d:标识路径命令的集合,这个属性主要决定了线条的形状。
  3. stroke-width:标识路径的宽度,单位是 px;
  4. stroke-dasharray:它是一个<length> 和<percentage> 数列,数与数之间用逗号或者空白隔开,指定短划线和缺口的长度。如果提供了奇数个值,则这个值的数列重复一次,从而变成偶数个值。因此,5,3,2 等同于 5,3,2,5,3,2;
  5. stroke-dashoffset:标识的是整个路径的偏移值;

以一张图来解释 stroke-dasharray 和 stroke-dashoffset 更容易理解一些:

因此,我们之前的路径就会变成这个样子:

效果:

理解了 stroke-dasharray 的作用之后,下面我们就可以使用 css3 的 animation 来让这个路径动起来。

 

效果:

511 这个值是整个路径的长度,可以用 js 的 document.getElementById('path').getTotalLength() 得到

stroke-dasharray: 0, 511; 表示实线和空隙的长度分别为 0 和 511,所以一开始整个路径都是空隙,所以是空的。
然后过渡到 stroke-dasharray: 511, 511; 因为整个线条的长度就是 511,而实线的长度也慢慢变成 511,所以整个线条就出现了。

同样利用 stroke-dashoffset 也可以实现这个效果,原理就是最初线条分为 511 实线,和 511 空隙,但是由于设置了 offset 使线条偏移不可见了,当不断修改 offset 后,线条慢慢出现。

效果:

当我们掌握了上述的方法后,整个利用 SVG 实现线条动画的原理就已经清楚了,我们需要的就是一个 SVG 路径了,但是总画一些简单的线条还是不美啊,那我们如何才能得到复杂的 svg 路径呢?

  1. 找 UI 设计师要一个。
  2. 自己利用 PS 和 AI 做一个,只需要简单的 2 步。

以部落 LOGO 为例:

1,得到部落 LOGO 的 png 图片。

2,右键图层,然后点击从选区生成工作路径,我们就可以得到:

3,文件--导出--路径到 AI,将路径导出在 AI 里面打开。

4,在 AI 里面选择保存成 svg 格式的文件,然后用 sublime 打开 svg 文件,将 path 的 d 拷贝出来即可。

5,利用上文介绍的实现动画的方法,我们就可以轻松的得到了下面这个效果。

线条动画进阶:

可以看到上面的动画效果和文章最初显示的动画效果还是有区别的,要想实现文章最初的动画效果,需要用到 SVG 的<symbol> 和 <use> 来实现,读者可以在网上查一下这两个标签的用法。

这里用了 5 条完全重合的路径,并且每个路径的颜色和动画效果都不一样。

效果:

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2017/02/the-beauty-of-the-lines-break-lines-svg-animation/

  1. hellokitty 2019 年 6 月 13 日

    hi , ilove so much

  2. 朱军 2017 年 3 月 6 日

    666

  3. 超级木木 2017 年 2 月 28 日

    感谢分享,分享一个之前用过 greensock 的一个 SVG 插件还是很好用的,动画性能非常好,API 也很简单。地址:https://greensock.com/morphSVG

  4. LeoEatle 2017 年 2 月 28 日

    写的好,其实基于 SVG 的前端插件还蛮多的,这里推荐一个 http://lazylinepainter.info/,可以直接用 AI 制作上传生成 SVG 标签,非常方便

  5. Seabiscuit 2017 年 2 月 28 日

    感谢分享

发表评论