自定义view进阶-贝塞尔曲线实现水波动画、粘性控件

开始之前

要说自定义控件里比较逼格高的，莫属贝塞尔曲线做出的特效了，例如最常见的QQ粘性气泡，以及水波加载动画，反弹的小球，等等，看起来特别的炫酷，当然了水波动画的实现方法有好几种，这里主要记录以贝塞尔曲线的方式如何实现，开始之前，了解下基础知识，以及几个关键API：

1.快速熟悉贝塞尔

按控制点个数分为一阶贝塞尔曲线有0个控制点，二阶贝塞尔曲线有1个控制点，三阶2个控制点，四阶3个控制点，当然还有更多控制点的更多阶，不过在安卓开发中，用的3个已经是极限了，因为随着控制点增加，cpu要做的运算量呈指数增长，为了保证性能，最好将控制点使用保证在2个以下，3个不是不可以，如果是看效果还好，但是不建议在实际开发中应用，一般来说，3阶贝塞尔曲线已经够用了，足以满足绝大部分场景需求。
如果你了解PS，就很容易理解贝塞尔曲线是怎么画出的了，不了解PS也没关系，看下面几个图就明白了，比较简单：
一阶贝塞尔因为没有控制点，看起来其实就是一条直线。这里就不画图了。
二阶贝塞尔有一个控制点，在PS里用钢笔工具可以很形象的看到其结构，如图：

三阶贝塞尔曲线，2个控制点，一个在上，一个在下：

2.关键API

在自定义View中，绘制的坐标系是以屏幕左上角为原点（0，0），向右向下为正方向，如果我们想画一个2阶贝塞尔曲线，首先我们要一个画笔paint，一个路径path,然后可以画画了，
path.moveTo(startX,startY);
path.quadTo(controlX,controlY,endX,endY);
然后在ondraw()方法中就可以画出来了：
示例代码如下：

        path.moveTo(100,100);
        path.quadTo(300,20,500,100);

就这样，一个二阶贝塞尔曲线就画出来了：

三阶贝塞尔用的是：cubicTo(x1,y1,x2,y2,x3,y3);其中，x1,y1是第一个控制点，x2,y2是第二个控制点，x3,y3是终点。

         path.moveTo(100,100);
         path.cubicTo(300,20,500,180,800,100);

效果图为：

如果没有moveTo()方法，系统默认起始点为原点（0，0），而每次quadTo()时，起始点都是上一次的终点，终点又会成下一次的起点，这个要尤其注意，并非还是一开始的起始点。

于是，这里引出另一个API来画贝塞尔曲线，
二阶：rQuadTo(controlX,controlY,endX,endY)；
三阶：rCubicTo(control1X,control1Y,control2X,contrl2Y,endX,endY);

看源码可以知道，这个方法采用的坐标是相对于起始点的坐标值计算的，换句话说，x1,y1体现的是变化量，系统根据此变化量算出真实坐标。例如，实现上面二阶贝塞尔曲线可以这么写：

path.quadTo(300,20,500,100);

实现三阶可以这么写:

 path.rCubicTo(200,-80,400,80,600,0);

效果是一样的。


安卓本身并没有针对4阶以上的贝塞尔做实现，至于4阶以上的实现方式，我随后整理出来，这里为了快速掌握并实战，直接进入第三个环节：

3学以致用

做出一个小特效，如图：

代码如下：

/**
 * Created by HY on 2017/6/12.
 */

public class BazierDemo extends View implements View.OnClickListener {
    private int radius =dp2px(55);
    private Paint mPathPaint ;
    private Path mPath;
    private int mWaveLength = 280;
    //波纹数量
    private int waveCount;
    private int mRadius;
    private int dx=0;
    private int mCenterY;
    private int mScreenHeight;
    private int mScreenWidth;
    private int mOffset;
    private Paint cirPaint;
    private Bitmap bitmap;
    private Canvas bitmapCanvas;
    private ValueAnimator animator;

    public BazierDemo(Context context) {
        this(context,null);
    }

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

    public BazierDemo(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        cirPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        cirPaint.setAntiAlias(true);
        cirPaint.setDither(true);
        cirPaint.setColor(Color.LTGRAY);
        cirPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mPathPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPathPaint.setAntiAlias(true);
        mPathPaint.setDither(true);
        mPathPaint.setColor(Color.BLUE);
        mPathPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mPathPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        setOnClickListener(this);
        mPath = new Path();
    }
    private int dp2px(int dp) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, getResources().getDisplayMetrics());
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mScreenWidth = w;
        mScreenHeight = h;
        if (bitmap==null){
            bitmap = Bitmap.createBitmap(w,h, Bitmap.Config.ARGB_8888);
        }
        //
        mRadius = w/3;
        waveCount = (int) Math.round(mScreenWidth/mWaveLength+1.5);
        mCenterY= mScreenHeight/2+mRadius;
        if (bitmapCanvas==null){
            bitmapCanvas = new Canvas(bitmap);
        }

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //绘制圆
        bitmapCanvas.save();
        bitmapCanvas.drawCircle(getWidth()/2,getWidth()/2, getWidth()/3, cirPaint);
        mPath.reset();
        //移动到屏幕最左边
        mPath.moveTo(-mWaveLength+mOffset,mCenterY+dx);
        for (int i = 0; i < waveCount; i++) {
            //正弦曲线
            mPath.quadTo((-mWaveLength*3/4)+(i*mWaveLength)+mOffset,mCenterY+30+dx,(-mWaveLength/2)+(i*mWaveLength)+mOffset,mCenterY+dx);
            mPath.quadTo((-mWaveLength/4)+(i*mWaveLength)+mOffset,mCenterY-30+dx,i*mWaveLength+mOffset,mCenterY+dx);
        }
         //填充
        mPath.lineTo(mScreenWidth,mScreenHeight);
        mPath.lineTo(0,mScreenHeight);
        mPath.close();
        bitmapCanvas.drawPath(mPath,mPathPaint);
        bitmapCanvas.restore();
        canvas.drawBitmap(bitmap,0,0,null);
    }

    @Override
    public void onClick(View v) {
        animator = ValueAnimator.ofInt(0,mWaveLength);
        animator.setDuration(1000);
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.setInterpolator(new LinearInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mOffset = (int) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        animator.start();
    }
    public void setProgress(int dx){
       this.dx = -(int) (dx*0.01f*2*mRadius);
        invalidate();
    }
}

MainActivity里的代码为：

 bazierDemo = (BazierDemo) findViewById(R.id.demo);
        seekBar = (SeekBar) findViewById(R.id.seek);
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                bazierDemo.setProgress(progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });