Android贝塞尔曲线————波浪效果（大波浪)

发表于
贝塞尔曲线的实战

Hello大家好，很高兴又一次与大家见面，今天是农历丁酉鸡年（大年初四），现在跟大家拜年有点晚，算是拜晚年，祝大家晚年幸福。 这么快大伙都到了晚年了，Android贝塞尔曲线我也准备以一个大波浪来结束。所以今天给大家带来的就是android贝塞尔曲线制作波浪效果。

如果大家没有看过Android贝塞尔曲线——曲线初体验、 Android贝塞尔曲线——曲线进阶可以点击查看，那两篇对android贝塞尔曲线有一些讲解。

好了说了这么久我们来看一下效果吧。
波浪图动画
怎么样是不是很动感，很哇塞。 那么我们一起来搞定它吧！

我觉得应该先来给大家梳理一下思路，我们首先应该找出曲线的起始点、终止点和控制点坐标。 其次我们应该绘制出来一整条的波纹，也就是要绘制出两条贝塞尔曲线，紧接着我们往屏幕外绘制一条相同长度的一整条波纹，屏幕外的波纹每次加上一个固定的值然后加上动画让他们周期性循环，这样这个波浪也就绘制出来了。

好了，多说无益，还是代码最有感觉，下面我直接贴上我的代码，我觉得通过之前的学习理解这个波浪应该没有那么困难了。有问题的小伙伴可以在下方评论，或者私信我来讨论具体问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
public class BoLangView extends View implements View.OnClickListener{
    private int mWaveLength;
    private int mScreenWidth;
    private int mScreenHeight;
    private int mCenterY;
    private  int mWaveCount;
    private int offset;
    private Path mPath;
    private Paint mPaint;
    private ValueAnimator mValueAnimatior;
    public BoLangView(Context context) {
        super(context);
    }
    public BoLangView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mPaint.setStrokeWidth(8);
        mPaint.setColor(Color.LTGRAY);
        mWaveLength = 800;
    }
    public BoLangView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        // 需要计算出屏幕能容纳多少个波形
        mPath = new Path();
        mScreenHeight = h;
        mScreenWidth = w;
        mCenterY = h / 2;
        mWaveCount = (int) Math.round(mScreenWidth / mWaveLength + 1.5); // 计算波形的个数
        setOnClickListener(this);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPath.reset();
        mPath.moveTo(-mWaveLength,mCenterY);
        for (int i = 0; i < mWaveCount; i++) {
            mPath.quadTo(-mWaveLength * 3 / 4 + i * mWaveLength + offset,mCenterY + 60,-mWaveLength / 2 + i * mWaveLength + offset,mCenterY);
            mPath.quadTo(-mWaveLength / 4 + i * mWaveLength + offset,mCenterY - 60,i * mWaveLength + offset,mCenterY);
        }
        mPath.lineTo(mScreenWidth,mScreenHeight);
        mPath.lineTo(0,mScreenHeight);
        mPath.close();
        canvas.drawPath(mPath,mPaint);
    }
    @Override
    public void onClick(View v) {
        mValueAnimatior = ValueAnimator.ofInt(0, mWaveLength);
        mValueAnimatior.setDuration(1000);
        mValueAnimatior.setInterpolator(new LinearInterpolator());
        mValueAnimatior.setRepeatCount(ValueAnimator.INFINITE);
        mValueAnimatior.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                offset = (int) animation.getAnimatedValue();
                invalidate();
            }
        });
        mValueAnimatior.start();
    }
}

我这个代码还和以前一样，省略了布局引用，加载activity等等那些特别基础的东西，好了到现在整个贝塞尔之旅到这里算是结束了，以后如果有什么贝塞尔做出的效果可能会与大家来一同分享。喜欢的话来给我一个赞吧！