看过小编写的第一篇的刮刮乐实现的读者，肯定看到了博主提到的贝济埃曲线，那一篇没有解释，因为毕竟开篇还是要能让大家感兴趣，一上来就理论未免有些乏味，所以这篇就来解析刮刮乐那篇的贝济埃曲线。
1.贝济埃曲线历史
贝济埃曲线于1962年由法国工程师皮埃尔·贝济埃所提出，开始用途是为汽车的主体进行设计。在数学的数值领域分析中，贝济埃曲线是计算机图形学相当重要的参数曲线。其中有一阶贝济埃曲线，二阶贝济埃曲线，三阶贝济埃曲线，四阶贝济埃曲线，五阶贝济埃曲线。
而我们常用的当属二阶贝济埃曲线，特别是在Android自定义控件当中，捕捉的手势，用到的最多的就是二阶贝济埃曲线，今天后面所介绍的水波纹动画的原理也是二阶贝济埃曲线。
2.二阶贝济埃曲线
首先，我们来看看二阶贝济埃曲线的公式：
B(t)=(1-t)²P₀+2t(1-t)P₁+t²P₂(备注t在[0,1]之间)
在这里P₀是起始点，P₁是控制点，P₂是终点，t就是时间，为了便于理解，小编画了参考图，方便于大家理解，如下图所示：
从图中，我们可以看到，P₀和P₁形成了一条一阶贝济埃曲线，而这条点上的Q₀就是这条线上匀速运动的点。其次P₁和P₂也形成了一条贝济埃曲线，同样Q₁是这条线上匀速运动的点。
我们可以看到这两条贝济埃曲线又生成了由Q₀和Q₁的新一阶贝济埃曲线，而在这条线上匀速运动的点B的运动形态就是二阶贝济埃曲线的最终形态。
综上所示，之所以称B的运动轨迹为二阶贝济埃曲线，是因为B的运动轨迹建立在两条一阶贝济埃曲线之上，其实我们可以类推，三阶贝济埃曲线就是三条一阶贝济埃曲线生成的二阶贝济埃曲线后， 在由二阶贝济埃曲线生成的一阶贝济埃曲线的运动轨迹，同理，四阶，五阶类同。
3.Android贝济埃曲线的函数quadTo与rQuadTo
讲完贝济埃曲线的理论，我们来看看实战之中，如何生成贝济埃曲线。
在Path类中，由2个函数与二阶贝济埃曲线相关，分别是：
public void quadTo(float x1,float y1,float x2,float y2) public void rQuadTo(float dx1,float dy1,float dx2,float dy2)
其中(x1,y1)为控制点坐标，也就是上面的P₁，而（x2,y2）是终点坐标，也就是P₂，这里可能大家由疑问，我们前面的贝济埃曲线函数不是由三个点吗？那起始点P₀去哪里呢？
其实起始点就是我们常用的Path.moveTo()函数，也就是说，二阶贝济埃曲线的调用步骤，是先调用Path.moveTo()，然后调用quadTo()或者rQuadTo()来确定，如果说想一直绘制贝济埃曲线，那么quadTo()终点（x2,y2），就是下一个贝济埃曲线的起点。
接着，我们再来看看第二个函数rQuadTo，它的四个参数意思分别为：
dx1：控制点x坐标，表示相对于上一个终点x坐标的位移。可以为负值，正值表示相加，后面一样。
dy1：控制点y坐标，表示相对于上一个终点y坐标的位移。
dx2：终点x坐标，同样是相对于上一个终点x坐标位移。
dy2：终点y坐标，同样是相对于上一个坐标y坐标的位移。
如果开始绘制，就是相对于的点就是P₀，如果是连续绘制，就是相对于的点P₂（上一个的终点）。
4.波浪动画
①初始化
了解了两个函数，我们来玩点有意思的自定义控件的波浪效果。和以前一样，我们需要自定义View，实现它的构造函数，同时初始化成员变量，代码如下：
/*** * 水波纹动画自定义控件 */ public class RippleView extends View { private Paint paint;//画笔 private Path path;//路径 private int mRippleLength=1200;//波长 private int dx;//动画的移动值 public RippleView(Context context) { super(context); } public RippleView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); this.paint=new Paint(); this.paint.setColor(Color.GREEN);//画笔颜色 this.paint.setStyle(Paint.Style.FILL);//填充模式 this.path=new Path(); this.startAnim(); } public RippleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } }
②定义动画
接着就是自定义移动动画，也就是波纹的动画，你可以想象一下波纹的效果，基本上他们都是移动一个波纹长度，波纹就会重合，所以我们自定义动画的移动范围就是一个波长，代码如下：
private void startAnim(){ ValueAnimator valueAnimator=ValueAnimator.ofInt(0,this.mRippleLength);//设置动画为一个波长 valueAnimator.setDuration(2000);//设置一次动画时间 valueAnimator.setRepeatCount(ValueAnimator.INFINITE);//设置动画为无线循环 valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { dx=(Integer) animation.getAnimatedValue();//获取动画进度 postInvalidate();//重回界面 } }); valueAnimator.start();//执行动画 }
记得在上面初始化中调用这个设置动画的函数。
③绘制波纹
最后一步就是绘制动画，也就是在我们自定义View的onDraw()函数中进行。代码如下：
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); this.path.reset();//清除之前绘制的path int halfLength=this.mRippleLength/2;//波长的一半 this.path.moveTo(-this.mRippleLength+dx,halfLength);//起始点P₀ for(int i=-this.mRippleLength;i<=getWidth()+this.mRippleLength;i+=this.mRippleLength){ //两句代码组成一个波长，中间到波峰在到中间是第一个rQuadTo,中间到波谷到中间是第二rQuadTo this.path.rQuadTo(halfLength/2,-100,halfLength,0); this.path.rQuadTo(halfLength/2,100,halfLength,0); } //闭合区域 this.path.lineTo(getWidth(),getHeight()); this.path.lineTo(0,getHeight()); this.path.close(); //绘制 canvas.drawPath(this.path,this.paint); }
for循环控制的是屏幕能容下的波形，i的最大值就是屏幕的宽度加上波长，每循环一次画一个波长，第一个rQuadTo()画的是一个波长的前半个，第二个rQuadTo()画的是一个波长的后半个波，而且随着动画dx的累计，波纹不断向前推进。如果看不懂，博主也画了个图形，可以看下：（因为小编用的画图工具，所以看起来两点之间视觉上不是相等，但其实是相等的）
我们可以看到上图中，是一个波长的绘制，可以看到基本上就是上下100的距离，以他们为点，绘制贝济埃曲线，形成之后就是波纹的形状，然后通过上面原点的dx动画进度，这些值会向前慢慢推进，所以看起来就想波纹波动一样。（起始点y值可以更改，改小改大，波纹的波谷波峰就或高，或低）
Github下载地址：点击下载
