iOS-仿支付宝刮刮乐效果
概述
详细
代码下载:http://www.demodashi.com/demo/10673.html
支付宝里有个刮刮乐中奖, 和大街小巷里的类似彩票刮刮乐的效果一样。
一、实现思路
其实很简单的三步:
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大师(http://www.demodashi.com)宣传,拒绝转载,转载需要作者授权
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 ...
- iOS 仿支付宝刮刮乐效果
支付宝里有个刮刮乐中奖, 和大街小巷里的类似彩票刮刮乐的效果一样. 实现思路, 其实很简单的三步: 展示刮出来的效果的view: 即刮开后刮刮乐效果展示-显示的文字Label 设置遮挡在外面的Imag ...
- 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 ...
最新文章
- .NET Core 2.0 Preview 2为开发人员带来改进
- 直播回顾 | 数据驱动「产品迭代」的三大场景详解
- (26)FPGA编码器设计(第6天)
- java servlet 入门_servlet 入门详解
- android刷机方法,介绍一种android的裸刷机方法(fastboot刷机实质)
- codevs3143 二叉树的序遍历
- 接口自动化测试(Python+Requests+Unittest)
- access建立er图_ER图的构建
- DirectX版本问题
- java word书签_java 操作word 书签并插入值
- 基于Sobel算法的边缘检测简介
- win7 mysql怎么配置环境变量_MySQL Win7 64位 下载、安装与配置图文教程
- 推荐9款便签云生成工具
- matlab中计算最大利润,最大利润问题
- Python视频处理(3)——提取视频字幕
- Java 阿里命名以及注释规范
- 如何低成本减少企业知识流失?天翎知识文档系统+群晖NAS值得一试
- 未来想象计算机图片儿童版,未来世界儿童画画大全绘画作品欣赏
- 开关电源:选择隔离电源还是非隔离电源(转)
- 掩码、反掩码和通配符
热门文章
- python函数type的用意_Python内置函数Type()函数一个有趣的用法
- STM32F103:三.(2)红外接收
- 14008.xilinx-EMIO 扩展I2C问题
- python 连接mysql_使用MySQL
- Linux源代码组织架构
- uboot copy_from_nand代码详解
- 线程池的执行原则及配置参数详解
- 综合使用spring cloud技术实现微服务应用
- Java equals()方法和hashCode()方法
- 使用canvas实现对图片的批量打码