iOS-仿支付宝刮刮乐效果
概述
详细
支付宝里有个刮刮乐中奖, 和大街小巷里的类似彩票刮刮乐的效果一样。
一、实现思路
其实很简单的三步:
1. 展示刮出来的效果的view: 即刮开后刮刮乐效果展示-显示的文字Label
2. 设置遮挡在外面的Image(被刮的图片)
3. 在touchesMoved方法里面实现操作: 刮开图片获取文字
二、程序实现
虽然思路简单,但是还需要注意:
1. 这两个控件的位置切记要相同!
2. 一定要先创建下面的展示刮出来的效果控件的, 再创建上面的被刮的图片控件!
下面就直接上核心代码!
展示刮开出来的效果:显示的文字 label
UILabel *showLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 274, 145)];
showLabel.center = self.view.center;
showLabel.backgroundColor = [UIColor redColor];
showLabel.textColor = [UIColor yellowColor];
showLabel.text = @"恭喜你中奖了";
showLabel.font = [UIFont systemFontOfSize:30];
showLabel.textAlignment = NSTextAlignmentCenter;
[self.view addSubview:showLabel];
2. 设置遮挡在外面的Image(被刮的图片)
UIImageView *scratchedImg = [[UIImageView alloc] initWithFrame:showLabel.frame];
scratchedImg.image = [UIImage imageNamed:@"scratched"];
[self.view addSubview:scratchedImg];
self.scratchedImg = scratchedImg;
3. 在touchesMoved方法里面实现操作
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { // 触摸任意位置
UITouch *touch = touches.anyObject;
// 触摸位置在图片上的坐标
CGPoint cententPoint = [touch locationInView:self.scratchedImg];
// 设置清除点的大小
CGRect rect = CGRectMake(cententPoint.x, cententPoint.y, 20, 20);
// 默认是去创建一个透明的视图
UIGraphicsBeginImageContextWithOptions(self.scratchedImg.bounds.size, NO, 0);
// 获取上下文(画板)
CGContextRef ref = UIGraphicsGetCurrentContext();
// 把imageView的layer映射到上下文中
[self.scratchedImg.layer renderInContext:ref];
// 清除划过的区域
CGContextClearRect(ref, rect);
// 获取图片
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
// 结束图片的画板, (意味着图片在上下文中消失)
UIGraphicsEndImageContext(); self.scratchedImg.image = image;
}
三、压缩文件截图及运行效果
1、压缩文件截图:
2、运行时的截图
四、其他补充
界面性问题可以根据自己项目需求调整即可, 具体可参考代码, 项目能够直接运行!
注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权
iOS-仿支付宝刮刮乐效果的更多相关文章
- iOS仿支付宝芝麻信用仪表盘效果
概述 自定义View之高仿支付宝芝麻信用分数仪表盘动画效果 详细 代码下载:http://www.demodashi.com/demo/10654.html 仿支付宝芝麻信用仪表盘效果 一.主要思路 ...
- iOS仿支付宝首页效果
代码地址如下:http://www.demodashi.com/demo/12776.html 首先看一下效果 状态栏红色是因为使用手机录屏的原因. 1.问题分析 1.导航栏A有两组控件,随着tabl ...
- iOS仿支付宝首页的刷新布局效果
代码地址如下:http://www.demodashi.com/demo/12753.html XYAlipayRefreshDemo 运行效果 动画效果分析 1.UI需要变动,向上滑动的时候,顶部部 ...
- iOS 仿支付宝密码支付
代码地址如下:http://www.demodashi.com/demo/11484.html 一.准备工作 xcode 主要实现输入密码的时候不可见 二.程序实现 实现思路怎样 在支付宝输入密码的时 ...
- [cocos2d-js]cc.RenderTexture几种用法(数字图片、刮刮乐效果)
[转]http://blog.csdn.net/realcrazysun1/article/details/42393629 本文基于cocos2d-js 3.0版本引擎开发 RenderTextur ...
- HTML5 简单实现刮刮乐效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【Android界面实现】使用Canvas对象实现“刮刮乐”效果
在淘宝.京东等电商举办活动的时候,常常能够看到在移动client推出的各种刮奖活动,而这样的活动也受到了非常多人的喜爱.从client的体验来说,这样的效果应该是通过网页来实现的,那么,我们使用And ...
- Android打造完美的刮刮乐效果控件
技术:Android+Java 概述 趁着元旦假期之际,首先在这里,我祝福大家在新的2019年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆 ...
- 游戏的套路你知道吗? H5 Canvas刮刮乐
玩游戏的人 很多时候都会遇到翻牌子 开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结 指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了 其实很多时候在你点开那个 ...
随机推荐
- ios 中是否每一个对象(尤其是在使用多线程时),都要判断一下对象是否为nil,以防止程序闪退?
如下所示: Class messageClass = (NSClassFromString(@"MFMessageComposeViewController")); if (mes ...
- JSONObject以及json(转)
一.JAR包简介 要使程序 可以运行 必须引入JSON-lib包,JSON-lib包同时依赖于以下的JAR包: 1.commons-lang.jar 2.commons- ...
- SQL 条件 判断 select case as
" then "返回的数据1" " then "返回的数据2" else "返回的其他数据" end as 新的列名 f ...
- 【docker】docker基础原理,核心技术简介
关于docker的核心技术,就是以下的三大技术: 1.namespaces [命名空间] 使用linux的命名空间实现的进程间隔离.Docker 容器内部的任意进程都对宿主机器的进程一无所知. 除了进 ...
- Mac 在启动eclipse时 Failed to load JavaHL Library解决方法
在Mac 10.9.1系统里, 在Eclipse中安装svn的插件,出现如下提示 方法一: 1.根据提示进入链接 http://subclipse.tigris.org/wiki/JavaHL 2. ...
- bat薪酬
三大互联网巨头公司,百度腾讯跟阿里如何划分级别?薪资待遇又有多少?除非身居其位,否则很难探知,但是等你到那个位置知道了,却又不能说,至少不能在公 开场合谈论.接下来就为大家揭秘,百度.阿里与腾讯内部的 ...
- android:Activity四种启动模式简单介绍
Activity启动模式 能够依据实际的需求为Activity设置相应的启动模式,从而能够避免创建大量反复的Activity等问题 Activity有四种载入模式 1.standard(默认启动模式, ...
- Android导航抽屉-Navigation Drawer
Google今年七月份的时候更新了他们的Google+应用,采用了新的导航方式并抛弃了navigationdrawer.一时之间,又引发了一系列关于NavigationDrawer利弊的讨论,不过对于 ...
- IOS UITableView索引排序功能
UITbableView分组展示信息时,有时在右侧会带索引,右侧的索引一般为分组的首字母,比如城市列表的展示.当点击右侧索引的字母,列表会快速跳到索引对应的分组,方便我们快速查找.下面,就介绍一下索引 ...
- Android -- ImageLoader本地缓存
传送门 <Android -- ImageLoader简析> http://www.cnblogs.com/yydcdut/p/4008097.html 本地缓存 在缓存文件时对文件名称 ...