网易彩票,转盘实现:
创建自定义的View以及xib,倒入素材(素材想要,可以联系我)这些都没什么好说的:
再去WheelView.xib中搭建界面
接着就是代码实现:
在WheelView.h中
#import
@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
@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
@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];
}
效果图
第一次写,写的不好,多多包涵。