Android自定义View—贝塞尔曲线绘制及属性动画 （二）

接着上一篇自定义送心控件效果来说，Android自定义View—贝塞尔曲线绘制及属性动画 （一） 。

上次我们用到了贝塞尔曲线，不是绘制出来曲线，而是规定属性动画运动轨迹，这次就用它和属性动画来做出一个波浪移动加小船的特效吧，老规矩上图（视频转gif质量被压缩很多）：

波浪效果图

分析问题

我们可以看到这个是一个小船随着波浪在上面荡漾，很明显动画分为波浪动画及小船动画，波浪动画其实就是波浪在不停地移动。

我们首先要画出波浪，波浪其实也就是类似正余弦曲线，屏幕上可见范围其实就是若干个曲线组合而成的。但是我们不能只在屏幕可见范围内绘制曲线吧，这样如果我们做平移动画的时候会出现不连续的情况，因此我们可以在屏幕左边和右边的位置多绘制一个周期的曲线

波浪动画原理示意图

左边加上一个周期的波长是为了动画执行，右边加上一个周长是因为屏幕可见范围内若干个波长可能不能正好到控件最右边，因此加上一个周期波长就不用在意这样的情况会发生。

我们从草图可以看出半个周期的波长我们可以用贝塞尔曲线绘制出来于是我们来绘制，其实很简单：

...
private int waveHeight = 100 ; //波峰
private int waveWidth = 300 ;  //波长
private int originalY = 450 ; //波浪在控件的位置
...
/**
 * 绘制波浪
 */
private void setDrwawData() {
        path.reset();
        int halfWaveWidth = waveWidth /2 ; //半个波长
        path.moveTo(-waveWidth+dx,originalY);
        for (int i = -waveWidth;i<mWidth+waveWidth;i=i+waveWidth){
            path.rQuadTo(halfWaveWidth/2,-waveHeight,halfWaveWidth,0);
            path.rQuadTo(halfWaveWidth/2,waveHeight,halfWaveWidth,0);
        }
        region = new Region();
        Region clip = new Region((int)(mWidth/2-0.1),0,mWidth/2,mHeight*2);
        region.setPath(path,clip);

        path.lineTo(mWidth,mHeight);
        path.lineTo(0,mHeight);
        path.close();
}

绘制二阶贝塞尔曲线的时候调用Path的方法，有2个方法，一个是：

public void rQuadTo(float dx1, float dy1, float dx2, float dy2)

另一种是

public void quadTo(float x1, float y1, float x2, float y2)

这两种绘制方法的区别就是，rQuadTo参数是相对与起始点（path.moveTo(x,y)）移动的距离，而quadTo里面的参数是具体的某个点在屏幕中的坐标。这里采用相对的方式，便于后期动画的处理。
上面的代码因该很容易看懂吧，Region我们等会在说。现在我们让波浪动起来，细心的人肯定都看到 path.moveTo(-waveWidth+dx,originalY);这里x坐标多加了dx的距离，也就是我这个波浪起始位置不是固定的，SO,我们这个属性动画就靠dx了，请看：

/**
 * 波浪移动属性动画
 */
public void startAimate(){
    ValueAnimator animator = ValueAnimator.ofFloat(0,1);
    animator.setRepeatCount(ValueAnimator.INFINITE);
    animator.setInterpolator(new LinearInterpolator());
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            float factor = (float) valueAnimator.getAnimatedValue();
            dx = (int) ((waveWidth)*factor);
            invalidate();
        }
    });
    animator.setDuration(1000);
    animator.start();
}

我们让dx在0到一个波长的距离里面不断的变化然后重新绘制是不是就动起来了啊，很赞吧。

接下来波浪中间位置， 有个小船在波浪上面飘荡着，我们可以看到，这个小船是沿着贝塞尔曲线上下运动的，只要我能够获取到贝塞尔曲与屏幕纵向中线的交点，然后我们就在这个位置绘制小船即可实现。

图像之间的交集我们因该能想到Region吧，我们把中线看成宽度为1的矩形，它与曲线交点所得到的图型的位置也就约等于交点。

