iOS实现转盘效果
更新时间:2020年6月30日 23:42 点击:1741
本文实例为大家分享了iOS实现转盘效果的具体代码,供大家参考,具体内容如下
Demo下载地址: iOS转盘效果
功能:实现了常用的iOS转盘效果,轮盘抽奖效果的实现,转盘可以暂停,旋转,已经快速旋转抽奖,选中的效果指向正上方。
效果图:
工程文件目录:
核心代码:
// // ViewController.m // 转盘效果 // // Created by llkj on 2017/8/31. // Copyright © 2017年 LayneCheung. All rights reserved. // #import "ViewController.h" #import "WheelView.h" @interface ViewController () @property (nonatomic, weak) WheelView *wheelV; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; WheelView *wheelV = [WheelView wheelView]; wheelV.center = self.view.center; self.wheelV = wheelV; [self.view addSubview:wheelV]; } - (IBAction)rotation:(id)sender { [self.wheelV rotation]; } - (IBAction)stop:(id)sender { [self.wheelV stop]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end
WheelView文件
// // WheelView.h // 转盘效果 // // Created by llkj on 2017/8/31. // Copyright © 2017年 LayneCheung. All rights reserved. // #import <UIKit/UIKit.h> @interface WheelView : UIView + (instancetype)wheelView; - (void)rotation; - (void)stop; @end
// // WheelView.m // 转盘效果 // // Created by llkj on 2017/8/31. // Copyright © 2017年 LayneCheung. All rights reserved. // #import "WheelView.h" #import "WheelBtn.h" #define angle2Rad(angle) ((angle) / 180.0 * M_PI) @interface WheelView ()<CAAnimationDelegate> @property (weak, nonatomic) IBOutlet UIImageView *contentV; @property (nonatomic, weak) UIButton *selectBtn; @property (nonatomic, strong) CADisplayLink *link; @end @implementation WheelView - (CADisplayLink *)link { if (_link == nil) { CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(update)]; [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode]; _link = link; } return _link; } + (instancetype)wheelView { return [[[NSBundle mainBundle] loadNibNamed:@"WheelView" owner:nil options:nil] lastObject]; } - (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { self = [[[NSBundle mainBundle] loadNibNamed:@"WheelView" owner:nil options:nil] lastObject]; } return self; } - (void)awakeFromNib { [super awakeFromNib]; CGFloat btnW = 68; CGFloat btnH = 143; CGFloat angle = 0; //加载原始大图片 UIImage *oriImage = [UIImage imageNamed:@"LuckyAstrology"]; //加载原始选中的大图片 UIImage *oriSelImg = [UIImage imageNamed:@"LuckyAstrologyPressed"]; CGFloat X = 0; CGFloat Y = 0; CGFloat sacle = [UIScreen mainScreen].scale; CGFloat clipW = oriImage.size.width / 12.0 * sacle; CGFloat clipH = oriImage.size.height * sacle; for (int i = 0; i < 12; i ++) { WheelBtn *btn = [WheelBtn buttonWithType:UIButtonTypeCustom]; btn.bounds = CGRectMake(0, 0, btnW, btnH); //按钮正常状态图片 X = i * clipW; //给定一张图片截取指定区域内的图片 CGImageRef clipImg = CGImageCreateWithImageInRect(oriImage.CGImage, CGRectMake(X, Y, clipW, clipH)); [btn setImage:[UIImage imageWithCGImage:clipImg] forState:UIControlStateNormal]; //按钮选中状态图片 CGImageRef clipSelImg = CGImageCreateWithImageInRect(oriSelImg.CGImage, CGRectMake(X, Y, clipW, clipH)); [btn setImage:[UIImage imageWithCGImage:clipSelImg] forState:UIControlStateSelected]; [btn setBackgroundImage:[UIImage imageNamed:@"LuckyRototeSelected"] forState:UIControlStateSelected]; btn.layer.anchorPoint = CGPointMake(0.5, 1); btn.layer.position = CGPointMake(self.bounds.size.width * 0.5, self.bounds.size.height * 0.5); btn.transform = CGAffineTransformMakeRotation(angle2Rad(angle)); angle += 30; [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside]; [self.contentV addSubview:btn]; //默认第一个按钮选中 if (i == 0) { [self btnClick:btn]; } } } - (void)btnClick:(UIButton *)btn { //1.让当前选中的按钮取消选中 self.selectBtn.selected = NO; //2.让当前点击的按钮成为选中状态 btn.selected = YES; //3.当前点击的按钮成为选中状态 self.selectBtn = btn; } - (void)rotation { self.link.paused = NO; } - (void)stop { self.link.paused = YES; } - (void)update { self.contentV.transform = CGAffineTransformRotate(self.contentV.transform, M_PI / 300.0); } - (IBAction)start:(id)sender { //快速转几圈 CABasicAnimation *anim = [CABasicAnimation animation]; anim.keyPath = @"transform.rotation"; anim.toValue = @(M_PI * 4); anim.duration = 0.5; anim.repeatCount = 1; anim.delegate = self; [self.contentV.layer addAnimation:anim forKey:nil]; } - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag { CGAffineTransform transform = self.selectBtn.transform; //获取当前选中按钮的旋转角度 CGFloat angle = atan2(transform.b, transform.a); //动画结束时当前选中的按钮指向最上方 self.contentV.transform = CGAffineTransformMakeRotation(-angle); } @end
WheelBtn.m
// // WheelBtn.m // 转盘效果 // // Created by llkj on 2017/8/31. // Copyright © 2017年 LayneCheung. All rights reserved. // #import "WheelBtn.h" @implementation WheelBtn - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event { CGRect rect = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height * 0.5); if (CGRectContainsPoint(rect, point)) { // 在指定的范围内 return [super hitTest:point withEvent:event]; } else { return nil; } } //取消按钮高亮状态做的事 - (void)setHighlighted:(BOOL)highlighted { } //返回当前按钮中的image位置和尺寸 - (CGRect)imageRectForContentRect:(CGRect)contentRect { return CGRectMake((contentRect.size.width - 40) *0.5, 20, 40, 48); } //返回当前按钮中的Label位置和尺寸 //- (CGRect)titleRectForContentRect:(CGRect)contentRect{ // //} @end
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
上一篇: iOS新版微信底部返回横条问题的解决
下一篇: iOS新增绘制圆的方法实例代码
相关文章
- 这篇文章主要介绍了MySQL性能监控软件Nagios的安装及配置教程,这里以CentOS操作系统为环境进行演示,需要的朋友可以参考下...2015-12-14
iOS APP h5快捷程序 .mobileconfig的生成
1.从APP Store 下载Apple Configurator 2从一个管理点管理所有iOS设备应用程序,文档和配置文件。想要确保您的所有家庭成员在其每台iOS设备上都有类似的应用和文档,管理日益增...2021-12-23iOS设置UIButton文字显示位置和字体大小、颜色的方法
这篇文章给大家分享了iOS如何设置UIButton的文字显示位置和字体的大小、颜色,文中给出了示例代码,相信对大家的学习和理解很有帮助,有需要的朋友们下面来一起看看吧。...2020-06-30- 这篇文章主要为大家详细介绍了iOS如何将图片裁剪成圆形,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-30
- 这篇文章主要给大家介绍了关于iOS给border设置渐变色的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-09
- 这篇文章主要介绍了iOS新版微信底部返回横条问题的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-30
- 这篇文章主要介绍了vue+axios全局添加请求头和参数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-24
- 这篇文章主要给大家介绍了关于iOS蓝牙设备名称缓存问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-08
- 这篇文章主要介绍了iOS新版微信底部工具栏遮挡问题完美解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-30
- 这篇文章主要介绍了封装 axios+promise通用请求函数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
- 这篇文章主要给大家介绍了关于iOS新增绘制圆的方法,文中通过示例代码介绍的非常详细,对各位iOS开发者们具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-06-30
- 这篇文章主要为大家详细介绍了iOS UIBezierPath实现饼状图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-20
- ios获取文件路径的方法,iphone沙箱模型的四个文件夹,通过documents,tmp,app,Library得到模拟器路径的简单方式,下面小编整理相关资料,把IOS获取各种文件目录路径的方式总结如下,需要的朋友可以参考下...2020-06-30
- 这篇文章主要介绍了Vue中 axios delete请求参数操作,具有很好的参考价值,希望对大家有所 帮助。一起跟随小编过来看看吧...2020-08-26
- vue项目经常会用到axios来请求数据,那么首先肯定需要对这个请求方法进行一个二次封装,这篇文章主要给大家介绍了关于项目中Axios二次封装的相关资料,需要的朋友可以参考下...2021-06-08
- 这篇文章主要为大家详细介绍了iOS UICollectionView实现卡片效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-30
- 这篇文章主要为大家详细介绍了iOS实现电子签名,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-12-08
- 这篇文章主要介绍了Vue使用axios引起的后台session不同操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-14
- 这篇文章主要为大家详细介绍了iOS实现循环滚动公告栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-20
- 这篇文章主要介绍了Vue3配置axios跨域实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-25