iOS開發(fā)-轉(zhuǎn)盤功能的實現(xiàn)

今天給同學們講解一下一個轉(zhuǎn)盤選號的功能那么廢話不多說直接上代碼直接看~

iOS開發(fā)-網(wǎng)易轉(zhuǎn)盤.gif

ViewController

#pragma mark - 如果要旋轉(zhuǎn)那就第一考慮錨點 核心動畫看到的都是假象 真實的位置并沒有發(fā)生改變

//
//  ViewController.m
//  5-網(wǎng)易轉(zhuǎn)盤的實現(xiàn)
//
//  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

CDEBBA1F-4159-46FC-8FC7-FD3A31576845.png
//
//  ZZWheelView.h
//  5-網(wǎng)易轉(zhuǎn)盤的實現(xiàn)
//
//  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-網(wǎng)易轉(zhuǎn)盤的實現(xiàn)
//
//  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的時候會調(diào)用派殷,但是并沒有連好線
//- (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:裁減區(qū)域
    // 裁減區(qū)域是以像素為基準
    // 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);
        
        // 按鈕的旋轉(zhuǎn)角度
        CGFloat radion = (30 * i) / 180.0 * M_PI;
        
        btn.transform = CGAffineTransformMakeRotation(radion);
        
        [_centerView addSubview:btn];
        
        // 加載按鈕的圖片
        // 計算裁減區(qū)域
        CGRect clipR = CGRectMake(i * imageW, 0, imageW, imageH);
        
        // 裁減圖片
        CGImageRef imgR =  CGImageCreateWithImageInRect(bigImage.CGImage, clipR);
        
        UIImage *image = [UIImage imageWithCGImage:imgR];
        
        // 設置按鈕的圖片
        [btn setImage:image forState:UIControlStateNormal];
        
        // 設置選中狀態(tài)下圖片
        imgR = CGImageCreateWithImageInRect(selBigImage.CGImage, clipR);
        
        image = [UIImage imageWithCGImage:imgR];
        
        // 設置按鈕的圖片
        [btn setImage:image forState:UIControlStateSelected];
        
        // 設置選中背景圖片
        [btn setBackgroundImage:[UIImage imageNamed:@"LuckyRototeSelected"] forState:UIControlStateSelected];
        
        // 監(jiān)聽按鈕的點擊
        [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 - 開始旋轉(zhuǎn)
- (void)start
{
    self.link.paused = NO;
}

// 1.搞個定時器肠骆,每隔一段時間就旋轉(zhuǎn)一定的角度,1秒旋轉(zhuǎn)45°

#pragma mark - 暫停旋轉(zhuǎn)
- (void)pause
{
    self.link.paused = YES;
}

#pragma mark - 每隔一段時間旋轉(zhuǎn)一定的角度
- (void)angleChange
{
    // 每一次調(diào)用旋轉(zhuǎn)多少 45 \ 60.0
    CGFloat angle = (45 / 60.0) * M_PI / 180.0;
    
    _centerView.transform = CGAffineTransformRotate(_centerView.transform, angle);
}

#pragma mark - 點擊開始選號的時候
- (IBAction)startPicker:(id)sender {
    
    // 不需要定時器旋轉(zhuǎn)
    self.link.paused = YES;
    
    // 中間的轉(zhuǎn)盤快速的旋轉(zhuǎn)构灸,并且不需要與用戶交互
    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
    // 根據(jù)選中的按鈕獲取旋轉(zhuǎn)的度數(shù),
    // 通過transform獲取角度
    CGFloat angle = atan2(_selBtn.transform.b, _selBtn.transform.a);
    
    // 旋轉(zhuǎn)轉(zhuǎn)盤
    _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-網(wǎng)易轉(zhuǎn)盤的實現(xiàn)
//
//  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);
}

// 取消高亮狀態(tài)
- (void)setHighlighted:(BOOL)highlighted{}
@end

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末髓废,一起剝皮案震驚了整個濱河市履澳,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌糖赔,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,816評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件轩端,死亡現(xiàn)場離奇詭異放典,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評論 3 385
  • 文/潘曉璐 我一進店門奋构,熙熙樓的掌柜王于貴愁眉苦臉地迎上來壳影,“玉大人,你說我怎么就攤上這事弥臼⊙邕郑” “怎么了?”我有些...
    開封第一講書人閱讀 158,300評論 0 348
  • 文/不壞的土叔 我叫張陵径缅,是天一觀的道長掺栅。 經(jīng)常有香客問我,道長纳猪,這世上最難降的妖魔是什么氧卧? 我笑而不...
    開封第一講書人閱讀 56,780評論 1 285
  • 正文 為了忘掉前任,我火速辦了婚禮兆旬,結(jié)果婚禮上假抄,老公的妹妹穿的比我還像新娘怎栽。我一直安慰自己丽猬,他們只是感情好,可當我...
    茶點故事閱讀 65,890評論 6 385
  • 文/花漫 我一把揭開白布熏瞄。 她就那樣靜靜地躺著脚祟,像睡著了一般。 火紅的嫁衣襯著肌膚如雪强饮。 梳的紋絲不亂的頭發(fā)上由桌,一...
    開封第一講書人閱讀 50,084評論 1 291
  • 那天,我揣著相機與錄音邮丰,去河邊找鬼行您。 笑死,一個胖子當著我的面吹牛剪廉,可吹牛的內(nèi)容都是我干的娃循。 我是一名探鬼主播,決...
    沈念sama閱讀 39,151評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼斗蒋,長吁一口氣:“原來是場噩夢啊……” “哼捌斧!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起泉沾,我...
    開封第一講書人閱讀 37,912評論 0 268
  • 序言:老撾萬榮一對情侶失蹤捞蚂,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后跷究,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體姓迅,經(jīng)...
    沈念sama閱讀 44,355評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,666評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了丁存。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片色冀。...
    茶點故事閱讀 38,809評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖柱嫌,靈堂內(nèi)的尸體忽然破棺而出锋恬,到底是詐尸還是另有隱情,我是刑警寧澤编丘,帶...
    沈念sama閱讀 34,504評論 4 334
  • 正文 年R本政府宣布与学,位于F島的核電站,受9級特大地震影響嘉抓,放射性物質(zhì)發(fā)生泄漏索守。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,150評論 3 317
  • 文/蒙蒙 一抑片、第九天 我趴在偏房一處隱蔽的房頂上張望卵佛。 院中可真熱鬧,春花似錦敞斋、人聲如沸截汪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽衙解。三九已至,卻和暖如春焰枢,著一層夾襖步出監(jiān)牢的瞬間蚓峦,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,121評論 1 267
  • 我被黑心中介騙來泰國打工济锄, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留暑椰,地道東北人。 一個月前我還...
    沈念sama閱讀 46,628評論 2 362
  • 正文 我出身青樓荐绝,卻偏偏與公主長得像一汽,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子很泊,可洞房花燭夜當晚...
    茶點故事閱讀 43,724評論 2 351

推薦閱讀更多精彩內(nèi)容

  • 1角虫、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明先生_X自主閱讀 15,971評論 3 119
  • 本打算把自己所有的操作步驟都寫出來,想想也沒必要委造,網(wǎng)上很多很全面的知識點戳鹅。總結(jié)了一下自己遇到的一些問題吧昏兆。 安裝G...
    饑人谷_曾萍閱讀 230評論 0 2
  • Sin lixf buh rzeud gai zenxmes banh! Sin lixf des hoah ga...
    Motguix閱讀 276評論 0 0
  • 17高考臨近枫虏,微信朋友圈寫滿了各種祝福,叮嚀,和建議隶债。 祝柑谒考生考試大吉,叮嚀家長考前禁忌死讹,建議私家車為高考讓行瞒滴,...
    子非魚lily閱讀 192評論 0 3