正在加载

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

时间:2016-02-01 来源:小影志 作者:佚名
\

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

stroke-dasharray

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

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;

直播排行榜

  • 最新排行
  • 最热排行
  • 评分最高