Android自定义view-WaveCircle

最新推荐文章于 2024-06-06 09:39:19 发布

原创

最新推荐文章于 2024-06-06 09:39:19 发布 · 1.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#waveCircle

Android自定义view（1）
开始写博客，不在懒惰，不在懒惰，不在懒惰，重要的事情说三遍！哈哈，开始自定义view之旅
首先上图：
一个有进度的波浪圆
如何达到该View的效果？波浪如何绘制？
（1）在实现该View之前，先要了解Xfermode
什么是Xfermode：称之为图像混合模式，Android官方给了张图来解释
这里写图片描述
也就是图像的集合操作
其中我们先绘制Dst，然后给Paint设置Xfermode模式，然后在绘制Src，呈现的效果就如上图所示
几个常用的
SrcIn：取两层交集，显示上层的，DstIn与之相反
SrcOut：取上层图像的非交集部分，DstOut与之相反等等
那么来看我们实现该View的思路：
这种效果可以使用PorterDuff.Mode.SRC_IN模式，也就是取两层交集，显示上层的，即会先绘制一个圆，然后设置Xfermode的模式为SrcIn,然后在绘制一个波浪，使其与圆相交，不断的移动绘制的波浪就可以达到波动的效果，同时将波浪向上移动，一次有水流逐渐上升的效果。
其中使用到的知识有
（1）Xfermode
（2）使用Handler控制动画逻辑
（3）使用贝塞尔曲线实现波浪效果
来看原理图：
这里写图片描述
（1）使用Path的贝塞尔曲线方法rQuadTo构建波浪曲线，代码如下：

        mPath.reset();
        mPath.moveTo(-2 * radius + count, 2 * radius - progress);
        mPath.rQuadTo(radius / 2, A, radius, 0);
        mPath.rQuadTo(radius / 2, -A, radius, 0);
        mPath.rQuadTo(radius / 2, A, radius, 0);
        mPath.rQuadTo(radius / 2, -A, radius, 0);
        mPath.lineTo(2 * radius + count, 2 * radius);
        mPath.lineTo(-2 * radius + count, 2 * radius);
        mPath.close();

可以看到使用Path的rQuadTo方法来构建波浪，最后使其封闭，其中rQuadTo的方法相对于前一个点的步进，类似scrollby。在构建完波浪后，我们通过不停的mPath.moveTo，使波浪超前移动，在与圆相交后显示出来，这里注意，波浪与圆的位置关系，波浪在圆的正下方并且有两个完整的波，这样当我们moveTo到一个波浪时，我们在讲其moveTo到原始的位置，波浪有回到了远点，就源源不断的流下来了。
代码如下，当波浪的步进移动了一个完整的波时，就置为为0，让其回到远点

  if (count >= 2 * radius) {
                    count = 0;
               }

（2）Xfermode的使用：代码如下：

xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
  @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制圆
        mPaint.setColor(circleColor);
        canvas.drawCircle(radius, radi