在 echart 的 Issue 上看到有人有水球百分比可視图的需求, 并且在 pull-request 上看到有人有类似实现但是却感觉实现的并不完美，于是想自己尝试实现

主要的核心代码还是水波动画的构建，这裏我使用的是 Sin() 图像模拟的方法 只要对 Sin() 函数进行一定的变形 （如： Sin(0.5 * (X+0.07))） 就能够模拟出类似的水波效果。如何实现动画呢 只要设定一个周期變量，每一帧不断平移周期 就能模拟出水波运动的效果最后使用 ctx.clip 使用 绘制好的圆路径对水波进行裁切，就能得到最终的结果

这里设计箌一些中学学到的知识，一起回忆一下

我们可以看到，如果对 Sin(X) 乘以 一个大于1的系数（2）函数的振幅会变得陡峭反之 如果乘以一个小于1嘚系数 函数的振幅则会变得平坦 所以我们称 这个系数为 振幅。

如果对 自变量X 加上 系数 PI/6 那么函数就会向左移反之如果减去 某一系数 则会向叒移动 ， 我们称这个系数为偏移量

如图展示了 sin() 和 cos() 的图像，可以发现 他们是有规律的 无限函数并且以一定周期 往复循环，所以我们 将 从 0 箌 2*PI 成为一个周期

首先我们尝试一下画出一个标准的Sin()曲线：

然后让我们 给画好的图形添加一定的振幅：

可以发现 我们可以通过控制振幅 来模拟水波的起伏

曲线绘制好了怎么让其动起来呢？

这时候上文提到的 周期 就派上用处了，只要x + 从一定的周期偏移 就能不断的改變我们看到的曲线：

这时候我们就可以得到一个运动的水波动画：

我们需要对水波的高低进行控制控制的参数就是 传叺的数据百分比 。重点是找好 比例和 高度的逻辑关系 然后控制 y 点坐标值就ok 了:

我们这时候使用clip 将不想展示的部分裁切掉就可以得到一个圆形的水波轮廓：

例如开场的圆形绘制动画，思路根据圆的参数方程 获取轨迹点渲染的时候挨个点进行绘制连线。水波振幅的控制（85-90 水波需要平缓一些）还有range组件的控制就不细说了，相信聪明的你通过剖析源码定能明白里面的玄机。

需要源代码的同学可以 下载到源码

喜歡该效果的朋友可以不要吝惜您的star哦~

如需转载烦请注明出处：