Android自定义view利用Xfermode实现动态文字加载动画

对于Xfermode 可能很多人看了一些就放弃了,今天我就个人理解,举简单的我们生活中的例子,让大家更容易理解这是个什么东西。其实并不是你们想象的那么难,你只要懂三步就够了。先来看一看这次的效果图,这个gif大家凑合看。

不要把Xfermode 想的这么难,我把Xfermode 理解成中学时 学的“集合” ,我们知道“集合”是处理 数据的。例如:
集合 A={1,2,3,4},集合B={3,4,5,6}。这两个集合 有三个属性,交集,并集,补集。
那么 Xfermode 我个人理解就是图形集合,就是图形A,图形B 之间可以取,交集,并集,补集。当然这个 A和 B 之间取那种类型,形成什么样的 效果,其实就是我们选取的 Xformode 的 属性类型。
这个就引出了我们今天 的 第一步,虽然是三步,但是前提是你要对自定义view 有一定的了解比如你要知道 ondraw(),onmesure(),Paint 画笔,canvars画布这些内容你要了解,对自定义不是很清楚的朋友可以去 看我的同类文章,文章从入门一步一步带大家进入自定义view:

第一步:我们要熟悉一下这个图

16个图形结果,其实现在有18中。这个图 我们也不用记,只要在用的时候选择对应得 我们的目标图形就行了。具体怎么使用 我们要引出我们今天主要的类 PorterDuffXfermode 这个类就是我们的Xformode 的类了,他还有另外被废弃的两兄弟,被废弃了就不谈了。既然是各类我们要使用就要创建对象,如下:

PorterDuffXfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);

这里就是我们的 对象,在这里他的构造参数中就是我们上图 选择的类型,最终图形是两个图形的交集部分。当然你可以根据你的目标图形 的效果自己选择,两个图片的混排类型。
这就是 第一步,我们只要了解一下图片的意义,和 PorterDuffXfermode 这个类的用法就够了。我这里提到的 所有图不只是图片,还有我们绘制出来的 圆,矩形等绘制的图。

第二步:

我们了解了 图形 混排的模式,所以第二步我们要有两个图,不然怎么混排,从图中我们可以看出这两个图,分别是 Src ,Dst。接下来我会介绍这两个名字对应我们手机上那个图形。因为我们要画图所以 我们就要来到 ondraw()方法了,这个方法有个类叫canvas 图层,所以这就到了我们第二步的关键点:那就是设置图层,调用方法

canvas.saveLayer( left, top, right, bottom, paint, saveFlags)

首先前四个方法比较简单,就是我们要设置这个图层 的大小,第5个方法就是我们的 画笔,第6个方法我们使用:Canvas.ALL_SAVE_FLAG  ,这是一个 flag。

注意:我们在绘制图形之前必须调用上面的方法,不然没有效果。

下面是这个绘制的先后顺序:

/** * 设置图层 */ int layer = canvas.saveLayer(0,0,w,h,paint,Canvas.ALL_SAVE_FLAG); //绘制背景图片 canvas.drawBitmap(bitmap,0,0,paint); //设置 xformode 模式 paint.setXfermode(xfermode); //绘制矩形 paint.setColor(Color.RED); RectF rectF = new RectF(0,y,bitmap.getWidth(),bitmap.getHeight()); canvas.drawRect(rectF,paint); //最后设置为空 paint.setXfermode(null); canvas.restoreToCount(layer);

第三步:

第三步我们还是围绕着上边的代码讲,因为就这几行代码,因为很简单。设置好图层之后,就要绘制图形了,我们这里用canvas绘制了一个 bitmap 图片。大家注意了我们此时 用的 paint 只是普通的 画笔,到这个时候我们的 PorterDuffXfermode 模式还没有使用呢!
再往下看 我们的画笔调用了:

paint.setXfermode(xfermode);

这个方法,所以 如果我们再绘制图形的画,再用到的 画笔 就和我们之前 绘制的图形 不一样了。这个方法可以说是一个分界点,在这个方法之前绘制的图形 和 之后绘制的图形 就分别对应了 我们 图中 Src 和 Dst 的图。这就决定我们最终的目标图形是什么样的。

