iOS开发实现转盘功能
程序员文章站
2022-06-30 10:02:18
本文实例为大家分享了ios实现转盘功能的具体代码,供大家参考,具体内容如下今天给同学们讲解一下一个转盘选号的功能,直接上代码直接看viewcontroller#pragma mark - 如果要旋转那...
本文实例为大家分享了ios实现转盘功能的具体代码,供大家参考,具体内容如下
今天给同学们讲解一下一个转盘选号的功能,直接上代码直接看
viewcontroller
#pragma mark - 如果要旋转那就第一考虑锚点 核心动画看到的都是假象 真实的位置并没有发生改变 // // viewcontroller.m // 5-网易转盘的实现 // // created by jordan zhou on 2018/10/10. // copyright © 2018年 jordan zhou. all rights reserved. // #import "viewcontroller.h" #import "zzwheelview.h" @interface viewcontroller () /** 展示的view */ @property (nonatomic, strong) zzwheelview *wheelview; @end @implementation viewcontroller - (ibaction)start:(id)sender { [self.wheelview start]; } - (ibaction)stop:(id)sender { [self.wheelview pause]; } #pragma mark - 懒加载 - (zzwheelview *)wheelview { if (!_wheelview) { _wheelview = [zzwheelview wheelview]; _wheelview.center = self.view.center; } return _wheelview; } - (void)viewdidload { [super viewdidload]; [self.view addsubview:self.wheelview]; } @end
zzwheelview
// // zzwheelview.h // 5-网易转盘的实现 // // created by jordan zhou on 2018/10/10. // copyright © 2018年 jordan zhou. all rights reserved. // #import <uikit/uikit.h> @interface zzwheelview : uiview + (instancetype)wheelview; - (void)start; - (void)pause; @end // zzwheelview.m // 5-网易转盘的实现 // // created by jordan zhou on 2018/10/10. // copyright © 2018年 jordan zhou. all rights reserved. // #import "zzwheelview.h" #import "zzwheelbutton.h" @interface zzwheelview()<caanimationdelegate> @property (weak, nonatomic) iboutlet uiimageview *centerview; @property (nonatomic, weak) uibutton *selbtn; @property (nonatomic, strong) cadisplaylink *link; @end @implementation zzwheelview #pragma mark - 懒加载 - (cadisplaylink *)link { if (_link == nil) { _link = [cadisplaylink displaylinkwithtarget:self selector:@selector(anglechange)]; [_link addtorunloop:[nsrunloop mainrunloop] formode:nsdefaultrunloopmode]; } return _link; } + (instancetype)wheelview { return [[nsbundle mainbundle] loadnibnamed:@"zzwheelview" owner:nil options:nil][0]; } #warning - 注意这个方法只是加载xib的时候会调用,但是并没有连好线 //- (instancetype)initwithcoder:(nscoder *)adecoder //{ // if (self = [super initwithcoder:adecoder]) { // nslog(@"-%@",_centerview); // } // return self; //} - (void)awakefromnib { [super awakefromnib]; _centerview.userinteractionenabled = yes; cgfloat btnw = 68; cgfloat btnh = 143; cgfloat wh = self.bounds.size.width; // 加载大图片 uiimage *bigimage = [uiimage imagenamed:@"luckyastrology"]; // 加载大图片 uiimage *selbigimage = [uiimage imagenamed:@"luckyastrologypressed"]; // 获取当前使用的图片像素和点的比例 cgfloat scale = [uiscreen mainscreen].scale; cgfloat imagew = bigimage.size.width / 12 * scale; cgfloat imageh = bigimage.size.height * scale; // cgimageref image:需要裁减的图片 // rect:裁减区域 // 裁减区域是以像素为基准 // cgimagecreatewithimageinrect(cgimageref image, cgrect rect) // 添加按钮 for (int i = 0; i < 12; i++) { zzwheelbutton *btn = [zzwheelbutton buttonwithtype:uibuttontypecustom]; // 设置按钮的位置 btn.layer.anchorpoint = cgpointmake(0.5, 1); btn.bounds = cgrectmake(0, 0, btnw, btnh); btn.layer.position = cgpointmake(wh * 0.5, wh * 0.5); // 按钮的旋转角度 cgfloat radion = (30 * i) / 180.0 * m_pi; btn.transform = cgaffinetransformmakerotation(radion); [_centerview addsubview:btn]; // 加载按钮的图片 // 计算裁减区域 cgrect clipr = cgrectmake(i * imagew, 0, imagew, imageh); // 裁减图片 cgimageref imgr = cgimagecreatewithimageinrect(bigimage.cgimage, clipr); uiimage *image = [uiimage imagewithcgimage:imgr]; // 设置按钮的图片 [btn setimage:image forstate:uicontrolstatenormal]; // 设置选中状态下图片 imgr = cgimagecreatewithimageinrect(selbigimage.cgimage, clipr); image = [uiimage imagewithcgimage:imgr]; // 设置按钮的图片 [btn setimage:image forstate:uicontrolstateselected]; // 设置选中背景图片 [btn setbackgroundimage:[uiimage imagenamed:@"luckyrototeselected"] forstate:uicontrolstateselected]; // 监听按钮的点击 [btn addtarget:self action:@selector(btnclick:) forcontrolevents:uicontroleventtouchupinside]; // 默认选中第一个 if (i == 0) { [self btnclick:btn]; } } } - (void)btnclick:(uibutton *)btn { _selbtn.selected = no; btn.selected = yes; _selbtn = btn; } #pragma mark - 开始旋转 - (void)start { self.link.paused = no; } // 1.搞个定时器,每隔一段时间就旋转一定的角度,1秒旋转45° #pragma mark - 暂停旋转 - (void)pause { self.link.paused = yes; } #pragma mark - 每隔一段时间旋转一定的角度 - (void)anglechange { // 每一次调用旋转多少 45 \ 60.0 cgfloat angle = (45 / 60.0) * m_pi / 180.0; _centerview.transform = cgaffinetransformrotate(_centerview.transform, angle); } #pragma mark - 点击开始选号的时候 - (ibaction)startpicker:(id)sender { // 不需要定时器旋转 self.link.paused = yes; // 中间的转盘快速的旋转,并且不需要与用户交互 cabasicanimation *anim = [cabasicanimation animation]; anim.keypath = @"transform.rotation"; anim.tovalue = @(m_pi * 2 * 3); anim.duration = 0.5; anim.delegate = self; [_centerview.layer addanimation:anim forkey:nil]; // 点击哪个星座,就把当前星座指向中心点上面 // m_pi 3.14 // 根据选中的按钮获取旋转的度数, // 通过transform获取角度 cgfloat angle = atan2(_selbtn.transform.b, _selbtn.transform.a); // 旋转转盘 _centerview.transform = cgaffinetransformmakerotation(-angle); } - (void)animationdidstop:(caanimation *)anim finished:(bool)flag { dispatch_after(dispatch_time(dispatch_time_now, (int64_t)(1 * nsec_per_sec)), dispatch_get_main_queue(), ^{ self.link.paused = no; }); } @end
zzwheelbutton
// // zzwheelbutton.m // 5-网易转盘的实现 // // created by jordan zhou on 2018/10/10. // copyright © 2018年 jordan zhou. all rights reserved. // #import "zzwheelbutton.h" @implementation zzwheelbutton // 寻找最合适的view - (uiview *)hittest:(cgpoint)point withevent:(uievent *)event { cgfloat btnw = self.bounds.size.width; cgfloat btnh = self.bounds.size.height; cgfloat x = 0; cgfloat y = btnh / 2; cgfloat w = btnw; cgfloat h = y; cgrect rect = cgrectmake(x, y, w, h); if (cgrectcontainspoint(rect, point)) { return nil; }else{ return [super hittest:point withevent:event]; } } // 设置uiimageview的尺寸 // contentrect:按钮的尺寸 - (cgrect)imagerectforcontentrect:(cgrect)contentrect { // 计算uiimageview控件尺寸 cgfloat imagew = 40; cgfloat imageh = 46; cgfloat imagex = (contentrect.size.width - imagew) * 0.5; cgfloat imagey = 20; return cgrectmake(imagex, imagey, imagew, imageh); } // 取消高亮状态 - (void)sethighlighted:(bool)highlighted{} @end
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 如何解决.vue文件url引用文件的问题
下一篇: vue 项目接口管理的实现