Android实现彩票刮刮乐效果

在一些应用，比如支付宝、天猫app我们经常能够看到一些刮奖的功能效果，通过用户手指滑动模拟出"刮刮乐"刮奖的视觉效果，让用户有一种刮彩票时候那种“爽”的感觉。
我们接下来就来用代码模拟出简配版“刮刮乐”效果，直接看效果图先

中了40W？？(YY下) 是不是跟外面彩票店的刮刮乐有点相似。其实实现这个效果很简单，简单到你觉得不可思议~

1.首先我们创建一个类(TicketView)让其继承View,然后实现父类构造方法，代码就不贴了。

2.接下来我们要说明一个类BitmapShader ，该类是实现该效果的重点。BitmapShader继承于Shader，其实在上面文章仿华为手机管家“一键优化”Loading加载框已经有简单提及过该类，Shader中文翻译着色器，其实就是给View进行绘制色彩变化的工具（你可以这么理解。。。）

/*** Call this to create a new shader that will draw with a bitmap.** @param bitmap The bitmap to use inside the shader* @param tileX The tiling mode for x to draw the bitmap in.* @param tileY The tiling mode for y to draw the bitmap in.*/public BitmapShader(@NonNull Bitmap bitmap, @NonNull TileMode tileX, @NonNull TileMode tileY) {this(bitmap, tileX.nativeInt, tileY.nativeInt);}

我们先写个demo看下效果先。首先我们申明一个Paint画笔

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);mPaint.setStyle(Paint.Style.STROKE);mPaint.setStrokeWidth(30);mPaint.setStrokeCap(Paint.Cap.ROUND);

然后声明一个Bitmap对象，找个背景图

调用画笔setShader将创建的BitmapShader设置进去

        bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.ticket);BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP,Shader.TileMode.CLAMP);mPaint.setShader(shader);

在onDraw方法里面写几个文字

        mPaint.setTextSize(180);mPaint.setStyle(Paint.Style.FILL);canvas.drawText("看到了里面", 100, 500, mPaint);

运行后效果

我们看到了文字下面是居然是加载的那张bitmap。这个Paint似乎能够看穿一切~

BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)看下后面的那两个参数。

Shader.TileMode顾名思义肯定是一种模式，到这里就可以理解为是一种显示模式，进入这个类，我们会发现一共有 CLAMP, REPEAT, MIRROR三种显示模式。方法中的第一个Shader.TileMode是X轴的显示模式，第二个是Y轴上的显示模式。

         /*** replicate the edge color if the shader draws outside of its* original bounds*/CLAMP   (0),/*** repeat the shader's image horizontally and vertically*/REPEAT  (1),/*** repeat the shader's image horizontally and vertically, alternating* mirror images so that adjacent images always seam*/MIRROR  (2);

看到上面的效果，我估计很多人对“刮刮乐”效果的实现方法已经很清楚了。是的，我们可以直接使用Path，根据手指滑动来绘制path，从而达到模拟“刮出”的效果，直接看代码~ (初始化代码跟上面是一致的)

这里我们用到贝塞尔曲线来绘制手指滑动轨迹，已达到顺滑的目的

   private Path path = new Path();//重写onTouchEvent@Overridepublic boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:float x = event.getX();float y = event.getY();mX = x;mY = y;path.moveTo(x, y);break;case MotionEvent.ACTION_MOVE:float x1 = event.getX();float y1 = event.getY();float preX = mX;float preY = mY;float dx = Math.abs(x1 - preX);float dy = Math.abs(y1 - preY);if (dx >= offset || dy >= offset) {// 贝塞尔曲线的控制点为起点和终点的中点float cX = (x1 + preX) / 2;float cY = (y1 + preY) / 2;path.quadTo(preX, preY, cX, cY);mX = x1;mY = y1;}}invalidate();return true;}

在onDraw方法里面将path绘制出来

 @Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.drawPath(path,mPaint);}

为了覆盖颜色更加逼真，将其设置为灰色

 canvas.drawColor(Color.GRAY);

就能显示是上面的"刮刮乐"效果了~是不是很简单- -||

Android实现彩票刮刮乐效果相关推荐

android 实现刮刮乐刮奖效果
在做电商类产品时,经常会有一些活动需求,如抽奖,抽奖的一种方式就是刮刮乐,这次的内容是利用重写View的方式实现刮刮乐的效果. 思路:利用Bitmap做刮奖区的蒙版,利用paint将手指触摸过的区域置 ...
Android实现刮刮乐效果
一.实现原理与所需技术 Android刮刮乐效果的实现,自定义view,绘制出中奖信息,将一张图片绘制在中奖信息的上层,通过onTouchEvent监听用户手势,通过path记录绘制轨迹,设置绘制方式 ...
【自定义控件】Android仿刮刮乐|刮刮卡|橡皮擦效果
背景:需要实线一个类似刮刮乐的擦一擦效果,要求是在图片上覆盖半透明蒙层,蒙层支持手势擦除(类似橡皮擦). 思路:使用自定义View在onDraw时进行绘制,绘制模式选择混合模式(叠加变透明). 示例: ...
【Android界面实现】使用Canvas对象实现“刮刮乐”效果
在淘宝.京东等电商举办活动的时候,经常可以看到在移动客户端推出的各种刮奖活动,而这种活动也受到了很多人的喜爱.从客户端的体验来说,这种效果应该是通过网页来实现的,那么,我们使用Android的自带控件 ...
Android涂鸦技术及刮刮乐示例分析
概述: 很早之前就想研究一下Android中的涂鸦,其实也说不上是研究了,毕竟都是一些相对比较简单的知识点.下面就对基于画布(Canvas)和触摸事件(onTouchEvent)来实现涂鸦和刮刮乐. ...
iOS 仿支付宝刮刮乐效果
支付宝里有个刮刮乐中奖, 和大街小巷里的类似彩票刮刮乐的效果一样. 实现思路, 其实很简单的三步: 展示刮出来的效果的view: 即刮开后刮刮乐效果展示-显示的文字Label 设置遮挡在外面的Imag ...
iOS-仿支付宝刮刮乐效果
概述仿支付宝刮刮乐效果, 可以按照自己需求更改展示刮出来的效果的view(即刮开后刮刮乐效果展示) 详细代码下载:http://www.demodashi.com/demo/10673.html ...
Android 撕衣服（刮刮乐游戏）
项目简单介绍: 该项目为撕衣服,相似刮刮乐游戏具体介绍: 用户启动项目后.载入一张图片,当用户点击图片的时候,点击的一片区域就会消失.从而显示出在这张图片以下的图片这个小游戏相似与刮奖一样,刮开涂 ...
android motion linux handle,Android实现刮奖的效果
突发奇想,Android实现类似于刮彩票的效果,于是完成了一个小例子,其中有不完善的地方,比如判断彩票是否中奖是以是否刮彩票3次判断的,而不是以面积来计算的. 核心部分是借鉴网上代码的,不过找不到源地 ...