四阶贝塞尔曲线:
五阶贝塞尔曲线:
通用公式:
更多的贝塞尔曲线,大家可以去看一下这个网站,可以自己画点的位置
http://myst729.github.io/bezier-curve/
贝塞尔曲线的应用
可能前面的公式你没有完全看懂,但这并不影响我们的应用 。现在贝塞尔曲线在软件开发中的应用是越来越多了,比如下面这个制作波浪曲线的,就是应用二阶贝塞尔曲线实现的 。
例子参照
https://blog.csdn.net/z82367825/article/details/51599245
如何用Android实现上面的效果图呢?
在Android中Path类中其实是有已经封装好了关于贝塞尔曲线的函数的
//二阶贝赛尔 public void quadTo(float x1, float y1, float x2, float y2) public void rQuadTo(float dx1, float dy1, float dx2, float dy2) //三阶贝赛尔 public void cubicTo(float x1, float y1, float x2, float y2,float x3, float y3) public void rCubicTo(float x1, float y1, float x2, float y2,float x3, float y3)
quadTo()方法,可以从源码的注释看出(x1,y1)是控制点坐标,(x2,y2)是终点坐标
/** * Add a quadratic bezier from the last point, approaching control point * (x1,y1), and ending at (x2,y2). If no moveTo() call has been made for * this contour, the first point is automatically set to (0,0). * * @param x1 The x-coordinate of the control point on a quadratic curve * @param y1 The y-coordinate of the control point on a quadratic curve * @param x2 The x-coordinate of the end point on a quadratic curve * @param y2 The y-coordinate of the end point on a quadratic curve */ public void quadTo(float x1, float y1, float x2, float y2) { isSimplePath = false; native_quadTo(mNativePath, x1, y1, x2, y2); }
原理图:
通过属性动画类ValueAnimator不断改变点1的横坐标,随着点1横坐标向右移动,点2,点3,点4,点5,以及四个控制点的坐标随着点1的移动同时位移相同距离,每一次坐标点更新,我们调用一次invalidate()方法,调用draw重新绘制视图,绘制四段贝塞尔曲线。最后点1移动到原先点3的位置,这样就完成了一次动画。这样,通过循环不断的动画效果,我们就实现了波浪的效果。
关键的onDraw代码如下:
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (!mIsRunning || !mHasInit) return; mPath.reset(); mPath.moveTo(mLeft1.x, mLeft1.y); mPath.quadTo(mControlLeft1.x, mControlLeft1.y, mLeft2.x, mLeft2.y); mPath.quadTo(mControlLeft2.x, mControlLeft2.y, mFirst.x, mFirst.y); mPath.quadTo(mControlFirst.x, mControlFirst.y, mSecond.x, mSecond.y); mPath.quadTo(mControlSecond.x, mControlSecond.y, mRight.x, mRight.y); mPath.lineTo(mRight.x, mHeight); mPath.lineTo(mLeft1.x, mHeight); mPath.lineTo(mLeft1.x, mLeft1.y); canvas.drawPath(mPath, mPaint); }
如果需要完整的程序代码,可以长按下面的公众号,后台回复:贝塞尔曲线 。