Android自定义View-水波纹progressbar

最新推荐文章于 2021-11-23 17:19:11 发布
最新推荐文章于 2021-11-23 17:19:11 发布
阅读量817 收藏 1
点赞数
分类专栏： 自定义view 文章标签： android path 自定义view
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zone_/article/details/70445796
版权

　　首先来看一看效果图：
　　process
　　

先简要说一下这里需要涉及到的知识点：

  1. 2D绘图基础
  2. path贝塞尔二阶曲线
  3. ValueAnimator
  4. PorterDuffXfermode

参考的文章：

  1. Path从懵逼到精通（2）——贝塞尔曲线

绘制思路：

  1. 绘制两段二阶贝塞尔曲线围成的波浪封闭图形，一段波浪的长度为屏幕宽度。
  2. 水平移动绘制好的图形，形成波浪滚动的效果，并不断循环。
  3. 不断增加绘制图形的高度，形成水位上升的效果。
  4. 通过 PorterDuffXfermode 的效果 SRC_IN 绘制成最终效果

第一步：绘制封闭的波浪图形

首先是绘制下图中红色线条区域内的图形：
这里写图片描述
如上图中所示，我们要绘制两个屏幕宽度的波浪图形，那么先来看看我们要的效果图：
这里写图片描述

初始化成员变量：

private int mWaveHeight;//水波纹高度
private Paint mPaint;//绘制水波纹的画笔
private Path mPath;//绘制水波纹的路径
private int mWL;//屏幕宽度
private String TAG = "zoneLog";//Log 日志的 Tag
private int mFu;//水波纹的振幅
private int mOffset;//水波纹移动的偏移值
private boolean mMIsAnimatorPlaying;//用于判断是否第一次执行 ValueAnimator 
private Paint mTextPaint;//文字画笔
private String mText;//进度值文字

构造方法中的初始化数据：

mPaint = new Paint();//用于绘制水波纹的画笔
mPaint.setAntiAlias(true);
mPaint.setColor(Color.parseColor("#5DCEC6"));
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mFu = 100;//水波纹的振幅
mTextPaint = new Paint();//用于绘制文字的画笔
mTextPaint.setColor(Color.WHITE);
mTextPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mTextPaint.setAntiAlias(true);
mTextPaint.setTextSize(75);
mOffset= 0;//水波纹的偏移值，用于水波纹的移动效果
mWaveHeight= 0;//进度值，也是水波纹的高度
mPath = new Path();//用于绘制水波纹路径

首先绘制左边，右边，底部的三条线段：

mPath.moveTo(mWL, getHeight()/2);
mPath.lineTo(mWL, getHeight());//绘制右边的线段
mPath.lineTo(-mWL, getHeight());//绘制底部的线段
mPath.lineTo(-mWL, getHeight()/2);//绘制左边的线段

绘制屏幕中的波浪曲线：（ 此处需要注意，第一段波浪是在屏幕外面的）

mPath.quadTo((-mWL * 3 / 4), getHeight() / 2 + mFu, (-mWL / 2), getHeight() / 2); 
//画出第一段波纹的第一条曲线
mPath.quadTo((-mWL / 4), getHeight() / 2 - mFu, 0, getHeight() / 2); 
//画出第一段波纹的第二条曲线
mPath.quadTo((mWL / 4), getHeight() / 2 + mFu, (mWL / 2), getHeight() / 2); 
//画出第二段波纹的第一条曲线
mPath.quadTo((mWL * 3 / 4), getHeight() / 2 - mFu, mWL, getHeight() / 2);  
//画出第二段波纹的第二条曲线
mPath.close();//封闭曲线
canvas.drawPath(mPath, mPaint);//绘制曲线

到现在为止，就已经绘制出了一个波浪图形。

第二步：让水波纹动起来

先看一下效果图：
　
这里写图片描述
　
　
这里使用 ValueAnimator 来动态改变各个点的 x 轴坐标，使水波纹有循环流动的效果。那么添加了偏移值的代码是这样的：

