一起Talk Android吧（第五百一十九回：波浪上升动画)

文章目录

整体思路
实现方法
示例代码

各位看官们大家好，上一回中咱们说的例子是"绘制波浪效果",这一回中咱们说的例子是" 波浪上升动画"。闲话休提，言归正转，让我们一起Talk Android吧！

整体思路

我们是在绘制波浪的基础上让波浪一边波动一边上升。波浪波动的部分还是使用一章回中的内容，波浪上升的思路就是不断地减小波浪的y坐标，直到减小到0为止。我们画波浪时借助了路径，因此我们修改路径的y坐标。下面是程序的运行效果，请大家参考：

实现方法

复用自定义的波浪组件，组件的测量方法不变；
在绘制方法中画一个矩形，用来当作容器，让波浪位于该容器中；
绘制波浪时减小波浪所在路径的y坐标，让路径中的波浪出现上升效果；
反复移动波浪，同时不断地减小路径的y坐标,直到0为止；

示例代码

介绍使用方法后，下面是示例代码，我们只列出与上一章回中不同的代码，相同的代码不再列出：

    private void initView(){
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.FILL);

        //初始化绘制容器的画笔
        mOutSidePaint = new Paint();
        mOutSidePaint.setColor(Color.GREEN);
        mOutSidePaint.setStrokeWidth(20);
        mOutSidePaint.setStyle(Paint.Style.STROKE);
    }

    //获取路径的代码中添加了减少路径y坐标的代码。代码中使用baseline表示路径y坐标
    //注意:当路径的y坐标减少到0时给它赋值为2倍波浪高度，这样波浪可以填充满顶部的空间
    private Path  getPath(){
        int itemWidth = waveWidth/2;
        Path mPath = new Path();
        if(baseLine > 0) {
            baseLine -= 1;
        }else {
            baseLine = -waveHeight*2;
        }

        Log.e("baseline", "getPath: "+baseLine);
        mPath.moveTo(-itemWidth * 3, baseLine);
        //核心的代码就是这里
        for (int i = -3; i < 2; i++) {
            int startX = i * itemWidth;
            mPath.quadTo(
                    startX + itemWidth/2 + offset,
                    getWaveHeigh( i ),
                    startX + itemWidth + offset,
                    baseLine
            );
        }
        //下面这三句话很重要，它是形成了一封闭区间，让曲线以下的面积填充一种颜色，大家可以把这3句话注释了看看效果。
        mPath.lineTo(width,height);
        mPath.lineTo(0,height);
        mPath.close();
        return  mPath;
    }