iOS 仿支付宝刮刮乐效果
支付宝里有个刮刮乐中奖, 和大街小巷里的类似彩票刮刮乐的效果一样。
实现思路, 其实很简单的三步:
- 展示刮出来的效果的view: 即刮开后刮刮乐效果展示-显示的文字Label
- 设置遮挡在外面的Image(被刮的图片)
- 在touchesMoved方法里面实现操作: 刮开图片获取文字
虽然思路简单,但是还需要注意:
- 这两个控件的位置切记要相同!
- 一定要先创建下面的展示刮出来的效果控件的, 再创建上面的被刮的图片控件!
下面就直接上代码!
- (void)setupSubViews {// 1.展示刮开出来的效果:显示的文字 labelUILabel *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;
}
复制代码
贴上 Demo , 如果需要直接这里下载就可以喽~
iOS 仿支付宝刮刮乐效果相关推荐
- iOS仿支付宝芝麻信用仪表盘效果
概述 自定义View之高仿支付宝芝麻信用分数仪表盘动画效果 详细 代码下载:http://www.demodashi.com/demo/10654.html 仿支付宝芝麻信用仪表盘效果 一.主要思路 ...
- php蚂蚁森林的效果,iOS仿支付宝蚂蚁森林动画效果
最近要用到类似支付宝蚂蚁森林的动画效果,所以就简单写了一个比较简单的一个demo,效果图如下: 效果图1 需求: 在这个view上面随机出现n个黄钻(button),黄钻按钮还得上下抖动,箭头1指向的 ...
- iOS 仿支付宝密码支付
代码地址如下: http://www.demodashi.com/demo/11484.html 一.准备工作 xcode 主要实现输入密码的时候不可见 二.程序实现 实现思路怎样 在支付宝输入密码的 ...
- Android 仿支付宝蚂蚁森林动画效果
Android 动画可以归纳为以下几种: 视图动画(View 动画) 帧动画(Frame 动画.Drawable 动画) 属性动画 触摸反馈动画(Ripple Effect) 揭露动画(Reveal ...
- angularjs html 支付宝支付,angular仿支付宝密码框输入效果
项目需求,使用ng写一个密码框格子支付模块,一开始使用一个input+letter-spacing来分割字符,但是发现间距非常不好控制,随着字符的输入文本框字符串间距还会自动调整.最终从网上查找到一款 ...
- 使用html仿支付宝首页,iOS 仿支付宝首页样式(二)
那篇文章里面方法有个一弊端,就是UITableView的高度和Cell的总高度一致,也就是UITableView不能滑动,UITableViewCell的复用机制页就不起作用了.哈哈,懒人版的支付宝首 ...
- IOS仿支付宝首页滑动效果
项目来源翻译大神的swift 本版为objectc版本, 大神地址: 这里写链接内容 一.效果图如下: 没什么逻辑可讲述的,直接给源码吧: // // ViewController.m // ZFBH ...
- uniapp 仿支付宝首页流光按钮效果 流光动画实现
支付宝流光按钮效果 效果动效: 按钮从小到大并出现弹跳效果 流光自左向右滑过 最终实现效果如下图所示: 代码如下: <view class="ceshi">12点开抢 ...
- iOS仿支付宝账单饼状图
前言: 这段时间项目做了一个账单查询的页面使用到了饼状图,支付宝账单那个饼状图,就简单的封装了一个给大家看看,使用的基本技术也就是使用UIBezierPath绘制柱状图路径,再把CAShapeLaye ...
最新文章
- ARM 发布新一代 GPU 架构,还有一个机器学习处理器
- 支付宝支付 第九集:产品数据和支付二维码对接
- 初步理解TCP/IP网络
- PowerDesigner 小工具窗
- 用D触发器构造RAM存储器
- 沟通篇:产品经理如何与UI进行沟通
- UVA - 11882Biggest Number dfs+期望剪枝
- MySQL命令梳理_MySQL操作命令梳理(1)
- C#Socket文件传输(发送与接收代码)
- 作者:王亚楠(1988-),男,中国科学院昆明植物研究所科学数据库管理员
- 彭旭老师《一线员工执行力提升训练》
- html页面枚举 暴力,暴力枚举进程模块(示例代码)
- 吴声年度演讲全文:场景品牌,新商业的此时此刻
- Gnome 个人目录下中文路径转英文路径
- CUDA开源 轻松跑AMD GPU/Intel x86 CPU
- Python:照片墙设计,将爬虫获取的照片布局成爱心形状
- 推荐一个视频播放器potplayer
- Redis各版本的特性及架构
- Unit elasticsearch.service entered failed state
- 2013,手游迎首轮大洗牌,小团队如何存活
热门文章
- 关联本地git仓库与Github仓库
- JavaScript设计模式——单例模式的理解与应用
- [待解决]自定义头像时使用vue-cropper进行图片裁剪,得到的是base64格式的图片,如何对接file类型的api接口
- SLAM: Inverse Depth Parametrization for Monocular SALM
- windows下可用mysql吗_Windows下MySQL安装配置与使用
- 关于Swift中Struct,Class和Enum的哪些事儿
- JAVA ReentrantLock 分析
- extmail垃圾邮件存放垃圾邮件箱
- 视频上传、转码、切面、存储的思路
- Redis-3.2主从复制与集群搭建