Android——贝塞尔曲线的水波浪效果实现

使用贝塞尔曲线实现的水波浪效果,在很多杀毒软件的进度条显示中都有应用:

这个效果呢以前在有一个项目中需要实现过,当时是使用的正弦曲线做的效果,不过后来发现贝塞尔曲线也可以做出相同的效果,并且代码更为优雅。

那么对于初学者来说呢,首先需要了解什么是贝塞尔曲线, 上有很多教程,这里我找到了比较容易看懂的博客:

贝塞尔曲线原理(实现图真漂亮)

我们常用的是二阶贝塞尔曲线,其推导公式为:

但是在Android中,Path类提供了qudto方法去绘制一段贝塞尔曲线,因此,只要知道3个点就可以绘制出一段贝塞尔曲线,只需要6个点就可以模拟出正弦波浪曲线。

实现思路

1.首先大体上需要绘制两段横版S型曲线,然后使用动画效果不断左平移来实现波浪的滑动效果。

2.每一段S型曲线需要确定5个点的位置:

其中对应两段贝塞尔曲线,即P1-P3,P3-P5

3.绘制过程为首先new一个path,将path移动到P1点,然后计算P2,P3的坐标,通过path的rQuadTo(float dx1, float dy1, float dx2, float dy2)方法绘制出P1-P3的贝塞尔曲线,以此类推绘制P3-P5以及之后的另外两条贝塞尔曲线。

实现代码

Github项目地址:

https://github.com/jiangzhengnan/UI

最近会把实现的UI效果都集中到一个库里面,求start~

声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2019年4月11日
下一篇 2019年4月11日

相关推荐