之前看过的svg动画的相关内容,想起了之前在flash中常见的一种动画--动态写文字。语言乏力,大约就是这么个样子:Flash模仿制作毛笔写字效果动画实例教程,所以就想用svg实现这么一个效果。

实现成这个鬼样子:尹全超-签名

大约思路如下

0.签名

我使用的AI导出的,鼠标画的押效果不好,有条件的直接数位板。

1.SVG动态画线

同样也找到了一篇文章:纯CSS实现帅气的SVG路径描边动画效果

利用了SVG中path的 stroke-dasharraystroke-dashoffset 属性。

这篇文章实现了一个签名的效果,不过不是我想要的。谁签名能一笔画下来。。并且无法保证笔画的有序。

2.CSS3动画结束监听

步骤1中使用CSS3完成了动态画线的效果,为了解决中的笔画有序,就需要监听CSS3中动画结束事件。可以看这篇文章:transitionend,这样我们可以画完一条线,再触发画下一条线。

3.优化时间

一条长的线条画1s,一条短的线条总不能也画1s吧,所以取第一条线做基准,后面的线条根据比例换算时间。

4.没有完成的

整个效果是依赖JS+SVG,而SVG本身是支持动画的,我的理想是实现一个.svg文件就可以实现上面的效果,希望各位大神指教一下。。