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

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

stroke-dasharray

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

Sorry, your browser does not support inline SVG.

<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

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

path.getTotalLength()

获取 path 的长度;

path.getPointAtLength(length)

获取给定长度 lengthpath 的坐标 (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;

参考文章:

20 条评论

发表评论

*