自定义猜画小歌水波纹背景

猜画小歌.gif

最近被朋友圈刷屏的猜画小歌火极一时，我们当然要去玩一玩了，不过作为一个灵魂画师，基本画不对几张图就是了。不过里面那个倒计时的水波纹效果的进度桶还是有点意思的，来自定义View来写写看了。
先看效果图

进度View.gif

动画并不复杂，就是一个水波纹特效，同时，水面不断往上升。水波纹特效我们肯定要用贝塞尔曲线来绘制，图中有两条水波纹，一条向左，一条向右，所以定义控制点的时候，一条是从从做到右，另一条是从右到左。

        canvas.save();

        paint.setColor(Color.parseColor("#8B9AAF"));
        paint.setStyle(Paint.Style.FILL);

        path.reset();
        path2.reset();

        float mCenterY = getHeight(); //以屏幕最低端为起点
        float mWaveLength = 1000F; //水波纹的波长
        float yRate = 2F;
        float amplitude = 60F;  //振幅

        int mWaveCount = (int) Math.round(getWidth() / mWaveLength + 1.5);

        float xPosition = (position*10)%mWaveLength; //动画的控制变量，这个X方向的

        path.moveTo(-mWaveLength + xPosition, mCenterY - position*yRate);
        path2.moveTo(mWaveLength - xPosition + getWidth(), mCenterY - position*yRate);

        for(int i = 0; i <  mWaveCount; i++) {

            float x1 = (-mWaveLength * 3 / 4) + (i * mWaveLength) + xPosition;
            float y1 = mCenterY + amplitude - position*yRate;
            float x2 = (-mWaveLength / 2) + (i * mWaveLength) + xPosition;
            float y2 = mCenterY-position*yRate;
            float x3 = (-mWaveLength / 4) + (i * mWaveLength) + xPosition;
            float y3 = mCenterY - amplitude - position*yRate;
            float x4 = i * mWaveLength + xPosition;
            float y4 = mCenterY-position*yRate;

            path.quadTo(x1, y1, x2, y2);
            path.quadTo(x3, y3, x4, y4);

            path2.quadTo(-x1+getWidth(), y1, -x2+getWidth(), y2);
            path2.quadTo(-x3+getWidth(), y3, -x4+getWidth(), y4);

        }

        path.lineTo(getWidth(), getHeight());
        path.lineTo(0, getHeight());

        path2.lineTo(getWidth(), getHeight());
        path2.lineTo(0, getHeight());
        path.close();
        path2.close();

        paint.setXfermode(mode);

        canvas.drawPath(path2, paint);
        paint.setColor(Color.parseColor("#E9ECFA"));

        canvas.drawPath(path, paint);

        canvas.restore();

以上就是代码了，有需要的可以研究下。