最后就是 把画笔 的 xformode 模式设置为空。再调用 canvas 的这个方法

canvas.restoreToCount(layer);

我们的绘制就结束了。我这里使用动画动态的改变了 矩形 的高度。我把这个 图片 贴给大家,图片还是盗 别人的。哈哈。

大家可以下载使用。

把代码也贴出来,大家参考。以上 都是我个人的理解 ,包括给大家举的例子,如果有不妥之处请指出,谢谢。

public class XformodeView extends View { Paint paint ; //屏幕宽高 int w; int h; //定义一个矩形的高度变化 float y; //xformode 的 类型 选择 PorterDuffXfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN); //图片 Bitmap bitmap; public XformodeView(Context context) { this(context,null); } public XformodeView(Context context, @Nullable AttributeSet attrs) { this(context,attrs,0); } public XformodeView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); //画笔 paint = new Paint(); paint.setAntiAlias(true); paint.setDither(true); init(context); } /** * 初始化 * @param context */ public void init(Context context){ //获得屏幕宽高 WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE); w = wm.getDefaultDisplay().getWidth(); h = wm.getDefaultDisplay().getHeight(); //加载bitmap 图片 bitmap = BitmapFactory.decodeResource(context.getResources(), R.mipmap.xxx); //开始动画 animator(); } /** * 测量view */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); setMeasuredDimension(bitmap.getWidth(),bitmap.getHeight()); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); /** * 绘制 图片 剪切 画布 控制图片显示 */ // Path path = new Path(); // path.moveTo(0,y); // // path.lineTo(bitmap.getWidth(),y); // path.lineTo(bitmap.getWidth(),bitmap.getHeight()); // path.lineTo(0,bitmap.getHeight()); // canvas.clipPath(path); /** * 设置图层 */ int layer = canvas.saveLayer(0,0,w,h,paint,Canvas.ALL_SAVE_FLAG); //绘制背景图片 canvas.drawBitmap(bitmap,0,0,paint); //设置 xformode 模式 paint.setXfermode(xfermode); //绘制矩形 paint.setColor(Color.RED); RectF rectF = new RectF(0,y,bitmap.getWidth(),bitmap.getHeight()); canvas.drawRect(rectF,paint); //最后设置为空 paint.setXfermode(null); canvas.restoreToCount(layer); } /** * 动画 */ public void animator(){ ValueAnimator animator = ValueAnimator.ofFloat(bitmap.getHeight(),0); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { y = (float) animation.getAnimatedValue(); invalidate(); } }); animator.setDuration(3000); animator.start(); } }

你也可以做一些 复杂的 效果 比如 你不用矩形,你可以用 波浪 的效果 让他 充满。发挥想象力去做吧。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

时间: 2024-10-26 13:46:30

Android自定义view利用Xfermode实现动态文字加载动画的相关文章

Android自定义View之仿vivo i管家病毒扫描动画效果

技术是永无止境的,如果真的爱技术,那就勇敢的坚持下去.我很喜欢这句话,当我在遇到问题的时候.当我觉得代码枯燥的时候,我就会问自己,到底是不是真的热爱技术,这个时候,我心里总是起着波澜,我的答案是肯定的,我深深的爱着这门技术. 今天我们继续聊聊Android的自定义View系列.先看看效果吧: 这个是我手机杀毒软件的一个动画效果,类似于雷达搜索,所以用途还是很广泛的,特别是先了解一下这里的具体逻辑和写法,对技术的进步一定很有用. 先简单的分析一下这里的元素,主要有四个圆.一个扇形.还有八条虚线.当

Android自定义view Path 的高级用法之搜索按钮动画

关于Path之前写的也很多了,例如path绘制线,path绘制一阶,二阶和三阶贝塞尔路径,这些都是path的基本用法.今天我要带大家看的是Path 的高级用法,先上图,再吹. 效果大致是这样的.看着是不是挺好.话不多说,切入正题: 既然今天要谈Path的高级用法,那就先来讲一讲(Path -- 中文 )就是"路径"既然是路径,从我们面向对象的想法的话,我们就容易想到 路径 的长度,路径的某一点等.想到这里我们就引出今天 的主要 类--------PathMeasure,字面意思很容易理

Android自定义View 画弧形,文字,并增加动画效果

一个简单的Android自定义View的demo,画弧形,文字,开启一个多线程更新ui界面,在子线程更新ui是不允许的,但是View提供了方法,让我们来了解下吧. 1.封装一个抽象的View类   BaseView.java /**    * 封装基本View   * @author ansen    * @create time 2015-08-07    */     public abstract class  BaseView extends View{         private 

Android自定义View之圆形进度条总结

最近撸了一个圆形进度条的开源项目,算是第一次完完整整的使用自定义 View .在此对项目开发思路做个小结,欢迎大家 Star 和 Fork. 该项目总共实现了三种圆形进度条效果 CircleProgress:圆形进度条,可以实现仿 QQ 健康计步器的效果,支持配置进度条背景色.宽度.起始角度,支持进度条渐变 DialProgress:类似 CircleProgress,但是支持刻度 WaveProgress:实现了水波纹效果的圆形进度条,不支持渐变和起始角度配置,如需此功能可参考 CircleP

Android自定义View实现水面上涨效果_Android

实现效果如下: 实现思路: 1.如何实现圆中水面上涨效果:利用Paint的setXfermode属性为PorterDuff.Mode.SRC_IN画出进度所在的矩形与圆的交集实现 2.如何水波纹效果:利用贝塞尔曲线,动态改变波峰值,实现"随着进度的增加,水波纹逐渐变小的效果" 话不多说,看代码. 首先是自定义属性值,有哪些可自定义属性值呢? 圆的背景颜色:circle_color,进度的颜色:progress_color,进度显示文字的颜色:text_color,进度文字的大小:tex

Android 自定义View步骤_Android

例子如下:Android 自定义View 密码框 例子 1 良好的自定义View 易用,标准,开放. 一个设计良好的自定义view和其他设计良好的类很像.封装了某个具有易用性接口的功能组合,这些功能能够有效地使用CPU和内存,并且十分开放的.但是,除了开始一个设计良好的类之外,一个自定义view应该: l 符合安卓标准 l 提供能够在Android XML布局中工作的自定义样式属性 l 发送可访问的事件 l 与多个Android平台兼容. Android框架提供了一套基本的类和XML标签来帮您创

Android自定义View过程解析_Android

Android自定义的view,主要是继承view,然后实现ondraw这个方法,来进行绘制. 1. 编写自己的自定义view 2. 加入逻辑线程 3. 提取和封装自定义view 4. 利用xml中定义样式来影响显示效果 一.编写自定义的view1.在xml中使用自己的view <!-- 可以使用view的公共属性,例如背景 --> <com.niuli.view.MyView android:layout_width="match_parent" android:l

Android自定义view制作绚丽的验证码_Android

废话不多说了,先给大家展示下自定义view效果图,如果大家觉得还不错的话,请继续往下阅读. 怎么样,这种验证码是不是很常见呢,下面我们就自己动手实现这种效果,自己动手,丰衣足食,哈哈~ 一. 自定义view的步骤 自定义view一直被认为android进阶通向高手的必经之路,其实自定义view好简单,自定义view真正难的是如何绘制出高难度的图形,这需要有好的数学功底(后悔没有好好学数学了~),因为绘制图形经常要计算坐标点及类似的几何变换等等.自定义view通常只需要以下几个步骤: 写一个类继承

Android自定义view制作绚丽的验证码

废话不多说了,先给大家展示下自定义view效果图,如果大家觉得还不错的话,请继续往下阅读. 怎么样,这种验证码是不是很常见呢,下面我们就自己动手实现这种效果,自己动手,丰衣足食,哈哈~ 一. 自定义view的步骤 自定义view一直被认为android进阶通向高手的必经之路,其实自定义view好简单,自定义view真正难的是如何绘制出高难度的图形,这需要有好的数学功底(后悔没有好好学数学了~),因为绘制图形经常要计算坐标点及类似的几何变换等等.自定义view通常只需要以下几个步骤: 写一个类继承