mPath.reset();//每次修改 mPath 的值，需要重置 mPath
mPath.moveTo(mWL + mOffset, getHeight() / 2);
mPath.lineTo(mWL + mOffset, getHeight());//绘制右边的线段
mPath.lineTo(-mWL + mOffset, getHeight());//绘制底部的线段
mPath.lineTo(-mWL + mOffset, getHeight() / 2);//绘制左边的线段
mPath.quadTo((-mWL * 3 / 4) + mOffset, getHeight() / 2 + mFu, (-mWL / 2) + mOffset, getHeight() / 2); 
//画出第一段波纹的第一条曲线
mPath.quadTo((-mWL / 4) + mOffset, getHeight() / 2 - mFu, 0 + mOffset, getHeight() / 2); 
//画出第一段波纹的第二条曲线
mPath.quadTo((mWL / 4) + mOffset, getHeight() / 2 + mFu, (mWL / 2) + mOffset, getHeight() / 2); 
//画出第二段波纹的第一条曲线
mPath.quadTo((mWL * 3 / 4) + mOffset, getHeight() / 2 - mFu, mWL + mOffset, getHeight() / 2);  
//画出第二段波纹的第二条曲线
mPath.close();//封闭曲线
canvas.drawPath(mPath, mPaint);//绘制曲线

通过 ValueAnimator 动态改版 mOffset 的指：

if (!mMIsAnimatorPlaying) {//判断是否第一次开始 ValueAnimator
    mMIsAnimatorPlaying = true;
    ValueAnimator animator = ValueAnimator.ofInt(0, mWL);//设置移动范围为一个屏幕宽度
    animator.setDuration(1000);//设置持续时间为1秒
    animator.setRepeatCount(ValueAnimator.INFINITE);//设置为无限循环
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            int value = (int) animation.getAnimatedValue();
            mOffset = value;//修改偏移量
            postInvalidate();//刷新界面
        }
    });
    animator.start();
    ｝

第三步：让水位涨起来

先看效果图：

这里写图片描述

同理，这里也是通过 ValueAnimator 来不断增加 mWaveHeight 的值，但是这里指执行一次。那么添加了 mWaveHeight 的代码是这样的。

mPath.reset();//每次修改 mPath 的值，需要重置 mPath
 mPath.moveTo(mWL + mOffset, getHeight() - mWaveHeight);//因为 y 轴正方向是向下的，所以减去水波纹的高度
 mPath.lineTo(mWL + mOffset, getHeight());//绘制右边的线段
 mPath.lineTo(-mWL + mOffset, getHeight());//绘制底部的线段
 mPath.lineTo(-mWL + mOffset, getHeight() - mWaveHeight);//绘制左边的线段
mPath.quadTo((-mWL * 3 / 4) + mOffset, getHeight() - mWaveHeight + mFu, (-mWL / 2) + mOffset, getHeight() - mWaveHeight); 
//画出第一段波纹的第一条曲线
mPath.quadTo((-mWL / 4) + mOffset, getHeight() - mWaveHeight - mFu, 0 + mOffset, getHeight() - mWaveHeight); 
//画出第一段波纹的第二条曲线
mPath.quadTo((mWL / 4) + mOffset, getHeight() - mWaveHeight + mFu, (mWL / 2) + mOffset, getHeight() - mWaveHeight); 
//画出第二段波纹的第一条曲线
mPath.quadTo((mWL * 3 / 4) + mOffset, getHeight() - mWaveHeight - mFu, mWL + mOffset, getHeight() - mWaveHeight);  
//画出第二段波纹的第二条曲线
mPath.close();//封闭曲线
canvas.drawPath(mPath, mPaint);//绘制曲线

动态改变水波纹的高度：

if (!mMIsAnimatorPlaying) {//判断是否第一次开始 ValueAnimator
    mMIsAnimatorPlaying = true;
    ValueAnimator animator = ValueAnimator.ofInt(0, mWL);//设置移动范围为一个屏幕宽度
    animator.setDuration(1000);//设置持续时间为1秒
    animator.setRepeatCount(ValueAnimator.INFINITE);//设置为无限循环
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            int value = (int) animation.getAnimatedValue();
            mOffset = value;//修改偏移量
            postInvalidate();//刷新界面
        }
    });
    animator.start();
    ValueAnimator animatorHeight = ValueAnimator.ofInt(0, getHeight() + mFu);
    animatorHeight.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            mWaveHeight = (int) animation.getAnimatedValue();
            mText = String.valueOf((int) ((double) mWaveHeight / (double) (getHeight() + mFu) * 100)) + "%";//计算进度的百分比
            if (mWaveHeight == getHeight() + mFu) {//当水位高于屏幕高度，停止水波纹移动效果
                animation.cancel();
            }
            if (mWaveHeight > getHeight() / 2) {//当水位高于文字的时候，字体为白色，否则为浅蓝色
                mTextPaint.setColor(Color.WHITE);
            } else {
                mTextPaint.setColor(Color.parseColor("#5DCEC6"));
            }
            postInvalidate();
        }
    });
    animatorHeight.setDuration(10000);//持续10秒
    animatorHeight.start();
}
canvas.drawText(mText, getWidth() / 2 - mTextPaint.measureText(mText) / 2, getHeight() / 2, mTextPaint);

