手把手教你画一个 逼格满满圆形水波纹loadingview Android

才没有完结呢o(￣︶￣)n 。大家好，这里是番外篇。

拜读了爱哥的博客，又学到不少东西。爱哥曾经说过： 要站在巨人的丁丁上。 那么今天，我们就站在爱哥的丁丁上来学习制作一款自定义view（开个玩笑，爱哥看到别打我）。



上一篇 带领大家做了一款炫酷的loading动画view 手把手带你做一个超炫酷loading成功动画view  不知道大家跟着做了一遍没有呢？


在开始之前，首先来说说预备知识，这些知识在爱哥的博客上都有详细的介绍：点我进入爱哥自定义view系列

效果图如下：  应用场景很多。。比如。。。内存占用百分比之类的


本项目地址：点击打开链接   


预备的知识有：

1.贝塞尔曲线    如果你不了解，可以来这里进行基础知识储备：神奇的贝塞尔曲线 

2.Paint.setXfermode()  以及PorterDuffXfermode


千万不要被这个b的名字吓到，不熟悉看到可能会认为很难记，其实 只要站在巨人的丁丁上 还是很简单的。

好了 废话不多说 ，跟我一步步来做一个炫酷的view吧。


首先给一些属性，在构造器里初始化（不要再ondraw new东西不要再ondraw new东西不要再ondraw new东西不要再ondraw new东西）

    //绘制波纹private Paint mWavePaint;private PorterDuffXfermode mMode = new PorterDuffXfermode(PorterDuff.Mode.XOR);//设置mode 为XOR//绘制圆private Paint mCirclePaint;private Canvas mCanvas;//我们自己的画布private Bitmap mBitmap;private int mWidth;private int mHeight;public WaveLoadingView(Context context) {this(context,null);}public WaveLoadingView(Context context, AttributeSet attrs) {this(context, attrs,0);}public WaveLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);mWavePaint = new Paint();mWavePaint.setColor(Color.parseColor("#33b5e5"));mCirclePaint = new Paint();mCirclePaint.setColor(Color.parseColor("#99cc00"));}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int widthSize = MeasureSpec.getSize(widthMeasureSpec);int widthMode = MeasureSpec.getMode(widthMeasureSpec);int heightSize = MeasureSpec.getSize(heightMeasureSpec);int heightMode = MeasureSpec.getMode(heightMeasureSpec);if (widthMode == MeasureSpec.EXACTLY) {mWidth = widthSize;}if (heightMode == MeasureSpec.EXACTLY) {mHeight = heightSize;}setMeasuredDimension(mWidth, mHeight);mBitmap = Bitmap.createBitmap(300,300, Bitmap.Config.ARGB_8888); //生成一个bitmapmCanvas = new Canvas(mBitmap);//讲bitmp放在我们自己的画布上，实际上mCanvas.draw的时候 改变的是这个bitmap对象}

然后，我们给他绘制一点东西，用来介绍PorterDuffXfermode 

@Overrideprotected void onDraw(Canvas canvas) {mCanvas.drawCircle(100,100,50,mCirclePaint);mCanvas.drawRect(100,100,200,200,mWavePaint);canvas.drawBitmap(mBitmap,0,0,null);super.onDraw(canvas);}

嗯，可以看到 是我们现在自己的画布上铺了一个bitmap(这里可以理解canvas为桌子  bitmap为画纸，我们在bimap上画画)， 然后在bitmap上画了 一个圆，和一个矩形。最后把我们的mBitmap画到系统的画布上(显示到屏幕上)，得到了以下效果。


然后我们用setXfermode()方法给他设置一个mode，这里设置XOR。


可以发现！ 相交的地方消失了！ 是不是很神奇。

在改一个mode 试试

    private PorterDuffXfermode mMode = new PorterDuffXfermode(PorterDuff.Mode.DST_OVER);


可以看到 圆形跑到了矩形上面来。  然后巨人给我们总结各个模式如了下图，这里给一个说明dst为先画的 src为后画的：.


大家可以根据这个规律试一下。


