PorterDuffXferMode实战之WaveProgressBar 圆形水波纹进度

一写在前面的话

前几天写了一篇Android 绘图之PorterDuffXferMode实例讲解与源码解析，没看过的可以先进去看看。今天我们就来使用PorterDuffXferMode的DST_IN模式，本来想写个圆形头像来看看效果就行了，但是恰巧群里有朋友问到水波纹的进度效果。于是乎去看了下实现方式正好也可以用到PorterDuffXferMode，立马决定还是做个个效果更炫。先看看下面效果图，就这么一张动图，懒癌犯了懒得做中间效果动图。

效果图.gif

二效果分析

看了上面效果图，闲来分析下怎么做出这个效果。

静态波浪效果（通过Canvas的drawPath方法画二阶贝塞尔曲线实现）
动态波浪效果（改变波浪高度和X方向绘制位置后定时invalidate）
圆形效果（通过PorterDuffXferMode的DST_IN和动态波浪效果组合）
进度文字（最终效果上绘制出文字）

三波浪效果

静态波浪效果实现
首先我们通过Canvas的drawPath方法画二阶贝塞尔曲线的方法，来绘制静态波浪效果。我们先看效果，然后看代码。代码一般都注视得比较详细。避免单独再解释代码。来上静态波浪效果图：

静态波浪效果1.png

先上一段xml，然后是代码。原则上不改xml，就不再上了：

    <com.joker.widget.test.WaveProgressBar
        android:id="@+id/wave"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_gravity="center_horizontal"
        android:padding="10dp"/>

//静态波浪效果1
public class WaveProgressBar extends View {
    private Paint mWavePaint = new Paint(); //水波画笔
    private Path mPath = new Path();  //路径
    private int mWidth;  //控件宽
    private int mHeight; //控件高
    private int mWaveWidth = 200; //水波宽
    private int mWaveHeight = 100; //水波高
    int currentY = 200; //当前Y值

    public WaveProgressBar(Context context) {
        this(context, null);
    }

    public WaveProgressBar(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public WaveProgressBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mWavePaint.setAntiAlias(true);
        mWavePaint.setColor(Color.GREEN);
    }

    //获取控件的宽和高
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (w > 0) {
            mWidth = w;
        }
        if (h > 0) {
            mHeight = h;
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (mWidth <= 0 || mHeight <= 0) {
            return;
        }
        //绘制一个灰色背景 方便看效果
        canvas.drawColor(Color.GRAY);
        mPath.reset();
        //路径起点
        mPath.moveTo(0, 200);
        //i+2: 一上一下2个半波为一组 count+2: 保证波浪占满控件
        for (int i = 0, count = mWidth / mWaveWidth + 2; i < count; i += 2) {
            //上半波
            mPath.quadTo(mWaveWidth * (i + 0.5f), currentY - mWaveHeight, mWaveWidth * (i + 1), currentY);
            //下班波
            mPath.quadTo(mWaveWidth * (i + 1.5f), currentY + mWaveHeight, mWaveWidth * (i + 2), currentY);
        }
        //绘制路径
        canvas.drawPath(mPath, mWavePaint);
    }
}

接下来我们让波浪封闭起来，并且让它水位升高，有总水杯里的水的感觉。还是和前面一样，看图看代码：

封闭起来的静态波浪效果.png

水位升高的的静态波浪效果.png

//封闭起来的静态波浪效果
public class WaveProgressBar extends View {
    private Paint mWavePaint = new Paint();
    private Path mPath = new Path();
    private int mWidth;
    private int mHeight;
    private int mWaveWidth = 200; //水波宽
    private int mWaveHeight = 100; //水波高
    int currentY = 200; //当前Y值

    public WaveProgressBar(Context context) {
        this(context, null);
    }

