iOS开发实现转盘功能

本文实例为大家分享了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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2020-04-16

iOS实现新年抽奖转盘效果的思路

临近春节,相信不少app都会加一个新的需求--新年抽奖 不多废话,先上GIF效果图 DEMO链接 1. 跑马灯效果 2. 抽奖效果 实现步骤: 一.跑马灯效果 其实很简单,就是通过以下两张图片,用NSTimer无限替换,达到跑马灯的效果 实现代码: _rotaryTable = [[UIImageView alloc] initWithFrame:CGRectMake((kScreenWidth-366*XT)/2, 218*XT, 366*XT, 318*XT)]; _rotaryTable.

iOS实现转盘效果

本文实例为大家分享了iOS实现转盘效果的具体代码,供大家参考,具体内容如下 Demo下载地址: iOS转盘效果 功能:实现了常用的iOS转盘效果,轮盘抽奖效果的实现,转盘可以暂停,旋转,已经快速旋转抽奖,选中的效果指向正上方. 效果图: 工程文件目录: 核心代码: // // ViewController.m // 转盘效果 // // Created by llkj on 2017/8/31. // Copyright © 2017年 LayneCheung. All rights reser

iOS实现轮盘动态效果

本文实例为大家分享了iOS实现轮盘动态效果的具体代码,供大家参考,具体内容如下 一个常用的绘图,主要用来打分之类的动画,效果如下. 主要是iOS的绘图和动画,本来想用系统自带动画实现呢,发现实现不了,用了其他办法延时并重绘视图没有成功,用了gcd延时,nsthread休眠,performselector delay 都不行.最后用了一个定时器实现类似效果,总感觉不太明智,以后应该考虑下对CALayer和 隐式动画的角度考虑下 #import <UIKit/UIKit.h> /** * 自定义变

基于JavaScript实现抽奖系统

用JavaScript实现一个简单的抽奖系统,有[开始]按钮和[停止]按钮. 功能: - 点开始按钮开始抽奖,随机出现奖品名称: - 点停止按钮即可停止抽奖: - 按下回车键可切换开始抽奖和停止抽奖. 效果 html代码: 创建html结构,最基础的要含有显示的奖品名称和开始.停止按钮. <!doctype html> <html> <head> <title>抽奖系统</title> <meta charset="utf-8&q

iOS实现动态元素的引导图效果

前言 最近越来越多的APP,已经抛弃掉第一次进入的3-4页的导入页面,而是另外采取了在功能页面悬浮一个动态效果来展示相应的功能点.这个模块主要是实现app首次进入时显示的动态的引导图,在用户进行右滑或者左滑的时候,屏幕上的一些元素做出相应的隐藏消失以及位置移动. 实现效果: 图片资源来自网络,侵权即删 先来看看是如何使用的,然后再介绍相关的方法及属性 NSMutableArray * elementsDataArr = [[NSMutableArray alloc] init]; /* 动画元素

iOS中自定义弹出pickerView效果(DEMO)

UIPickerView平常用的地方好像也不是很多,顶多就是一些需要选择的地方,这次项目需要这一个功能,我就单独写了一个简单的demo,效果图如下: 新增主页面弹出view,在主页面添加的代码 有个小问题就是第四个直接添加在主页弹出来的view好像被导航栏给覆盖了,我还没去研究,就着急的先吧功能写了.大家谅解下 最初版本 话说我终于弄了gif了,再也不要去截图每张图都发一遍了!! 这个demo呢,等于是可以拿来直接用的第三方了吧,只需要传数据就可以了,弹出的三个框显示的数据也不一样,我的封装能力

Android UI设计系列之自定义SwitchButton开关实现类似IOS中UISwitch的动画效果(2)

做IOS开发的都知道,IOS提供了一个具有动态开关效果的UISwitch组件,这个组件很好用效果相对来说也很绚丽,当我们去点击开关的时候有动画效果,但遗憾的是Android上并没有给我们提供类似的组件(听说在Android4.0的版本上提供了具有动态效果的开关组件,不过我还没有去看文档),如果我们想实现类似的效果那该怎么办了呢?看来又得去自定义了. 公司的产品最近一直在做升级,主要做的就是把界面做的更绚丽更美观给用户更好的体验(唉,顾客是上帝......),其中的设置功能中就有开关按钮,原来的开

ios的collection控件的自定义布局实现与设计

collection控件用来实现界面的各种自定义布局,最常用其作为横向.竖向的布局控件.很早之前,系统对于collection的支持并不是很好.所以自己实现了支持自定义布局.自定义cell的collection控件.自定义的collection可以满足所有的产品特殊需求及动态效果,例如在某些特殊情况下可能需要除选中cell之外的其它cell执行布局动画等.在collection的基础之上,我又实现了支持cell拖动.拖离窗体的tabview控件.本文主要介绍自定义collection的设计与实现

iOS动画解析之圆球加载动画XLBallLoading的实现

前言 当网页的页面大小较大,用户加载可能需要较长的时间,在这些情况下,我们一般会用到(加载)loading动画,提示于用户页面在加载中,本文将详细给大家介绍关于iOS圆球加载动画XLBallLoading实现的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.显示效果 二.原理分析 1.拆解动画 从效果图来看,动画可拆解成两部分:放大动画.位移动画 放大动画 比较简单,这里主要来分析一下位移动画 (1).先去掉缩放效果: 屏蔽放大效果 (2).去掉其中的一个圆球 现

iOS如何固定UITableView中cell.imageView.image的图片大小

前言 凡是进行iOS开发的,基本上都会遇到要展示列表,或者即使不是标准列表,但由于数量不固定,也需要如同列表一样从上往下显示.加载的情况.这些,都绕不过对UITableView的使用. 在iOS开发中UITableView可以说是使用最广泛的控件,我们平时使用的软件中到处都可以看到它的影子,类似于微信.QQ.新浪微博等软件基本上随处都是UITableView.当然它的广泛使用自然离不开它强大的功能. 我们经常在开发过程中会用到默认UITableView的cell.imageView.image,

iOS中利用CAGradientLayer绘制渐变色的方法实例

前言 以前不用自己切图,现在要自己切图,看到设计稿有好多不同规格的渐变色的背景,一个一个切的话好麻烦,没有想到iOS本来就可以实现渐变色.也就是今天的主角CAGradientLayer. 渐变色使用的类是CAGradientLayer,有两个要素,渐变颜色的起点和终点.渐变的颜色集合 简单示例: //设置渐变颜色 CAGradientLayer *gradientLayer = [CAGradientLayer layer]; gradientLayer.frame = view.bounds;

IOS 下获取 rootviewcontroller 的版本不同的问题解决办法

IOS 下获取 rootviewcontroller 的版本不同的问题解决办法 一般 原生的 [[UIApplication sharedApplication].keyWindow.rootViewController presentModalViewController:self animated:NO]; 可以 获取  系统的  rootviewcontroller 但 cocos2d-x 2.1.1 在 appcontroller.mm 内定义的 加载方法是 // Set RootVie

iOS利用UIBezierPath + CAAnimation实现路径动画效果

前言 上次给大家介绍了iOS利用UIBezierPath + CAAnimation实现路径动画效果的相关内容,今天实现一个根据心跳路径实现一个路径动画,让某一视图沿着路径进行运动.. 效果图如下: 核心代码 1-首先通过 drawRect 绘制心形路径 - (void)drawRect:(CGRect)rect { // Drawing code // 初始化UIBezierPath UIBezierPath *path = [UIBezierPath bezierPath]; // 首先设置