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

Posted 2023-03-10 talk_8

文章目录

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

各位看官们大家好，上一回中咱们说的例子是"绘制波浪效果",这一回中咱们说的例子是"

波浪上升动画

"。闲话休提，言归正转， 让我们一起Talk android吧！

整体思路

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

实现方法

1. 复用自定义的波浪组件，组件的测量方法不变；
2. 在绘制方法中画一个矩形，用来当作容器，让波浪位于该容器中；
3. 绘制波浪时减小波浪所在路径的y坐标，让路径中的波浪出现上升效果；
4. 反复移动波浪，同时不断地减小路径的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;
    

看官们，关于"波浪上升动画"的例子咱们就介绍到这里，欲知后面还有什么例子，且听下回分解！