作者简介 wuyue 蚂蚁金服·数据体验技术团队
在浏览器中，任意的二维平面图形均可以通过path路径的形式描述。然后底层api 直接静态绘制出来。但是如果想动态的绘制路径，浏览器是没有直接支持方式的。 本文就是解决这个问题， 为浏览器补全这个功能，让静态的路径能方便的动态绘制。
最终效果
先看下最终实现的效果吧~
芯片描绘：
人脸扫描：
人工书写：
效果还是挺酷炫的，实现的整个开发过程就从接需求开始讲起吧。
需求
与设计同学讨论了n多姿势：
- 淡入淡出
- 粒子效果，碎裂组合
- 有小变大，花式旋转，变形
- ...
但是设计同学坚持自己的姿势，就是要还原真实场景，就是要扫描！
于是我就只能：
好了不再扯淡了，回归正题~
就浏览器动态绘制想到了以下两个方案：
方案一
浏览器虽然没有提供动态绘制的方法，但是svg提供了一个比较重要的属性stroke，中文称之为描边。最开始想的是用stroke-dasharray设置虚线描边，然后用animation改变stroke-dashoffset来绘制动态的文案。这样子可以实现动态绘制的效果。但是有以下几点不足。
- 每条path都得写css的动画来控制。
- 绘制过程单一，只能用浏览器提供的几个动画的算法，没法自己控制绘制过程
- 后续再有这样的需求，前端都需要大量开发
基于上面几点，放弃了这个方案。
方案二
我们能不能自己控制svg的绘制过程，实现他的动态绘制呢？好像...是可以的！！
分析svg
首先要先分析svg。不规则图形都是可以通过ps的钢笔工具抠图，然后导出到AI里面就可以获取到该图形的path信息。 或者直接让设计同学提供svg格式的图片。 最终我们可以获取到该图形的path信息， 举例如下：
上图是我截取的 人脸的svg 格式，通过分析里面格式可以看出，有几个关键信息：
- 布局信息 ， viewBox里面可以认为是原始大小。
- style 部分是样式， 来控制线条的粗细，颜色等。
- 第三个红框部分是 路径信息， 这里是有固定格式的， 具体可参考这里https://developer.mozilla.org/en-US/docs/Web/SVG
最终我们可以将上述信息转化如下形式的指令，方便后续代码解析。
命令解析
问题明确了，就是拆分path指令。把每条命令都解析出来， 然后依据每条指令算点，按对应样式描线。具体流程如下：
解析指令部分的关键代码如下：
思路是穷举所有的分隔符，然后对每个分隔符，实现解析部分。穷举的分隔符如下：
指令绘制
然后就是每条指令的执行部分代码：
最终对于每条指令，归结到 是画直线， 还是画曲线， 根据对应的曲线方程，算出对应的点， 然后就是动态的把点连起来，不停地画线段，最终大量的微小线段组合成复杂图形。 核心代码如下：
描点连线做动画部分：
然后就做到了本文开头的效果了~
总结
对于复杂图形， 我们先通过各种手段获取其路径信息。然后把路径信息分拆为各条微小指令， 针对每条指令，去实现动画。通过描点连线的形式实现，最终所有的点连城线，大量的线组合起来就动态绘制出了复杂图形。
而且我们可以将绘制的速度等开放成配置提供给设计同学，再有这样的需求，设计同学只需要提供拥有路径的svg图片。然后自己调整配置就可以了，解放了前端同学的开发量。
感兴趣的同学可以关注专栏或者发送简历至'wuyue.lwy####alibaba-inc.com'.replace('####', '@')，欢迎有志之士加入~
原文链接：
