Android自定义View—刮刮卡效果

前言:在电商中,常用到一些劵和红包之类,往往是通过刮刮卡效果实现,本文来自Hensn_授权本公众号独家发布, Hensen_的****博客链接为:http://blog.****.net/qq_30379689,点击阅读原文,可查看其原文。话不多说,我们一起来涨知识。

首先看下刮刮卡效果

效果图:

Android自定义View—刮刮卡效果


实现原理:

  • 下层图片:我们的红包的图片

  • 上层图片:有两部分 

    • 一部分是灰色背景

    • 一部分是拥有透明度为0,并且模式为交集的画笔

  • 使用滑动监听,滑动时,用透明度为0的画笔画出透明和上层图片灰色的交集,交集即是透明的背景

  • 监听我们滑动的距离是否达到标准,达到标准后,使用子线程1s后自动展开剩余的灰色

实现步骤:

  • 初始化画笔

  • 初始化顶层图片和底层图片

  • 监听滑动事件,判断是否滑完

  • 使用onDraw()画出我们的上层图片和底层图片

下面是一些实现过程:

1

初始化画笔

Android自定义View—刮刮卡效果
画笔设置XferMode,DST_IN模式是交集模式,由于图片底层是灰色,上层是我们drawPath出来的透明度为0的路径,所以取交集,即透明的路径,达到涂刮的效果:

Android自定义View—刮刮卡效果
这两个属性可使画笔四个角变为圆角:

Android自定义View—刮刮卡效果

2

初始化底层和顶层图片

Android自定义View—刮刮卡效果

为顶层图片加上画布,并画上灰色:

Android自定义View—刮刮卡效果

3

监听滑动事件,判断是否滑完

Android自定义View—刮刮卡效果
当手指松开时,判断是否滑完,以每一次左右滑累加得到的sumX和图片的宽度4倍比较,即是用手指左右滑动两个来回,并通过1秒延迟,让子线程重绘,涂刮剩余的灰色:

Android自定义View—刮刮卡效果
记得在监听最后面重置LastY:

Android自定义View—刮刮卡效果

4

画Bitmap

我们的ondraw方法,只要判断是否滑完了,滑完了就不画上层图片:

Android自定义View—刮刮卡效果

5

在布局中应用

Android自定义View—刮刮卡效果

整个类的源码:

Android自定义View—刮刮卡效果
Android自定义View—刮刮卡效果
Android自定义View—刮刮卡效果

第一时间获得博客更新提醒,以及更多android干货,源码分析,欢迎关注我的微信公众号,扫一扫下方二维码或者长按识别二维码,即可关注。

Android自定义View—刮刮卡效果