Android自定义View—刮刮卡效果

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

首先看下刮刮卡效果

效果图:

实现原理:

  • 下层图片:我们的红包的图片
  • 上层图片:有两部分
    • 一部分是灰色背景
    • 一部分是拥有透明度为0,并且模式为交集的画笔
  • 使用滑动监听,滑动时,用透明度为0的画笔画出透明和上层图片灰色的交集,交集即是透明的背景
  • 监听我们滑动的距离是否达到标准,达到标准后,使用子线程1s后自动展开剩余的灰色

实现步骤:

  • 初始化画笔
  • 初始化顶层图片和底层图片
  • 监听滑动事件,判断是否滑完
  • 使用onDraw()画出我们的上层图片和底层图片

下面是一些实现过程:

1初始化画笔

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

这两个属性可使画笔四个角变为圆角:

2初始化底层和顶层图片

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

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

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

记得在监听最后面重置LastY:

4画Bitmap

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

5在布局中应用

整个类的源码:

原文发布于微信公众号 - 何俊林(DriodDeveloper)

原文发表时间:2016-11-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏西安-晁州

关于vue.js中slot的理解

1553
来自专栏小巫技术博客

A017-布局之FrameLayout

帧布局,是所有布局容器中最简单的一种,控件定义在FrameLayout中默认放置在左上角,定义在后面的控件会层叠在前面定义的控件之上,所以才会被称为帧布局。

1133
来自专栏Web项目聚集地

CSS布局解决方案(全屏布局)

原文连接:https://segmentfault.com/a/1190000013565024#articleHeader1

2774
来自专栏黄Java的地盘

CSS transition delay简介与进阶应用

我相信这是一个很常见的一个需求,有很多种方式能够实现,但是,其实现方式的原理各不相同,也有利有弊。

822
来自专栏小筱月

onload 和 domready

window.onload 事件会在页面或图像加载完成后触发(即所有元素的资源都下载完毕)

2062
来自专栏Google Dart

AngularDart Material Design 扩展面板 顶

一个或多个面板在扩展面板集中组合在一起。 单击面板时,面板内容将展开。 面板由名称,值,可选的辅助文本和展开的面板内容组成。

1002
来自专栏练小习的专栏

Dom 事件处理函数

别人整理的,我顺手就给捏来了哈哈。很详细的一些事件,浏览器支持情况,以及详细的说明。在这里向整理者致敬。 <!DOCTYPE html PUBLIC "-//W...

1898
来自专栏yang0range

CSS的选择器

1612
来自专栏杨龙飞前端

页面重绘和回流(重排)以及优化

2144
来自专栏十月梦想

Vue过渡动画实现

可以给transition添加一个name,如果name为"fade",则class前缀为指定的name

2231

扫码关注云+社区

领取腾讯云代金券