Path使用--二阶贝塞尔曲线实现水波效果

上面这个效果是使用Path绘制二阶贝塞尔曲线实现的；二阶贝塞尔曲线涉及到三个点，起始点、拐点、终点，而拐点有决定着曲线的形状；下面这张图大致展示了二阶贝塞尔曲线：



A点是起始点，C点是终点，B点是拐点，当然根据绘制的需求，B是变动的，绘制出来的曲线也就不一样，这里只是一个大致的示意图；那么只需调用path里面的相应方法，进行这几个点的设置一个简单的二阶贝塞尔曲线就可以实现了；

设置二阶贝塞尔曲线的方法：

//其中x,y的坐标代表图中曲线左边起点的位置坐标  也就是A点的位置
moveTo(float x,float y)

//其中x1,y1的坐标就是控制点(拐点)的位置， 也就是B点的位置
//x2,y2的坐标就是曲线右边终点的位置坐标,也就是C点的位置
quadTo(float x1, float y1, float x2, float y2 )

还可调用下面这个方法进行设置，不过传入的参数和quadTo会有区别；

//这里的dx1、dy1、dx2、dy2都是相对坐标
rQuadTo(float dx1, float dy1, float dx2, float dy2);

水波效果代码：

public class WaterView extends View{
private Paint mPaint;
private Path mPath;
//波长的长度
private int waterLenght=100;
private int dx;
public WaterView(Context context) {
this(context,null);
}

public WaterView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}

public WaterView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint=new Paint();
mPaint.setColor(Color.BLUE);
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);

mPath=new Path();
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int originY=800;
//重置path
mPath.reset();
int halfWaterLenght=waterLenght/2;
//起点
mPath.moveTo(-waterLenght+dx,originY);
//屏幕的宽度李放多少个波长
for (int i=-waterLenght;i<getWidth()+waterLenght;i+=waterLenght){
//相对绘制二阶贝塞尔曲线(相对于自己的起点--也就是上一个曲线的终点  的距离dx1)
mPath.rQuadTo(halfWaterLenght/2,-30,halfWaterLenght,0);
mPath.rQuadTo(halfWaterLenght/2,30,halfWaterLenght,0);
}
//颜色填充
//画一个封闭的空间
mPath.lineTo(getWidth(),getHeight());
mPath.lineTo(0,getHeight());
//闭合path
mPath.close();
//绘制到画布上
canvas.drawPath(mPath,mPaint);
}

/**
* 开启动画
*/
public void startAnimation(){
ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, waterLenght);
valueAnimator.setDuration(700);
//设置插值器
valueAnimator.setInterpolator(new LinearInterpolator());
//设置无线循环
valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (float) animation.getAnimatedValue();
dx= (int) value;
postInvalidate();
}
});
valueAnimator.start();
}
}

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WaterView waterView = (WaterView) findViewById(R.id.water_view);
waterView.startAnimation();
}
}

这样效果就实现了，也是刚接触二阶贝塞尔曲线，写的比较简单，有写的不对的地方欢迎交流。