使用 SVG 实现手写签名动画效果

最近需要一个手写签名动画效果，最后用 SVG 实现咯。

See the Pen <a href='http://codepen.io/cople/pen/dGdqRx/'>SVG Handwriting effect</a> by Cople (<a href='http://codepen.io/cople'>@cople</a>) on <a href='http://codepen.io'>CodePen</a>.<br />

stroke-dasharray

path 的 stroke-dasharray 的属性用来控制线段样式，奇数项定义实线，偶数项定义空白。

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>

source

stroke-dashoffset

path 的 stroke-dashoffset 定义了线段开始的偏移量。

See the Pen <a href='http://codepen.io/cople/pen/XXZPqo/'>stroke-dasharroy stroke-dashoffset</a> by Cople (<a href='http://codepen.io/cople'>@cople</a>) on <a href='http://codepen.io'>CodePen</a>.<br />

path.getTotalLength()

获取 path 的长度；

path.getPointAtLength(length)

获取给定长度 length 在 path 的坐标 (x, y)；

svg.getBBox()

获取 svg 的原始大小；

实现方法

将 stroke-dasharray 的第二项定义为 path 的长度（path.getTotalLength()），第一项由 0 变化到长度。
使用 getPointAtLength 获取当前坐标，通过 CSS 应用到笔的元素上，如果 svg 经过了缩放，则使用 getBBox() 计算出比例。

补一个计算当前角度

var currentPoint = path.getPointAtLength(length);
var lastPoint = path.getPointAtLength(length - 1);
angle = Math.atan2(currentPoint.y - lastPoint.y, currentPoint.x - lastPoint.x) * 180 / Math.PI;