第四步：使用 PorterDuffXfermode 实现最终效果

最终的效果就是文章一开始时候效果。
使用特效画笔：

final int sc = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.qq3);//获取 bitmap 资源
canvas.drawBitmap(bitmap, getWidth() / 2 - bitmap.getWidth() / 2, getHeight() / 2 - bitmap.getHeight() / 2, null);//绘制 bitmap 
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));//设置特效画笔
mPaint.setColor(Color.parseColor("#5DCEC6"));

最终整合起来的代码是这样的：

public class WaterWave extends View {

    private int mWaveHeight;//水波纹高度
    private Paint mPaint;//绘制水波纹的画笔
    private Path mPath;//绘制水波纹的路径
    private int mWL;//屏幕宽度
    private String TAG = "zoneLog";//Log 日志的 Tag
    private int mFu;//水波纹的振幅
    private int mOffset;//水波纹移动的偏移值
    private boolean mMIsAnimatorPlaying;//用于判断是否第一次执行 ValueAnimator
    private Paint mTextPaint;//文字画笔
    private String mText;//进度值文字

    public WaterWave(Context context) {
        super(context);
        init();
    }

    public WaterWave(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public WaterWave(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public WaterWave(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    private void init() {
        mPaint = new Paint();//用于绘制波浪
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.parseColor("#5DCEC6"));
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mFu = 100;//波浪的振幅
        mTextPaint = new Paint();//用于绘制文字
        mTextPaint.setColor(Color.WHITE);
        mTextPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mTextPaint.setAntiAlias(true);
        mTextPaint.setTextSize(75);
        mOffset = 0;//水波纹移动的偏移值
        mWaveHeight = 0;//进度值，也是水波纹的高度
        mPath = new Path();//用于绘制波浪
    }

    @Override
    protected void onDraw(final Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.WHITE);
        mWL = getWidth();
        mPath.reset();
        final int sc = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.qq3);//获取 bitmap 资源
        canvas.drawBitmap(bitmap, getWidth() / 2 - bitmap.getWidth() / 2, getHeight() / 2 - bitmap.getHeight() / 2, null);//绘制 bitmap
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));//设置特效画笔
        mPaint.setColor(Color.parseColor("#5DCEC6"));

        mPath.moveTo(mWL + mOffset, getHeight() - mWaveHeight);//因为 y 轴正方向是向下的，所以减去水波纹的高度
        mPath.lineTo(mWL + mOffset, getHeight());//绘制右边的线段
        mPath.lineTo(-mWL + mOffset, getHeight());//绘制底部的线段
        mPath.lineTo(-mWL + mOffset, getHeight() - mWaveHeight);//绘制左边的线段

        mPath.quadTo((-mWL * 3 / 4) + mOffset, getHeight() - mWaveHeight + mFu, (-mWL / 2) + mOffset, getHeight() - mWaveHeight); //画出第一段波纹的第一条曲线
        mPath.quadTo((-mWL / 4) + mOffset, getHeight() - mWaveHeight - mFu, 0 + mOffset, getHeight() - mWaveHeight); //画出第一段波纹的第二条曲线
        mPath.quadTo((mWL / 4) + mOffset, getHeight() - mWaveHeight + mFu, (mWL / 2) + mOffset, getHeight() - mWaveHeight); //画出第二段波纹的第一条曲线
        mPath.quadTo((mWL * 3 / 4) + mOffset, getHeight() - mWaveHeight - mFu, mWL + mOffset, getHeight() - mWaveHeight);  //画出第二段波纹的第二条曲线
        mPath.close();//封闭曲线
        canvas.drawPath(mPath, mPaint);//绘制曲线
        if (!mMIsAnimatorPlaying) {//判断是否第一次开始 ValueAnimator
            mMIsAnimatorPlaying = true;
            ValueAnimator animator = ValueAnimator.ofInt(0, mWL);//设置移动范围为一个屏幕宽度
            animator.setDuration(1000);//设置持续时间为1秒
            animator.setRepeatCount(ValueAnimator.INFINITE);//设置为无限循环
            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    int value = (int) animation.getAnimatedValue();
                    mOffset = value;//修改偏移量
                    postInvalidate();//刷新界面
                }
            });
            animator.start();
            ValueAnimator animatorHeight = ValueAnimator.ofInt(0, getHeight() + mFu);
            animatorHeight.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    mWaveHeight = (int) animation.getAnimatedValue();
                    mText = String.valueOf((int) ((double) mWaveHeight / (double) (getHeight() + mFu) * 100)) + "%";//计算进度的百分比
                    if (mWaveHeight == getHeight() + mFu) {//当水位高于屏幕高度，停止水波纹移动效果
                        animation.cancel();
                    }
                    if (mWaveHeight > getHeight() / 2) {//当水位高于文字的时候，字体为白色，否则为浅蓝色
                        mTextPaint.setColor(Color.WHITE);
                    } else {
                        mTextPaint.setColor(Color.parseColor("#5DCEC6"));
                    }
                    postInvalidate();
                }
            });
            animatorHeight.setDuration(10000);//持续10秒
            animatorHeight.start();
        }
        canvas.drawText(mText, getWidth() / 2 - mTextPaint.measureText(mText) / 2, getHeight() / 2, mTextPaint);
        mPaint.setXfermode(null);
        canvas.restoreToCount(sc);// 还原画布
    }
}

