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了，当然了我看到的双曲线动画，比这个要精致很多，那是下一篇博客的内容了。