转载

利用 SVG 制作素描动画

提要

最近接触了一些 SVG 的知识，发现用它来做网页动画，尤其是素描效果的动画非常棒。

我非常喜欢这个 Demo 的效果，仿照它实现了一个：

基本原理

SVG 线条动画的基本原理，这篇博客讲解的非常清楚。实现原理非常简单，主要通过调整 SVG 中 PATH 元素的两个属性来实现。这里有两个关键点：

通过调整 PATH 中的 stroke-dasharray 和 stroke-dashoffset 这两个属性的值，就可以实现线条的动画效果。
这两个值的初始值，需要设定为 PATH 的长度，然后通过递减 stroke-dashoffset 来生成动画效果。

概念很抽象，但是这篇博客中，给出了一个非常清楚的示例。示例是一段简单的 SVG PATH。当我们手动调整 stroke-dasharray 和 stroke-dashoffset 两个值时，就可以清楚的看到它们对于素描动画的影响。（注意，本示例滑动条的最右边值为998，是 PATH 的长度）

<svg> <path d="..." stroke-dasharray="0.00 0.00" stroke-dashoffset="0.00"></path> </svg>

可以看出，当调节 stroke-dasharray 时，线条会被截断。同时，调整 stroke-dashoffset 值时，截断的线条会就会产生偏移。

当我们进一步将上述两个值都调整至最右方（ PATH 的长度值），并慢慢将 stroke-dashoffset 的值向左移动时，就是 见证奇迹的时刻 啦。这就是利用 SVG 进行素描动画的基本原理。

动画效果

知道了基本原理，只要熟悉 Javascript, 就能制作出 SVG 的素描效果啦。博客中给出了相应的代码，摘录如下：

var path = document.querySelector('#final-svg-demo path'); var length = path.getTotalLength(); // Clear any previous transition path.style.transition = path.style.WebkitTransition =   'none'; // Set up the starting positions path.style.strokeDasharray = length + ' ' + length; path.style.strokeDashoffset = length; // Trigger a layout so styles are calculated & the browser // picks up the starting position before animating path.getBoundingClientRect(); // Define our transition path.style.transition = path.style.WebkitTransition =   'stroke-dashoffset 2s ease-in-out'; // Go! path.style.strokeDashoffset = '0';