使用到的图片资源：
这里写图片描述

好了，我们一步一步实现了最终效果，如果文中有什么知识点是错误的或者更好的实现方法，请及时联系我进行修改，以免误导别人。谢谢。

zone7_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
整理了一个 android 上的波形图及柱状图绘制控件
微风轻拂
01-13 7436
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
Android 自定义progressbar
行吟阁
07-01 714
android:width="0.75dp"                 android:color="#DDDDDD" >                                                  android:bottomLeftRadius="8dp"                 android:bottomRightRadius="8dp"
Android 自定义view实现水波纹效果
datou1209的博客
06-03 135
转自：http://blog.csdn.net/tianjian4592/article/details/44222565 今天主要分享水波纹效果： 1.标准正余弦水波纹； 2.非标准圆形液柱水波纹； 虽说都是水波纹，但两者在实现上差异是比较大的，一个通过正余弦函数模拟水波纹效果，另外一个会运用到图像的混合模式（PorterDuffXfermode）； 先看效果： ...
Android水波纹特效的简单实现
scott2017的博客
06-20 4475
转载地址http://www.jianshu.com/p/cba46422de67 水波纹特效，想必大家或多或少见过，在我的印象中，大致有如下几种： 支付宝 "咻咻咻" 式流量球 "荡漾" 式真实的水波纹效果，基于Bitmap处理式 今天我们主要讲一讲如何通过自定义View（以下简称WaveView）实现 "咻咻咻" 式的水波纹扩散效果，少废话，先看东西： 填充式水波纹
android水波进度条,Android--水波纹进度条
weixin_32307599的博客
05-30 601
/*** 水波纹进度条*/public class BezierProgressView extends View {private float progress;private float maxProgress;private int radius;private int circleColor;private int waveColor;private int textColor;priva...
通过贝塞尔曲线实现水波纹ProgressBar
一行Java的博客
07-22 1385
时间原因，后续再细说原理（暂作为笔记），直接上图贴源码。效果图： 源码 import android.animation.ValueAnimator; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint
Android自定义View实现水波纹效果
AbnormalExit的博客
05-24 760
Android自定义View实现水波纹效果Android自定义View实现水波纹效果效果图 实现思路 具体实现 总结 效果图实现思路根据效果分析，首先利用Path的 rQuadTo(float dx1, float dy1, float dx2, float dy2)先画出静止的波纹，然后添加一个属性动画，利用动画改变path相应的坐标，实现波纹的移动。path相关类容具体实现 画出静止的贝塞尔曲线
Android自定义View,实现Progress(水波纹动画)
05-09
总之，创建一个自定义的水波纹进度View，涉及到Android图形绘制、动画机制、自定义View的生命周期等多个知识点。通过这个实践，开发者不仅可以提升UI设计能力，还能对Android系统有更深入的理解。
Android自定义View实现水面上涨效果
09-01
本文将探讨如何利用Android自定义View实现一个水面上涨效果，这个效果通常用于进度条或者加载动画，能够给用户带来生动且有趣的交互体验。 首先，我们需要定义自定义View的相关属性。在XML布局文件中，我们可以通过...
android 自定义View动画全集
09-01
圆形水波纹进度条是自定义View的经典案例，它通常基于ProgressBar扩展，利用Path和Paint绘制出圆环和水波纹效果。通过动态调整Path的大小和形状，可以模拟水波纹的扩散，同时结合Progress值来显示实际的进度。 最后...
Android仿水波纹流量球进度条控制器
09-02
主要介绍了Android仿水波纹流量球进度条控制器的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android兼容5.0水波动画的代码例子
08-30
Android兼容5.0水波动画的代码例子。用于演示4.*及以下版本兼容5.0以上点击水波动画的功能，提供了三种实现方式，分别是RevealLayout水波、RippleView水波、MaterialRippleLayout水波。
Android水波纹
02-15
在Android开发中，"水波纹"通常是指一种动态效果，它模拟了水面...同时，通过查看源码，可以学习到Android自定义View的开发技巧，以及如何利用图形和动画API来创建动态效果，这对于深化Android开发技能是十分有帮助的。
Android 圆形水波源码
11-23
"Android圆形水波源码"是一个专门用于创建具有水波效果的自定义进度条控件。这个控件能够以圆弧的形式展示进度，并且水波的高度可以根据进度值的大小动态调整，为用户界面带来生动且富有动态感的视觉效果。 首先，...
android数据球图,Android 绘制水波纹小球球
weixin_34986860的博客
05-29 179
1615521127828.gifpublic class BezierCurvePercentView extends View {//外圈private Paint paintOutside;private int paintOutsideColor = Color.parseColor("#FD6F5C");//背景色private Paint paintBg;private int pai...
手把手教你画一个 逼格满满圆形水波纹loadingview Android
weixin_30781107的博客
01-18 592
才没有完结呢o(￣︶￣)n 。大家好，这里是番外篇。拜读了爱哥的博客，又学到不少东西。爱哥曾经说过： 要站在巨人的丁丁上。 那么今天，我们就站在爱哥的丁丁上来学习制作一款自定义view（开个玩笑，爱哥看到别打我）。上一篇 带领大家做了一款炫酷的loading动画view手把手带你做一个超炫酷loading成功动画view 不知道大家跟着做了一遍没有呢？在开始之前，首先来说说预备知识，这些知...
Android——实现渐变色水波纹效果源码
化身孤岛的瓜
02-22 3129
项目中使用到的效果，效果图如下： 代码实现： public class WaveView extends View { private Paint mPaint, mCriclePaint, mTextPaint; // 倾斜或旋转、快速变化,当在屏幕上画一条直线时, 横竖不会出现锯齿, // 但是当斜着画时, 就会出现锯齿的效果,所以需要设置抗锯齿 p
Android 水波纹效果快速实现
BirdEatBug的博客
11-23 2058
水波纹效果从Android5.0就已经出来了，基本的使用相信大家都知道了、就不再叙述了！以下记录两个常用的水波纹效果； 有界水波纹（系统自带） android:background="?android:attr/selectableItemBackground" 无界水波纹 一般解释：以控件宽高中最大的数值作为水波纹效果所在正方形的边界进行绘制、其实和上面的没多大区别； android:background="?android:attr/selectableItemBackgroundBord
android 自定义view progressBar
最新发布
03-20
Android自定义ProgressBar可以通过继承View或者ViewGroup来实现。下面是一种常见的自定义ProgressBar的实现方式： 1. 创建一个新的Java类，继承自View或者ViewGroup，例如CustomProgressBar。 2. 在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值