Rect bounds = region.getBounds();
if (bounds.top<originalY){
    canvas.drawBitmap(mBitmap,bounds.right-mBitmap.getWidth()/2,bounds.top-mBitmap.getHeight()/2,paint);
}else {
    canvas.drawBitmap(mBitmap,bounds.right-mBitmap.getWidth()/2,bounds.bottom-mBitmap.getHeight()/2,paint);
}

至此其实基本也都出来了效果，大家可以自己去实践和思考，毕竟纸上得来总觉浅。

由于时间有限，来了一车砖，工头喊我去卸砖了，就记录到此吧，最后附上整体源码：

import android.animation.AnimatorListenerAdapter;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PointF;
import android.graphics.Rect;
import android.graphics.Region;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;
import android.widget.RelativeLayout;

import com.wzh.ffmpeg.study.R;

/**
 * author：Administrator on 2017/3/15 11:29
 * description:文件说明
 * version:版本
 */
public class WaveView extends View {
    private int mWidth = 0 ;
    private int mHeight = 0 ;
    private Path path ;
    private Paint paint ;
    private int waveHeight = 100 ; //波峰
    private int waveWidth = 300 ;  //波长
    private int originalY = 450 ;
    private Region region ;
    private int dx = 0 ;
    private Bitmap mBitmap ;

    private Path mPath ;
    public WaveView(Context context) {
        this(context,null);
    }

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

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

    /**
     * 初始化数据
     */
    private void init() {
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(Color.parseColor("#46a3ff"));
        paint.setStyle(Paint.Style.FILL_AND_STROKE);
        paint.setStrokeWidth(5);
        path = new Path();
        mPath = new Path();
        mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.boat);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //从MeasureSpec中获取Mode和Size
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int width;
        int height ;
        //依据模式获取预设的width和height
        if (widthMode == MeasureSpec.EXACTLY)
        {
            width = widthSize;
        } else
        {
            int desired = (int) (getPaddingLeft() +  getPaddingRight());
            width = desired;
        }

        if (heightMode == MeasureSpec.EXACTLY)
        {
            height = heightSize;
        } else
        {
            int desired = (int) (getPaddingTop()  + getPaddingBottom());
            height = desired;
        }
        mWidth = width ;
        mHeight = height;
        waveWidth = mWidth/2 ;
        //殊途同归，传递我们自定义的数据
        setMeasuredDimension(width, height);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint.setColor(Color.parseColor("#46a3ff"));
        canvas.drawPath(path,paint);
        setDrwawData();
        Rect bounds = region.getBounds();
        if (bounds.top<originalY){
            canvas.drawBitmap(mBitmap,bounds.right-mBitmap.getWidth()/2,bounds.top-mBitmap.getHeight()/2,paint);
        }else {
            canvas.drawBitmap(mBitmap,bounds.right-mBitmap.getWidth()/2,bounds.bottom-mBitmap.getHeight()/2,paint);
        }
    }

    /**
     * 绘制波浪
     */
    private void setDrwawData() {
            path.reset();
            int halfWaveWidth = waveWidth /2 ; //半个波长
            path.moveTo(-waveWidth+dx,originalY);
            for (int i = -waveWidth;i<mWidth+waveWidth;i=i+waveWidth){
                path.rQuadTo(halfWaveWidth/2,-waveHeight,halfWaveWidth,0);
                path.rQuadTo(halfWaveWidth/2,waveHeight,halfWaveWidth,0);
            }
            region = new Region();
            Region clip = new Region((int)(mWidth/2-0.1),0,mWidth/2,mHeight*2);
            region.setPath(path,clip);

            path.lineTo(mWidth,mHeight);
            path.lineTo(0,mHeight);
            path.close();
    }

    /**
     * 波浪移动属性动画
     */
    public void startAimate(){
        ValueAnimator animator = ValueAnimator.ofFloat(0,1);
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.setInterpolator(new LinearInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float factor = (float) valueAnimator.getAnimatedValue();
                dx = (int) ((waveWidth)*factor);
                invalidate();
            }
        });
        animator.setDuration(1000);
        animator.start();
    }
}

如果有什么不懂或者不对的地方还请指出，谢谢，大家互相学习~