    public WaveProgressBar(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public WaveProgressBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mWavePaint.setAntiAlias(true);
        mWavePaint.setColor(Color.GREEN);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (w > 0) {
            mWidth = w;
        }
        if (h > 0) {
            mHeight = h;
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (mWidth <= 0 || mHeight <= 0) {
            return;
        }
        canvas.drawColor(Color.GRAY);
        mPath.reset();
        //路径起点
        mPath.moveTo(0, 200);
        //i+2: 一上一下2个半波为一组 count+2: 保证波浪占满控件
        for (int i = 0, count = mWidth / mWaveWidth + 2; i < count; i += 2) {
            //上半波
            mPath.quadTo(mWaveWidth * (i + 0.5f), currentY - mWaveHeight, mWaveWidth * (i + 1), currentY);
            //下班波
            mPath.quadTo(mWaveWidth * (i + 1.5f), currentY + mWaveHeight, mWaveWidth * (i + 2), currentY);
        }
        //一下两句代码就完成了水波的封闭效果
        mPath.lineTo(mWidth, mHeight);
        mPath.lineTo(0, mHeight);
        mPath.close();
        canvas.drawPath(mPath, mWavePaint);
    }
}

还是不得不啰嗦一下，我们这里添加了2行代码实现了水波的封闭：

        mPath.lineTo(mWidth, mHeight);
        mPath.lineTo(0, mHeight);

接下来就是水位的上升了，但是这个地方就上代码就有点故意拉长篇幅的嫌疑了。其实很简单我们只需要改变currentY的值，就可以实现水位的上升了。
这里关于Canvas路径绘制，或者是坐标系搞不明白的可以看我的：Android 绘图之Canvas相关API使用一文，在里面有比较详细的说明。

动态波浪效果实现
上面我们已经实现了静态的波浪效果了，代码还是比较简单的，接下来我们让波浪动次打次动次打次动起来。

动态波浪效果.gif

  //动态波浪效果
  public class WaveProgressBar extends View {
    private Paint mWavePaint = new Paint();
    private Path mPath = new Path();
    private int mWidth;
    private int mHeight;
    private int mWaveWidth = 200; //水波宽
    private int mWaveHeight = 100; //水波高
    int currentY = 200; //当前Y值
    private double mRate = 0.1; //流速
    private int distance;   //距离
    private Handler mHandler = new Handler(new Handler.Callback() {
        @Override
        public boolean handleMessage(Message msg) {
            distance += mWaveWidth * mRate; //计算流动总距离
            distance = distance % (mWaveWidth << 1);  //根据总距离算出当前移动距离
            invalidate(); //刷新重绘
            mHandler.sendEmptyMessageDelayed(0, 20); //20ms发送一个消息
            return false;
        }
    });

    public WaveProgressBar(Context context) {
        this(context, null);
    }

    public WaveProgressBar(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public WaveProgressBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mWavePaint.setAntiAlias(true);
        mWavePaint.setColor(Color.GREEN);
        //20ms发送一个消息
        mHandler.sendEmptyMessageDelayed(0, 20);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (w > 0) {
            mWidth = w;
        }
        if (h > 0) {
            mHeight = h;
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (mWidth <= 0 || mHeight <= 0) {
            return;
        }
        canvas.drawColor(Color.GRAY);
        mPath.reset();
        //路径起点
        mPath.moveTo(0, 200);
        //i+2: 一上一下2个半波为一组 count+2: 保证波浪占满控件
        for (int i = 0, count = mWidth / mWaveWidth + 2; i < count; i += 2) {
            //上半波  减去distance 造成左移效果 
            mPath.quadTo(mWaveWidth * (i + 0.5f) - distance, currentY - mWaveHeight, mWaveWidth * (i + 1) - distance, currentY);
            //下班波
            mPath.quadTo(mWaveWidth * (i + 1.5f) - distance, currentY + mWaveHeight, mWaveWidth * (i + 2) - distance, currentY);
        }
        mPath.lineTo(mWidth, mHeight);
        mPath.lineTo(0, mHeight);
        mPath.close();
        canvas.drawPath(mPath, mWavePaint);
    }
}

看效果图的水流还是很急的，减小速率就可以让它流慢点，我们先不关心这个，说说实现思路。主要是利用Handler定时发送消息通知重绘的方式，每20ms计算出移动距离并刷新重绘一次。在绘制的时候减去移动距离就有了左移效果，其他的说明在代码中注释很详尽了。

四圆形效果

水波效果我们就做到这里，接下来就是利用PorterDuffXferMode的DST_IN模式来实现圆形效果，我们先绘制的水波后绘制的圆，所以我们需要使用DST_IN。其实绘制圆形头像效果原理也是一样的，至于用什么模式就跟你绘制的先后顺序，还有需求有关。不了解PorterDuffXferMode可以去看看我之前的文章，本文后我会给出相关链接地址。

圆形效果.gif

