使用 SVG 实现手写签名动画效果
时间：2016-02-01
来源：小影志
作者：佚名
最近需要一个手写签名动画效果，最后用 SVG 实现咯。
stroke-dasharray
path 的 stroke-dasharray 的属性用来控制线段样式，奇数项定义实线，偶数项定义空白。
stroke-dashoffset
path 的 stroke-dashoffset 定义了线段开始的偏移量。
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;
相关下载
相关文章
更多+软件排行榜
- 最新排行
- 最热排行
- 评分最高
-
手机软件 大小:20.76MB -
手机软件 大小:20.76MB
-
手机软件 大小:20.76MB
-
手机软件 大小:89.1MB
