自定义View之会动的闪电

前两天在csdn手机端上看到貌似是有个app具有这个闪电的loading标志，非常感兴趣，正好目前正在学习自定义view，所以就想自己来实现一下，还好自己完成了，不是很难~
效果图：

由于是手机上截的图，所以没有弄成动态的，大家体谅一下哈。
下面是代码：
首先自定义view的属性，我先以属性的形式实现了，大家如果想做成loading的效果的话，可以自己去实现。。

```
<resources><declare-styleable name="LightView"><attr name="light_color" format="color"></attr><attr name="bg_color" format="color"></attr><attr name="speed" format="integer"></attr><attr name="lightSize" format="dimension"></attr></declare-styleable></resources>

这里面我定义了light_color 首次闪电的绘制颜色，bg_color 第二次绘制闪电的颜色，后面如果绘制的话，其实就不分首次和下一次了，因为需要来回的转换，speed 绘制的速度，lightSize 闪电的高度
下面看具体实现代码：

public class LightView extends View {private int mLightColor, mBgColor, mspeed, addSpeed = 1, mLightSize;private Paint paint;private int mWidth, mHeight, measureHeight;private Path path;private boolean flag = false;private RectF rect;public LightView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public LightView(Context context) {this(context, null);}public LightView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.LightView, defStyleAttr, 0);mLightColor = a.getColor(R.styleable.LightView_light_color, Color.YELLOW);mBgColor = a.getColor(R.styleable.LightView_bg_color, Color.RED);mspeed = a.getInt(R.styleable.LightView_speed, 1);mLightSize = a.getDimensionPixelSize(R.styleable.LightView_lightSize, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 17,getResources().getDisplayMetrics()));a.recycle();paint = new Paint();paint.setStyle(Paint.Style.FILL);paint.setAntiAlias(true);paint.setStrokeWidth(1);paint.setColor(mLightColor);rect = new RectF();new Thread(new Runnable() {@Overridepublic void run() {while (true) {//高度的增量addSpeed += 10;postInvalidate();try {Thread.sleep(mspeed);//绘制的速度} catch (Exception e) {e.printStackTrace();}}}}).start();}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int heightMode = MeasureSpec.getMode(heightMeasureSpec);measureHeight = MeasureSpec.getSize(heightMeasureSpec);if (heightMode == MeasureSpec.EXACTLY) {mHeight = Math.min(measureHeight, mLightSize);} else {mHeight = mLightSize;}mWidth = 2 * mHeight / 3;//以高度来决定view的宽度，设置宽度永远为高度的三分之二。。我是觉得这样好看。。=。=//使用path绘制闪电形状path = new Path();path.moveTo(mWidth * 2 / 3, 0);path.lineTo(mWidth / 2, 4 * mHeight / 9);path.lineTo(mWidth * 2 / 3, 4 * mHeight / 9);path.lineTo(mWidth / 3, mHeight);path.lineTo(mWidth / 2, 5 * mHeight / 9);path.lineTo(mWidth / 3, 5 * mHeight / 9);path.close();setMeasuredDimension(mWidth, mHeight);}@Overrideprotected void onDraw(Canvas canvas) {rect.top = 0;rect.left = 0;rect.right = mWidth;rect.bottom = mHeight;paint.setColor(Color.GREEN);canvas.drawRoundRect(rect, mWidth / 2, mHeight / 2, paint);//通过对切割画布的高度的判断，判断是否第二次的绘制已经完成，然后改变初次绘制的闪电的颜色if (addSpeed >= mHeight) {addSpeed = 0;if (!flag) {flag = true;} else {flag = false;}}if (!flag) {paint.setColor(mLightColor);canvas.drawPath(path, paint);//绘制完全的闪电paint.setColor(mBgColor);canvas.clipRect(0, 0, mWidth, addSpeed);//通过切割画布，在重新绘制闪电，并不会对已经绘制过的图形产生影响canvas.drawPath(path, paint);} else {paint.setColor(mBgColor);canvas.drawPath(path, paint);paint.setColor(mLightColor);canvas.clipRect(0, 0, mWidth, addSpeed);canvas.drawPath(path, paint);}}}

其实这里面主要是对基础的path和clipRect的理解
找到一个介绍clipRect的不错的文章，摘过来
android的clip有以下两点疑问：
Clip(剪切)的时机
Clip中的Op的参数的意思。

通常咱们理解的clip(剪切)，是对已经存在的图形进行clip的。但是，在android上是对canvas（画布）上进行clip的，要在画图之前对canvas进行clip，如果画图之后再对canvas进行clip不会影响到已经画好的图形。一定要记住clip是针对canvas而非图形。

接下来通过android自带的APIdemo Clipping例子详细讲述Clip中的Op的参数的意思。Android提供clipRect、clipPath和clipRegion剪切区域的API。
Op一共有 DIFFERENCE,INTERSECT,UNION,XOR, REVERSE_DIFFERENCE, REPLACE六种选择。

例子:
在canvas上剪切从(0,0)到(60,60)的方块。下图蓝色区域加紫色区域。
在canvas上剪切从(40,40)到(100,100)的方块。下图橄榄色区域加紫色区域。
在canvas上剪切从(0,0)到(100,100)的方块。

先在第二方块上加上Op参数例如：canvas.clipRect(40, 40, 100, 100, Region.Op. DIFFERENCE);
首先，需要搞清楚Op参数针对的对象。接着了解其含义。
Op参数针对的对象是之前剪切的区域以及当前要剪切的区域。
在本例中涉及到区域是从(0,0)到(60,60)的方块和从(40,40)到(100,100)的方块。
那有哪些含义呢？就是表示当前要剪切的区域与之前剪切过的之间的关系。

DIFFERENCE：之前剪切过除去当前要剪切的区域（蓝色区域）。
INTERSECT：当前要剪切的区域在之前剪切过内部的部分（紫色区域）。
UNION：当前要剪切的区域加上之前剪切过内部的部分（蓝色区域+紫色区域+橄榄色区域）。
XOR：异或，当前要剪切的区域与之前剪切过的进行异或。（蓝色区域+橄榄色区域）。
REVERSE_DIFFERENCE：与DIFFERENCE相反，以当前要剪切的区域为参照物，当前要剪切的区域除去之前剪切过的区域(橄榄色区域);
REPLACE:用当前要剪切的区域代替之前剪切过的区域。(橄榄色区域+紫色区域);
没带Op参数效果与INTERSECT的效果一样，两个区域的交集。

自定义View之会动的闪电相关推荐

Android自定义View高级动效之---安卓流星雨动效|Android流星雨专辑封面
篇章目标要点最近看到酷我音乐App出了一则<穹顶流星>动效,看完之后决定自己尝试一下实现,本文将围绕通过自定义View实现流星雨效果,可以看到流星雨环绕专辑图的高级动效.通过完成这项开发 ...
Android自定义View高级动效---粒子动效实现|音乐播放器粒子动效|实现酷我网易云粒子动效
篇章目标介绍之前看到网易云,酷我音乐都发布过用于播放器页面粒子动效的效果,于是打算自己也动手做一个,产品目标是对标酷我手机app的动效设计,实现过程完全基于自身的推测理解予以实现.计划通过两次完全完 ...
Android开发之自定义SurfaceView绘制动效音波图 | 动效音阶图 | Android自定义View
老套路献上图: 第一张是通过播放歌曲拿到歌曲播放的数据进行动态展示的第二张是通过定时器随机生成的数据动态展示的先说下这个自定义view也不难很简单,就是绘制矩形,唯一的难点在于计算矩形的坐标说下 ...
android设置自定义按钮,Android自定义View之元素按钮
Android自定义View之元素按钮之前在dribbble看到的三个元素的按钮,参考了设计的创意,添加了自己定义的动画效果来实现.先看效果效果图分别是水火电三个元素的按钮实现.其中电的实现最简 ...
自定义View：测量measure，布局layout，绘制draw
1. 什么是View 在Android的官方文档中是这样描述的:表示了用户界面的基本构建模块.一个View占用了屏幕上的一个矩形区域并且负责界面绘制和事件处理. 手机屏幕上所有看得见摸得着的都是Vie ...
android中仿qq最新版抽屉,Android 自定义View实现抽屉效果
Android 自定义View实现抽屉效果说明这个自定义View,没有处理好多点触摸问题 View跟着手指移动,没有采用传统的scrollBy方法,而是通过不停地重新布局子View的方式,来使得子 ...
Android自定义sleep图,android自定义view实现钟表效果
本文实例为大家分享了android view实现钟表的具体代码,供大家参考,具体内容如下先看效果图: 自定义view大家肯定已经不陌生了,所以直接今天直接步入正题:如何利用canvas去绘制出一个钟 ...
android覆盖扩散动画,[Android]多层波纹扩散动画——自定义View绘制
之前整理过一些属性动画的基本操作,这一段时间的动画相关需求都安然度过了.直到这次-- 一.另一种动画需求多数交互中的动画都是让单个页面元素动起来,这种就很适合用属性动画实现.但是对于多个元素.非页 ...
Android 之自定义view实现水波纹效果
在实际的开发中,很多时候还会遇到相对比较复杂的需求,比如产品妹纸或UI妹纸在哪看了个让人兴奋的效果,兴致高昂的来找你,看了之后目的很明确,当然就是希望你能给她: 在这样的关键时候,身子板就一定得硬了, ...

自定义View之会动的闪电

自定义View之会动的闪电相关推荐

最新文章

热门文章