现在，我们把圆和矩形重叠。模式去掉。

 protected void onDraw(Canvas canvas) {//dstmCanvas.drawCircle(150,150,50,mCirclePaint);//        mWavePaint.setXfermode(mMode);//srcmCanvas.drawRect(100,100,200,200,mWavePaint);canvas.drawBitmap(mBitmap,0,0,null);super.onDraw(canvas);}

运行是这样的。


日了狗了！！我的圆怎么没了。。  其实圆是被覆盖掉了。 然后我们想实现一个效果，就是在圆的范围内，显示矩形的内容，该怎么做呢。自己照着图找找吧哈哈。


--------------------------------------------回归正题------------------------------------

我们要实现的是一个圆形的水波纹那种loadingview。。首要就是实现这个水波纹。

这时候贝塞尔曲线就派上用场了。这里采用三阶贝塞尔， 不停地改变X 模拟水波效果。

 if (x > 50) {isLeft = true;} else if (x < 0) {isLeft = false;}
<span style="white-space:pre">		</span>if (y > -50) {  //大于-50是因为辅助点是50  为了让他充满整个屏幕y--;}        if (isLeft) {x = x - 1;} else {x = x + 1;}mPath.reset();mPath.moveTo(0,  y);mPath.cubicTo(100 + x*2, 50 + y, 100 + x*2, y-50, mWidth, y);//前两个参数是辅助点mPath.lineTo(mWidth, mHeight);//充满整个画布mPath.lineTo(0, mHeight);//充满整个画布mPath.close();

之后用mCanvas来绘制这个bitmap，要注意的是 绘制之前要清空mBitmap，不然path会重叠 

        mBitmap.eraseColor(Color.parseColor("#00000000"));//dstmCanvas.drawPath(mPath, mPaint);


 canvas.drawBitmap(mBitmap, 0, 0, null);postInvalidateDelayed(10);
在最上面动态改变Y  通知重绘，现在的效果是这样的


 哈，水波效果出来了。   接着想办法让他画到一个圆形中。 首先绘制一个圆

 mCanvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2, mSRCPaint);


额。。有点海上日出的感觉（看太阳都是绿色！）

现在让我们回到刚才的问题，如何在dst的范围内绘制src呢。。。答案是。。SRC_IN 你找对了吗。添加模式

  //dstmCanvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2, mSRCPaint);mPaint.setXfermode(mMode);//srcmCanvas.drawPath(mPath, mPaint);canvas.drawBitmap(mBitmap, 0, 0, null);

运行 效果如下：


咦 哈哈哈，是不是有点感觉了。如果不这样做 就需要考虑好多问题。动态计算沿着圆弧x，y坐标  计算arcTo的范围（我已经算出来了。。有兴趣的可以提。。没兴趣的话我就不写了。。）


完善一下，添加一个percent来代表进度，让y来根据percent动态改变

 y = (int) ((1-mPercent /100f) *mHeight);


添加setPercent方法 

public void setPercent(int percent){mPercent = percent;}


画上百分比的文字。 

 String str = mPercent + "%";float txtLength = mTextPaint.measureText(str);canvas.drawText(mPercent + "%", mWidth / 2-txtLength/2, mHeight / 2, mTextPaint);

然后配合seekBar。 效果如下：





最后改改字体大小  画笔透明度。 添加个背景图 就成了效果图上的效果。


如果你觉得本博客还可以，那么求关注，点个顶，评个论咯。。以后还会有更多的文章等着你~


本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/45534.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

图像处理水波纹效果

图像处理水波纹效果

总结起来就是将水波圆周从0-R逐渐扩大并逐帧显示。在扩大的同时赋予该像素点波动函数和能量递减的变换。颜色就是对像素点四个方向取整&#xff08;色彩邻域&#xff09;&#xff0c;取权值相乘&#xff0c;最后赋予回给该点。 可以随机自动选择涟漪生成点的圆心&#xff0c;涟…
阅读更多...
css实现水波纹

css实现水波纹

携手创作&#xff0c;共同成长&#xff01;这是我参与「掘金日新计划 8 月更文挑战」的第23天&#xff0c;点击查看活动详情 ui设计的元素有时候需要有一些动画效果&#xff0c;可以直接用css动画来实现。 实现一个中心圆向四周有水波纹的效果 利用定位添加多个圆&#xff0…
阅读更多...
Android 按钮实现按压水波纹效果

Android 按钮实现按压水波纹效果

博主前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住也分享一下给大家&#xff0c; &#x1f449;点击跳转到网站 方法一&#xff1a; 在控件中加入android:foreground"?selectableItemBackground" 即可实现水…
阅读更多...
Android 水波纹效果

Android 水波纹效果

今天翻看博客&#xff0c;发现了水波纹效果。顺便研究了一下 一&#xff0c;Touch Feedback&#xff08;触摸反馈&#xff09; 1&#xff0c;原始自带效果 代码&#xff1a; <Buttonandroid:layout_width"wrap_content"android:layout_height"100dp"an…
阅读更多...
Echarts之球形水波纹

Echarts之球形水波纹

球形水波纹是比较与饼图展现方式 更灵动 更高级的一种 echarts-liquidfill 水球图插件官网: https://www.npmjs.com/package/echarts-liquidfill 1.展示图&#xff1a;【左侧即为水波图&#xff0c;右侧是想要展示的信息列】 2.实现过程 ①、 需要下载echarts及liquidfill 插…
阅读更多...
Android实现水波纹外扩效果

Android实现水波纹外扩效果

微信曾经推出了一个查找附近好友的功能&#xff0c;大致功能是这样的&#xff1a;屏幕上有一个按钮&#xff0c;长按按钮的时候&#xff0c;会有一圈圈水波纹的动画向外扩散&#xff0c;松手后&#xff0c;动画结束。 现在简单来实现这样的一个动画功能&#xff1a; 思路: 主…
阅读更多...
Android 实现水波纹效果

Android 实现水波纹效果

效果图 attrs.xml 自定义属性 <declare-styleable name"RippleAnimationView"><attr name"ripple_anim_color" format"color" /><!-- 水波纹填充类型 --><attr name"ripple_anim_type" format"enum&q…
阅读更多...
Android案例手册 - 定位点圆形水波纹和椭圆水波纹

Android案例手册 - 定位点圆形水波纹和椭圆水波纹

往期文章分享 点击跳转>《导航贴》- Unity手册&#xff0c;系统实战学习点击跳转>《导航贴》- Android手册&#xff0c;重温移动开发 本文约18千字&#xff0c;新手阅读需要18分钟&#xff0c;复习需要6分钟 【收藏随时查阅不再迷路】 &#x1f449;关于作者 众所周知&am…
阅读更多...
聊聊Android5.0中的水波纹效果

聊聊Android5.0中的水波纹效果

水波纹效果已经不是什么稀罕的东西了&#xff0c;用过5.0新控件的小伙伴都知道这个效果&#xff0c;可是如果使用一个TextView或者Button或者其它普通控件的话&#xff0c;你是否知道如何给它设置水波纹效果呢&#xff1f;OK&#xff0c;我们今天就来看看这个水波纹效果的实现。…
阅读更多...
Android开发中的水波纹效果实现

Android开发中的水波纹效果实现

编写不易&#xff0c;如有转载&#xff0c;请声明出处&#xff1a;http://blog.csdn.net/zxc514257857/article/details/73200900 前言 android中的水波纹效果是5.0以后即API Level 21以后出现的&#xff0c;因此minSdkVersion必须设置在21及以上才可以使用此效果 Demo效果展示…
阅读更多...
Android点击水波纹扩散效果整理（附带一个自定义的水波纹效果控件）

Android点击水波纹扩散效果整理（附带一个自定义的水波纹效果控件）

很久很久没有写博客了&#xff0c;说来也有点惭愧。正好最近整理自己的项目工程目录&#xff0c;看到一些值得分享的控件&#xff0c;准备在之后的几篇博客中准备把它们陆续搬运上来。 这篇博客准备整理一下Android Material Design自带的点击水波纹扩散的效果。话不多说&#…
阅读更多...
android 按钮水波纹效果【背景色】

android 按钮水波纹效果【背景色】

两种方式实现&#xff1a; 第一种&#xff1a;Material自带水波纹 通过如下代码设置波纹的背景&#xff1a; android:background"?android:attr/selectableItemBackground"波纹有边界【一般这种好看点&#xff0c;大多数也都是这种】 android:foreground"?…
阅读更多...
Android 水波纹扩散效果

Android 水波纹扩散效果

项目地址下载&#xff1a;https://github.com/LiuJunb/RippleImageView 1.效果图&#xff1a; 2.使用方法&#xff1a; 在xml里使用RippleImageView自定义控件&#xff1a; xmlns:app"http://schemas.android.com/apk/res-auto"<com.army.rippleimage.RippleIma…
阅读更多...
Android 自定义view实现水波纹效果

Android 自定义view实现水波纹效果

http://blog.csdn.net/tianjian4592/article/details/44222565 在实际的开发中&#xff0c;很多时候还会遇到相对比较复杂的需求&#xff0c;比如产品妹纸或UI妹纸在哪看了个让人兴奋的效果&#xff0c;兴致高昂的来找你&#xff0c;看了之后目的很明确&#xff0c;当然就是希望…
阅读更多...
Android点击Button水波纹效果

Android点击Button水波纹效果

先上图&#xff0c;看看接下来我要向大家介绍的是个什么东西&#xff0c;如下图&#xff1a; 接下来要介绍的就是如何实现上述图中的波纹效果&#xff0c;这种效果如果大家没有体验过的话&#xff0c;可以看看百度手机卫士或者360手机卫士&#xff0c;里面的按钮点击效果都是…
阅读更多...
unity 实现水的波纹效果

unity 实现水的波纹效果

之前的实现过这个效果&#xff0c;可惜没有记笔记&#xff0c;所以现在有点遗忘&#xff0c;连多个波纹一起在水面上实现的效果都忘记了&#xff0c;所以&#xff0c;查看了下之前实现的代码&#xff0c;现在再记一下笔记。 基础的波纹效果 要实现波纹&#xff0c;首先要知道…
阅读更多...
Android水波纹效果

Android水波纹效果

日常的Android开发中可能大家都见过类似这种水波纹展开的效果&#xff0c;比如加载一张图片的时候使用水波纹加载&#xff0c;其实这种实现非常简单。因为Google已经为我们提供了一个非常方便地工具类 ViewAnimationUtils 它的实现非常简单&#xff0c;就这个类&#xff0c;其…
阅读更多...
自定义view实现水波纹效果

自定义view实现水波纹效果

我正在参加 CSDN 2015博客之星评选 感恩分享活动&#xff0c;如果觉得文章还不错&#xff0c;请投个票鼓励下吧&#xff1a;http://vote.blog.csdn.net/blogstar2015/candidate?usernametianjian4592 在实际的开发中&#xff0c;很多时候还会遇到相对比较复杂的需求&#xf…
阅读更多...
Android L中水波纹点击效果的实现

Android L中水波纹点击效果的实现

博主参加了2014 CSDN博客之星评选&#xff0c;帮我投一票吧。 点击给我投票 前言 前段时间android L&#xff08;android 5.0&#xff09;出来了&#xff0c;界面上做了一些改动&#xff0c;主要是添加了若干动画和一些新的控件&#xff0c;相信大家对view的点击效果-水波纹很…
阅读更多...
科技云报道：垂直大模型竞争，能突破数据“卡点”吗？

科技云报道：垂直大模型竞争，能突破数据“卡点”吗？

科技云报道原创。 AI大模型火遍全球&#xff0c;中国产业也激发了对人工智能应用的新热情。 随着各大厂商参与竞逐&#xff0c;市场正在分化为通用与垂直两大路径&#xff0c;两者在参数级别、应用场景、商业模式等方面差异已逐步显现。 企业涌入垂直大模型赛道 通用AI大模型…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023