使用贝塞尔曲线实现的水波浪效果,在很多杀毒软件的进度条显示中都有应用:
这个效果呢以前在有一个项目中需要实现过,当时是使用的正弦曲线做的效果,不过后来发现贝塞尔曲线也可以做出相同的效果,并且代码更为优雅。
那么对于初学者来说呢,首先需要了解什么是贝塞尔曲线, 上有很多教程,这里我找到了比较容易看懂的博客:
贝塞尔曲线原理(实现图真漂亮)
我们常用的是二阶贝塞尔曲线,其推导公式为:
但是在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进行处理,非常感谢!