  //圆形波浪效果
  public class WaveProgressBar extends View {
    private Paint mWavePaint = new Paint();
    private Path mPath = new Path();
    private int mWidth;
    private int mHeight;
    private int mWaveWidth = 200; //水波宽
    private int mWaveHeight = 100; //水波高
    int currentY = 200; //当前Y值
    private double mRate = 0.01; //流速
    private int distance;   //距离
    private PorterDuffXfermode mXfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
    private Bitmap mCircleBitmap;   //圆形bitmap
    private RectF mBorderRectF; //边框矩形
    private int mBorderRadius; //边框半径
    private Handler mHandler = new Handler(new Handler.Callback() {
        @Override
        public boolean handleMessage(Message msg) {
            distance += mWaveWidth * mRate; //计算流动总距离
            distance = distance % (mWaveWidth << 1);
            invalidate();
            mHandler.sendEmptyMessageDelayed(0, 20);
            return false;
        }
    });

    public WaveProgressBar(Context context) {
        this(context, null);
    }

    public WaveProgressBar(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public WaveProgressBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mWavePaint.setAntiAlias(true);
        mWavePaint.setColor(Color.GREEN);
        mHandler.sendEmptyMessageDelayed(0, 20);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (w > 0) {
            mWidth = w;
        }
        if (h > 0) {
            mHeight = h;
        }
        mWidth = mHeight = Math.min(mWidth, mHeight);
        //创建边框矩形
        mBorderRectF = new RectF(0, 0, mWidth, mHeight);
        //边框半径
        mBorderRadius = (mWidth >> 1);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (mWidth <= 0 || mHeight <= 0) {
            return;
        }
        canvas.drawBitmap(createWaveBitmap(), 0, 0, mWavePaint);
    }

    //创建水波bitmap
    private Bitmap createWaveBitmap() {
        Bitmap bitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        canvas.drawColor(Color.GRAY);
        mPath.reset();
        //路径起点
        mPath.moveTo(0, 200);
        //i+2: 一上一下2个半波为一组 count+2: 保证波浪占满控件
        for (int i = 0, count = mWidth / mWaveWidth + 2; i < count; i += 2) {
            //上半波  减去distance 造成左移效果
            mPath.quadTo(mWaveWidth * (i + 0.5f) - distance, currentY - mWaveHeight, mWaveWidth * (i + 1) - distance, currentY);
            //下班波
            mPath.quadTo(mWaveWidth * (i + 1.5f) - distance, currentY + mWaveHeight, mWaveWidth * (i + 2) - distance, currentY);
        }
        mPath.lineTo(mWidth, mHeight);
        mPath.lineTo(0, mHeight);
        mPath.close();
        canvas.drawPath(mPath, mWavePaint);
        if (mCircleBitmap == null) {
            //创建圆形的bitmap
            mCircleBitmap = createShapeBitmap();
        }
        //设置mXfermode模式
        mWavePaint.setXfermode(mXfermode);
        canvas.drawBitmap(mCircleBitmap, 0, 0, mWavePaint);
        mWavePaint.setXfermode(null);
        return bitmap;
    }

    //创建形状的bitmap
    private Bitmap createShapeBitmap() {
        Bitmap bitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        canvas.drawCircle(mBorderRectF.centerX(), mBorderRectF.centerY(), mBorderRadius, mWavePaint);
        return bitmap;
    }
}

这里把onDraw里面的代码抽取出来了，把onDraw的背景绘制放在了createWaveBitmap中便于观看效果，利用PorterDuffXferMode的DST_IN模式来实现圆形效果。

五绘制文字

我们已经完成了圆形的水波纹效果，接下来就是将文字绘制在圆形的水波里面。绘制文字就比较简单了，调用Canvas的drawText方法在圆形水波纹上将文字绘制出来就O啦。

添加文字后的水波纹效果.gif

public class WaveProgressBar extends View {
    private Paint mWavePaint = new Paint();
    private Paint mTextPaint = new Paint();
    private Path mPath = new Path();
    private int mWidth;
    private int mHeight;
    private int mWaveWidth = 200; //水波宽
    private int mWaveHeight = 100; //水波高
    int currentY = 200; //当前Y值
    private double mRate = 0.1; //流速
    private int distance;   //距离
    private PorterDuffXfermode mXfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
    private Bitmap mCircleBitmap;   //圆形bitmap
    private RectF mBorderRectF; //边框矩形
    private int mBorderRadius; //边框半径
    private Handler mHandler = new Handler(new Handler.Callback() {
        @Override
        public boolean handleMessage(Message msg) {
            distance += mWaveWidth * mRate; //计算流动总距离
            distance = distance % (mWaveWidth << 1);
            invalidate();
            mHandler.sendEmptyMessageDelayed(0, 20);
            return false;
        }
    });

