网易彩票，转盘实现

来源：互联网发布：rpc java 一般编辑：程序博客网时间：2024/05/17 02:20

今天要做的是：

网易彩票，转盘实现:

创建自定义的View以及xib,倒入素材（素材想要，可以联系我）这些都没什么好说的：

再去WheelView.xib中搭建界面

接着就是代码实现:

在WheelView.h中

#import <UIKit/UIKit.h>

@interface WheelView : UIView

//给外面创建可以快速创建xib的类方法
+ (instancetype)wheelsView;

@end

在WheeView.m中

#import "WheelView.h"

@implementation WheelView

//给外面创建可以快速创建xib的类方法
+ (instancetype)wheelsView
{
    //使用load方法，返回xib
    return [[[NSBundle mainBundle]loadNibNamed:@"WheelView" owner:nil options:nil]lastObject];
}

//重写init方法，有的人可能会用
- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        self = [[[NSBundle mainBundle]loadNibNamed:@"WheelView" owner:nil options:nil]lastObject];
    }
    return self;
}

@end

在ViewController.m中创建WheelView

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    //在view显示的时候，直接创建Xib
    WheelView *whView = [WheelView wheelsView];
    //使xib的center和view的center一样
    whView.center = self.view.center;
    //将view添加到view中
    [self.view addSubview:whView];
}

运行

接下来完成内部btn的搭建,代码如下

#import "WheelView.h"

@interface WheelView()
@property (weak, nonatomic) IBOutlet UIImageView *contentV;
@property (weak, nonatomic) UIButton *selBtn;
@end

@implementation WheelView

- (void)awakeFromNib
{
    //调用setUP方法，创建按钮
    [self setUP];
}

//给外面创建可以快速创建xib的类方法
+ (instancetype)wheelsView
{
    //使用load方法，返回xib
    return [[[NSBundle mainBundle]loadNibNamed:@"WheelView" owner:nil options:nil]lastObject];

}

//重写init方法，有的人可能会用
- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        self = [[[NSBundle mainBundle]loadNibNamed:@"WheelView" owner:nil options:nil]lastObject];
        [self setUP];
    }
    return self;
}

//创建按钮方法
- (void)setUP
{
    self.contentV.userInteractionEnabled = YES;
    //设置按钮的尺寸,宽
    CGFloat btnW = 68;
    //设置按钮的尺寸,高
    CGFloat btnH = 148;
    //设置按钮的旋转角度
    CGFloat angle = 0;

    for (int i = 0; i<12; i++) {
        //创建自定义按钮
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
        //设置按钮尺寸
        btn.bounds = CGRectMake(0, 0, btnW, btnH);
        //设置按钮的定位点
        btn.layer.position = CGPointMake(self.bounds.size.width * 0.5, self.bounds.size.height * 0.5)
        ;
        //设置按钮的锚点
        btn.layer.anchorPoint = CGPointMake(0.5, 1);
        //给按钮添加监听事件
        [btn addTarget:self action:@selector(selcetBtn:) forControlEvents:UIControlEventTouchUpInside];
        //将按钮添加到视图中
        [self.contentV addSubview:btn];
        //设置按钮选中的时候显示的图片
        [btn setBackgroundImage:[UIImage imageNamed:@"LuckyRototeSelected"] forState:UIControlStateSelected];
        //设置按钮的旋转角度
        btn.transform = CGAffineTransformMakeRotation(angle/180 * M_PI);
        angle +=30;

    }
}

//设置按钮的选中状态，当点击下一个按钮，下一个按钮选中，此按钮不被选中
- (void)selcetBtn:(UIButton *)btn
{
    self.selBtn.selected = NO;
    btn.selected = YES;
    self.selBtn = btn;
}

上面的contentV是拖线，设置的属性

效果如下:

下面就是要把按钮上面的那些图片放上去了，但是美工为了省事给了这个素材，那么就要自己切割了

素材

代码实现如下：

