如何制作水球动画图?

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

起因

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

样式

思路

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

数学基础

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

请允许我盗一张图:

pic

上图中展现了 从 Sin(X) -> 2Sin(X + PI / 6) 的情况。

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

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/animations/water-bubble.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部