    public WaveProgressBar(Context context) {
        this(context, null);
    }

    public WaveProgressBar(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public WaveProgressBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mWavePaint.setAntiAlias(true);
        mWavePaint.setColor(Color.GREEN);

        mTextPaint.setAntiAlias(true);
        mTextPaint.setColor(Color.WHITE);
        mTextPaint.setTextSize(32);
        mHandler.sendEmptyMessageDelayed(0, 20);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (w > 0) {
            mWidth = w;
        }
        if (h > 0) {
            mHeight = h;
        }
        mWidth = mHeight = Math.min(mWidth, mHeight);
        //创建边框矩形
        mBorderRectF = new RectF(0, 0, mWidth, mHeight);
        //边框半径
        mBorderRadius = (mWidth >> 1);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (mWidth <= 0 || mHeight <= 0) {
            return;
        }
        canvas.drawBitmap(createWaveBitmap(), 0, 0, mWavePaint);
        canvas.drawText("80%", mBorderRectF.centerX(), mBorderRectF.centerY(), mTextPaint);
    }

    //创建水波bitmap
    private Bitmap createWaveBitmap() {
        Bitmap bitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        canvas.drawColor(Color.GRAY);
        mPath.reset();
        //路径起点
        mPath.moveTo(0, 200);
        //i+2: 一上一下2个半波为一组 count+2: 保证波浪占满控件
        for (int i = 0, count = mWidth / mWaveWidth + 2; i < count; i += 2) {
            //上半波  减去distance 造成左移效果
            mPath.quadTo(mWaveWidth * (i + 0.5f) - distance, currentY - mWaveHeight, mWaveWidth * (i + 1) - distance, currentY);
            //下班波
            mPath.quadTo(mWaveWidth * (i + 1.5f) - distance, currentY + mWaveHeight, mWaveWidth * (i + 2) - distance, currentY);
        }
        mPath.lineTo(mWidth, mHeight);
        mPath.lineTo(0, mHeight);
        mPath.close();
        canvas.drawPath(mPath, mWavePaint);
        if (mCircleBitmap == null) {
            //创建圆形的bitmap
            mCircleBitmap = createShapeBitmap();
        }
        //设置mXfermode模式
        mWavePaint.setXfermode(mXfermode);
        canvas.drawBitmap(mCircleBitmap, 0, 0, mWavePaint);
        mWavePaint.setXfermode(null);
        return bitmap;
    }

    //创建形状的bitmap
    private Bitmap createShapeBitmap() {
        Bitmap bitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        canvas.drawCircle(mBorderRectF.centerX(), mBorderRectF.centerY(), mBorderRadius, mWavePaint);
        return bitmap;
    }
}

这一步没什么可说的，新创建了mTextPaint 画笔，设置了字体颜色大小等属性，最后在原本画好的效果上再绘制上文字就成了。可我们文章开头的效果图上，文字是随着水位而上升的，其实这个很简单，改变文本绘制的Y轴位置就能达到上升效果，我们的水波纹效果到这里就完成了它的雏形。

上面的演示代码还是比较杂乱，创建Bitmap都还是在onDraw中，没有考虑控件的测量，也不支持自定义属性等。大家可以根据上面的步骤，自己整理实现定义成自己想要的效果。

最后我将源码整理了下，优化后的源码后续会补上地址，就不在文中给出了。

附：
Android 绘图之Canvas相关API使用
 Android 绘图之PorterDuffXferMode实例讲解与源码解析

最后编辑于：2017.12.10 05:02:31

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,547评论 6赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,399评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,428评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,599评论 1赞 274
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,612评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,577评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,941评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,603评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,852评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,605评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,693评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,375评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,955评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,936评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,172评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,970评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,414评论 2赞 342

PorterDuffXferMode实战之WaveProgressBar 圆形水波纹进度

一 写在前面的话

二 效果分析

三 波浪效果

四 圆形效果

五 绘制文字

推荐阅读更多精彩内容

一写在前面的话

二效果分析

三波浪效果

四圆形效果

五绘制文字