android 水波纹进度,Android自定义View-水波纹progressbar
首先来看一看效果图：CSDN博客地址
process
先简要说一下这里需要涉及到的知识点：
path贝塞尔二阶曲线
ValueAnimator
PorterDuffXfermode
参考的文章：
绘制思路：
绘制两段二阶贝塞尔曲线围成的波浪封闭图形，一段波浪的长度为屏幕宽度。
水平移动绘制好的图形，形成波浪滚动的效果，并不断循环。
不断增加绘制图形的高度，形成水位上升的效果。
通过 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);// 还原画布
}
}
使用到的图片资源：
QQ图片资源
好了，我们一步一步实现了最终效果，如果文中有什么知识点是错误的或者更好的实现方法，请及时联系我进行修改，以免误导别人。谢谢。
android 水波纹进度,Android自定义View-水波纹progressbar相关推荐
- android波纹效果弹窗,Android自定义View实现波纹效果
Android自定义View实现波纹效果 时间:2017-05-27 来源:移动互联网学院 1.引言:随着Android智能手机的普及,Android应用得到了大力支持,而Android应用的 ...
- Android中实现Bitmap在自定义View中的放大与拖动
一基本实现思路: 基于View类实现自定义View –MyImageView类.在使用View的Activity类中完成OnTouchListener接口,实现对MotionEvent事件的监听与处理 ...
- Android软件开发之盘点自定义View界面大合集（二）
Android软件开发之盘点自定义View界面大合集(二) - 雨松MOMO的程序世界 - 51CTO技术博客 雨松MOMO带大家盘点Android 中的自定义View界面的绘制 今天我用自己写的一个 ...
- Android 雪花飘落动画效果 自定义View
在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不 ...
- Carson带你学Android：源码解析自定义View Draw过程
前言 自定义View是Android开发者必须了解的基础 网上有大量关于自定义View原理的文章,但存在一些问题:内容不全.思路不清晰.无源码分析.简单问题复杂化 等 今天,我将全面总结自定义View ...
- android 仿360浮动,Android仿360悬浮小球自定义view实现示例
Android仿360悬浮小球自定义view实现示例 效果图如下: 实现当前这种类似的效果 和360小球 悬浮桌面差不错类似.这种效果是如何实现的呢.废话不多说 ,直接上代码. 1.新建工程,添加悬浮 ...
- Android仿IOS滑动关机-自定义view系列（6）
Android仿IOS滑动关机-自定义view系列 功能简介 GIf演示 主要实现步骤-具体内容看github项目里的代码 Android技术生活交流 更多其他页面-自定义View-实用功能合集:点击 ...
- android 自定义view 水波纹进度球
如果你是老司机,一看标题就会就return吧,嘻嘻. 在我们的日常开发中自定义控件还是用的挺多的,设计师或者产品为了更好的漂亮,美观,交互都会做一些牛逼的ui效果图,但是最后实现的还是我们程序员啊. ...
- android 水波纹扩散动画,[Android]多层波纹扩散动画——自定义View绘制
之前整理过一些属性动画的基本操作,这一段时间的动画相关需求都安然度过了.直到这次-- 一.另一种动画需求 多数交互中的动画都是让单个页面元素动起来,这种就很适合用属性动画实现.但是对于 多个元素.非页 ...
- android录音波浪动画_Android 自定义 view 实现波浪动画进度条
最近在做项目时需要实现这样一种动画,类似于波浪形的进度动画,粗略的看了一下,发现好像类似于正余弦曲线实现的,但是Android 没有相关的API,所以需要我们动手画出来,所以现在在此记录一下学习过程, ...
最新文章
- oracle 被另一用户锁定,Oracle报错记录被另外一个用户锁定的解决方案
- Java 反射将配置文件数据加载到对象属性中
- 【深度学习】图像去噪：一种基于流的图像去噪神经网络
- sql中contains,like,patindex ,charindex和freetext语句的区别？
- 1113：不与最大数相同的数字之和
- Android版CCLabelTTF在setstring时出现黑块
- 使用闭包的方式实现一个累加函数 addNum
- 【英语学习】【English L06】U06 Banking L5 I'd like to change Chinese *yuan* into pounds
- Atitit.web三大编程模型 Web Page Web Forms 和 MVC
- 如何简单运行Java程序
- 本地组策略编辑器计算机配置,如何打开本地组策略编辑器_打开组策略编辑器方法-win7之家...
- ESP32-CAM 安信可
- win7开机加速怎么设置|win7开机加速的方法
- 苹果，忘了发家的根本…
- 用计算机绘制函数图像数学大师,用Excel来绘制数学中的函数图像
- 安卓模拟器端口大全 - 夜神逍遥MuMu雷电蓝叠海马玩
- Setup.txt如何修改？ Setup.txt的详细介绍
- 用 C++ 和 Java 写算法，差别大吗?
- flex布局实现无缝滚动
- 汉客儿2019支付宝加密红包设计思路