SVG动态绘制不规则图形
做者简介 wuyue 蚂蚁金服·数据体验技术团队css
在浏览器中，任意的二维平面图形都可以经过path路径的形式描述。而后底层api 直接静态绘制出来。可是若是想动态的绘制路径，浏览器是没有直接支持方式的。 本文就是解决这个问题， 为浏览器补全这个功能，让静态的路径能方便的动态绘制。前端
最终效果
先看下最终实现的效果吧~git
芯片描绘：
人脸扫描：
人工书写：
效果仍是挺酷炫的，实现的整个开发过程就从接需求开始讲起吧。github
需求
与设计同窗讨论了n多姿式：算法
- 淡入淡出
- 粒子效果，碎裂组合
- 有小变大，花式旋转，变形
- ...
可是设计同窗坚持本身的姿式，就是要还原真实场景，就是要扫描！api
因而我就只能：浏览器
好了再也不扯淡了，回归正题~svg
就浏览器动态绘制想到了如下两个方案：工具
方案一
浏览器虽然没有提供动态绘制的方法，可是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('####', '@')，欢迎有志之士加入~