幸运大转盘

一.搭建框架

1. 设置整个view的背景图片   @“LuckyBackground”

  有三种设置方式

 1>拖一个imageView到控制器中 给imageView设置图片

 2>设置view的背景颜色 用到方法 

self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"LuckyBackground"]];

3>设置view上layer的内容（本次采用此方法）

self.view.layer.contents = (__bridge id _Nullable)([UIImage imageNamed:@"LuckyBackground"].CGImage);

2.设置上面的星座按钮

1>图片名称 LuckyThreeButton 在这里直接拖上去 设置frame

2>设置按钮的大小（按钮大小为67*67） 并给按钮设置 高亮状态下的图片（图片名称 LuckyMidPressed）

3.设置中间的转盘

 1>用xib来建立中间的转盘按钮 并建立一个类来管理

往里面拖一个UIView设置大小为（286*286） 

拖下面这张图片作背景图片

再拖下面这张锯齿图片用来放button

二.用代码添加转盘上的星座

1.分析

能被选中 说明每一个星座都是按钮

在哪一个方法里面设置按钮？怎么设置按钮呢？

1>在哪一个方法里面设置按钮？

• 在控制器中在 - (void)viewDidLoad 中添加子控件

• 在xib中在 -(void)awakeFromNib 中添加子控件 

2>怎么设置按钮呢？

•  分析 每一个按钮大小都同样 只有位置不同 可是他们的位置分布有规律  考虑用for循环来建立按钮   按钮大小（68*143）而后将每一个按钮按照必定角度旋转 

•  而后设置锚点 和中心点 让按钮的下面的中心点 在    XIB  view的中心点上

btn.center =self.center

btn.layer.anchorPoint=CGPointMake(0.5, 1)

• 旋转每一个按钮 旋转角度为

     CGFloat angle = 2*M_PI/12 * i;

btn.transform = CGAffineTransformMakeRotation(angle);

• 给按钮设置正常状态下的图片

图片是一整张连在一块儿的 因此要把图片进行裁决  而后再把裁剪后的图片设置上去

• 用一个返回值为UIImage的方法去裁剪图片

- (UIImage*)clipimage:(NSString * )imageName andindex:(NSInteger)index

• (NSString * )imageName 表示要裁剪的图片的名称

• (NSInteger)index 把索引传过去（由于裁剪图片时的X值和它的索引有关）

• CGImageRef imageRef = CGImageCreateWithImageInRect(img.CGImage, rect); 表示在某个区域里面获取图片 获得的时一个像素位图

• 设置好button的图片后会发现图片是这样的

太大了 图片都挤到一块儿了 

 建立一个类继承UIButton 重写

- (CGRect)imageRectForContentRect:(CGRect)contentRect

这个方法 （这个是返回button里面图片大小的方法，重写此方法 能够使button里面的图片变小）

- (CGRect)imageRectForContentRect:(CGRect)contentRect{
    CGFloat w = 44;
    CGFloat h = 47;
    CGFloat y = 30;
    CGFloat x = (contentRect.size.width - w) * 0.5;
   
    CGRect rect =CGRectMake(x,y , w, h);
   

    return rect;

  

}

而后咱们建立button的时候 就用这个类去建立

(图片变小了)

• 而后设置btn的选中状态的图片 和背景图片 

选中状态下的图片也是一张 因此也须要裁剪 调用裁剪图片的那个方法便可

按钮基本设置好了  要把按钮添加到锯齿图片上

[self.wheelImage addSubview:btn];

点击星座 要让按钮变成选中状态 所以咱们须要给按钮添加一个监听方法 来设置他被选中了 仍是没有被选中

 [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];

而后去实现这个监听方法

- (void)btnClick:(UIButton * )sender{
    //把上一次选中的按钮恢复为no
    self.slectedBtn.selected = NO;
    // 设置本次选中的按钮
    sender.selected = YES;
    //传给标记按钮
    self.slectedBtn = sender;

}

• 而后让图片一直匀速旋转 

• 定时器方法有2个 一个上NSTimer （效果很差） 因此咱们选择第二种 CADisplayLink （每秒刷新60次）；

// 让view匀速旋转；
- (void)rotation{
    //设置一个定时器
    CADisplayLink * link =[CADisplayLink displayLinkWithTarget:self selector:@selector(nextTime)];
   

    [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];

    //后面转盘进行动画时 要让定时器中止 须要拿到定时器变量 所以用一个全局变量来保存

    self.link = link;

}

而后实现nextTime这个方法

在这个方法里面实现让转盘持续转动

- (void)nextTime{

   

内容

}

三. 给转盘添加动画

点击这个按钮后 给转盘添加动画 （这个按钮本身在xib里面添加 记住是添加在xib的view上 而不是锯齿图片上 不然按钮会和图片一块儿旋转  按钮大小（81*81））

分析：1.按下以后 是否是要中止转盘的匀速运动 （中止定时器） [self.link invalidate];

     2.执行动画的时候 是否是要让按钮不能点击

     

 加动画的几个步骤

1.建立动画

2.设置属性

•  动画要执行的操做－－－> 旋转  transform.rotation; 

•  动画要旋转的角度 旋转到－－－－> toValue (旋转2*M_PI 就是是旋转一圈 减去当前按钮的角度 就能让按钮旋转完毕后 停在12点方向)

• 执行动画的持续时间  

• 不能移除动画 否则动画执行完毕后 选中的按钮会回到初始的frame

• 设置代理 实现代理方法 让动画执行完毕后 弹出警示框

• 设置动画样式先快后慢  ani.timingFunction= [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];

3.把动画添加到要做用的layer上（记住是layer上）；

四 .  弹出警示框

1.在动画代理方法里面去实现

2.有2种方法去弹出 警示框 

• UIAlertView（已通过时 可是用起来比较简单）

• UIAlertController（比较复杂 须要用到代理 让控制器去弹出警示框）

3.点击警示框的肯定按钮后 让定时器启动 转盘匀速转动