Android 双曲线波浪动画(第一发)

前言：
好像是从简书看到一个IOS的双曲线波浪的动画，刚好最近把Cavans重新复习了一遍，那么就用这个来巩固好了，而且这个效果确实挺好玩的。如果大家对android中的三次贝塞尔曲线不太理解，对API也不太熟的，可以去这个博客看看[置顶] Android自定义控件三部曲文章索引，这是我读过总结的最详细的博文，很适合摸索阶段和温习阶段去阅读，这里感谢启舰大神，非常细致的博文。

上图：

颜色搭配有点丑，wave的波长也不是很完美，大家将就着看下就是了，看是来看代码好了。

代码通杀一切：
DoubleWaveView

package cjh.doublewave;

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;

/**
 * Created by chenjiahuan on 16/7/1.
 */
public class DoubleWaveView extends View {

    private Paint mPaint;
    private Path mPath;
    private int width, height;

    private int dx;

    public DoubleWaveView(Context context, int width, int height) {
        super(context);
        this.width = width;
        this.height = height;
        init();
    }

    public DoubleWaveView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

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

    private void init() {
        mPath = new Path();
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPath.reset();
        mPaint.setColor(Color.parseColor("#65ff0000"));
        mPath.moveTo(-width + dx, height / 5 * 4);
        for (int i = 0; i < 3; i++) {
            mPath.rQuadTo(width / 4, -70, width / 2, 0);
            mPath.rQuadTo(width / 4, 70, width / 2, 0);
        }
        mPath.lineTo(width, height);
        mPath.lineTo(0, height);
        mPath.close();
        canvas.drawPath(mPath, mPaint);

        mPath.reset();
        mPaint.setColor(Color.parseColor("#6500ff00"));
        mPath.moveTo(-width + dx, height / 5 * 4);
        for (int i = 0; i < 3; i++) {
            mPath.rQuadTo(width / 4, 70, width / 2, 0);
            mPath.rQuadTo(width / 4, -70, width / 2, 0);
        }
        mPath.lineTo(width, height);
        mPath.lineTo(0, height);
        mPath.close();
        canvas.drawPath(mPath, mPaint);

    }

    public void startAnimation() {
        ValueAnimator valueAnimator = ValueAnimator.ofInt(0, width);
        valueAnimator.setDuration(2000);
        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                dx = (int) animation.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimator.start();
    }
}

先看onDraw部分，其实只需要看其中一个wave的代码就OK了：

mPath.reset();
        mPaint.setColor(Color.parseColor("#65ff0000"));
        mPath.moveTo(-width + dx, height / 5 * 4);
        for (int i = 0; i < 3; i++) {
            mPath.rQuadTo(width / 4, -70, width / 2, 0);
            mPath.rQuadTo(width / 4, 70, width / 2, 0);
        }
        mPath.lineTo(width, height);
        mPath.lineTo(0, height);
        mPath.close();
        canvas.drawPath(mPath, mPaint);

既然是画一条占满屏幕宽度的wave，肯定是使用rQuadTo这个API了，和quadTo的API绝对位置不同的是rQuadTo的参数都是相对位置的值，这个两个API我想还是稍微说下好了，看图：

OK，说完了，有点粗糙和暴力，不过应该能看懂就是了，如果还是不懂，可以看开头介绍的那篇博客。

代码中mPath.moveTo(-width + dx, height / 5 * 4);这一行x轴的起始点不是固定的，dx是跟着属性动画走的，如果不清楚属性动画可以看我的文章Android动画-Property Animation(一)，在博文的最后稍微介绍了抛物线的动画，其实就是使用的拦截器，一个道理。

我整个wave的波长其实就是屏幕的宽度，所以我在画wave的时候小小的偷了个懒，因为我知道我想画的wave其实就是屏幕的三倍长，所以循环了三次，如果是不知道自己到底的wave的最终具体波长的可以这么写：

if(int i = -wavewidth; i<= screenwidth + wavewidth; i+=wavewidth ){
}

这里循环的意思，其实就是我从屏幕左侧一个波长的点开始，每次增长一个wave的长度，最后想要到达屏幕右侧一个波长的点。

OK，属性动画这里就不需要多讲了吧，很简单的一个值得变化，另外注意下，在MainActivity中，动态添加的时候需要，设置LayoutParams

 private void initWaveView() {
        rootView = (FrameLayout) findViewById(R.id.rootView);
        waveView = new DoubleWaveView(this, width, height);
        FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(width, height);
        rootView.addView(waveView, params);
        waveView.startAnimation();
    }

这样一个很简单的双曲线动画就OK了，当然了我看到的双曲线动画，比这个要精致很多，那是下一篇博客的内容了。