幸運大轉盤

一.搭建框架

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.點擊警示框的肯定按鈕後 讓定時器啓動 轉盤勻速轉動