如何开发一个百分比饼状图动画

今天跟大家分享一下最近根据业务需求开发的一个动态百分比饼图的react组件（今天比较闲）

我先是用CSS3做发现做不到这种效果，然后尝试用Canvas，做到一半发现也不合适而且有模糊的问题遂放弃。最后决定用SVG！

主要思路就是用path椭圆弧指令(A)画扇形，然后根据增量（输入框内的值）来增加或减小扇形的弧度，输入框只是用来演示的，实际上要用到后台接口数据

HTML结构如下：

SVG椭圆弧路径指令说明：（来自CSDN）

先不考虑动画效果，只看怎么画一个扇形：（说起来比较麻烦，就在注释上逐行说吧）

其中PI为我在组件前面定义的常量： const PI = 3.1416

上面代码声明的x1，y1，x2，y2代表的是起点和终点弧边的坐标，如图所示：

这样绘制扇形的function就写好了～

接下来就是要让它动起来！还要如丝般顺滑！咋整呢？当然用 requestAnimationFrame 了！如果你还不了解它请移步->MDN传送门

接下来就去调用animationSvg就好了，可以从输入框取到弧度值，或者从后台的数据中获取计算，注意一定要从百分比转化成弧度：

const value = Number((this.input.value / 100) * PI * 2);
this.animationSvg(value);复制代码

这样就实现了文章开头GIF的那种效果，总结起来就是：

1. 获取到数据，增量或者减量，单位为弧度；
2. 执行requestAnimationFrame动画；
3. 计算path并渲染在DOM中；
4. 重复执行2～3两步直到到达弧度的终点

眼见为实，大家可以去这里看到线上DEMO：传送门

可能代码的实现方式还不是最简洁的，各路大神路过欢迎给出建议～