/创建按钮方法
- (void)setUP
{
    self.contentV.userInteractionEnabled = YES;
    //设置按钮的尺寸,宽
    CGFloat btnW = 68;
    //设置按钮的尺寸,高
    CGFloat btnH = 148;
    //设置按钮的旋转角度
    CGFloat angle = 0;

    UIImage *showImage = [UIImage imageNamed:@"LuckyAstrology"];
    UIImage *selImage = [UIImage imageNamed:@"LuckyAstrologyPressed"];

    //设置裁剪尺寸
    CGFloat scale = [UIScreen mainScreen].scale;
    CGFloat clipW = showImage.size.width /12 * scale;
    CGFloat clipH = showImage.size.height * scale;
    CGFloat clipX = 0;
    CGFloat clipY = 0;

    for (int i = 0; i<12; i++) {
        //创建自定义按钮
        WheelButton *btn = [WheelButton buttonWithType:UIButtonTypeCustom];
        //设置按钮尺寸
        btn.bounds = CGRectMake(0, 0, btnW, btnH);
        //设置按钮的定位点
        btn.layer.position = CGPointMake(self.bounds.size.width * 0.5, self.bounds.size.height * 0.5)
        ;
        //设置按钮的锚点
        btn.layer.anchorPoint = CGPointMake(0.5, 1);

        //裁剪尺寸
        clipX = i * clipW;
        CGRect rect = CGRectMake(clipX, clipY, clipW, clipH);
        //裁剪图片
        CGImageRef imagshow = CGImageCreateWithImageInRect(showImage.CGImage, rect);
        [btn setImage:[UIImage imageWithCGImage:imagshow] forState:UIControlStateNormal];
        //裁剪图片
        CGImageRef imagCip = CGImageCreateWithImageInRect(selImage.CGImage, rect);
        [btn setImage:[UIImage imageWithCGImage:imagCip] forState:UIControlStateSelected];



        //给按钮添加监听事件
        [btn addTarget:self action:@selector(selcetBtn:) forControlEvents:UIControlEventTouchUpInside];
        //将按钮添加到视图中
        [self.contentV addSubview:btn];
        //设置按钮选中的时候显示的图片
        [btn setBackgroundImage:[UIImage imageNamed:@"LuckyRototeSelected"] forState:UIControlStateSelected];
        //设置按钮的旋转角度
        btn.transform = CGAffineTransformMakeRotation(angle/180 * M_PI);
        angle +=30;

        //如果是第一个按钮选中
        if (i == 0) {
            [self selcetBtn:btn];
        }

    }
}

这里面自定义了UIButton

在WheelButton.h中

#import <UIKit/UIKit.h>

@interface WheelButton : UIButton
- (CGRect)imageRectForContentRect:(CGRect)contentRect;
@end

在WheelButton.m中

#import "WheelButton.h"

@implementation WheelButton

//指定按钮图像边界
- (CGRect)imageRectForContentRect:(CGRect)contentRect
{
    //自定义此方法
    CGFloat w = 40;
    CGFloat h = 50;
    CGFloat x = (contentRect.size.width - w) * 0.5;
    CGFloat y = 20;
    return CGRectMake(x, y, w, h);
}

@end

效果如下

接下来就是让转盘转起来，代码如下

在WheelView.h中

#import <UIKit/UIKit.h>

@interface WheelView : UIView

//给外面创建可以快速创建xib的类方法
+ (instancetype)wheelsView;

//开始旋转
- (void)start;

//停止旋转
- (void)stop;

@end

在WheelView.m中

#import "WheelView.h"
#import "WheelButton.h"

@interface WheelView()
@property (weak, nonatomic) IBOutlet UIImageView *contentV;
@property (weak, nonatomic) UIButton *selBtn;
@property (nonatomic,strong) CADisplayLink *link;
@end

@implementation WheelView

- (IBAction)startChange:(id)sender {
    self.link.paused = YES;
    CABasicAnimation *anim = [CABasicAnimation animation];
    anim.keyPath = @"transform.rotation";
    anim.toValue = @(M_PI * 3);
    anim.duration = 1;
    anim.delegate = self;
    [self.contentV.layer addAnimation:anim forKey:nil];
}
//当核心动画停止的时候调用
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    NSLog(@"%s",__func__);
    //拿到选中按钮的角度
    CGAffineTransform transform = self.selBtn.transform;
    CGFloat angle = atan2f(transform.b, transform.a);
    //让contV倒着旋转回去
    self.contentV.transform = CGAffineTransformMakeRotation(-angle);
}

- (CADisplayLink *)link
{
    if (_link == nil) {
        CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(linkChange)];
        [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
        _link = link;
    }
    return _link;
}

- (void)linkChange
{
    self.contentV.transform = CGAffineTransformRotate(self.contentV.transform, M_PI/200.0);
}

- (void)start
{
    self.link.paused = NO;
}
- (void)stop
{
    self.link.paused = YES;
}

ViewController.m

#import "ViewController.h"
#import "WheelView.h"

@interface ViewController ()
@property (weak, nonatomic) WheelView *whV;
@end

@implementation ViewController
- (IBAction)stopBtn:(id)sender {
    [self.whV stop];
}
- (IBAction)startBtn:(id)sender {
    [self.whV start];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    //在view显示的时候，直接创建Xib
    WheelView *whView = [WheelView wheelsView];
    _whV = whView;
    //使xib的center和view的center一样
    whView.center = self.view.center;
    //将view添加到view中
    [self.view addSubview:whView];
}
效果图

第一次写，写的不好，多多包涵。

1 0