iOS九宫格抽奖转盘
2018-09-04 本文已影响684人
喝酸奶舔下盖
需求
公司最近有需求做个转盘抽奖，写了个指针转盘，效果一般，就写了个九宫格样式的抽奖转盘。支持网络图片和本地图片加载。（不足之后请大佬指点下。三扣三扣😄）
抽奖.gif
核心代码
背景是两张图片轮换。然后便利图片数组，新建对应的imageView，点击开始抽奖添加定时器，定时器选中每个奖项时修改其状态，最后一圈修改定时器的间隔时间，让其渐停。主要实现代码：
- (void)initLuckViewSubViews {
dispatch_async(dispatch_get_main_queue(), ^{
if ([[self.borderImageView subviews] count]) {
[self.borderImageView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
}
});
dispatch_async(dispatch_get_main_queue(), ^{
CGFloat topMarge = (SCREEN_WIDTH - 40) * 3 / 28 + 3; //button距离顶部边距, 2为btn到黑边框距离
CGFloat leftMarge = (SCREEN_WIDTH - 40) / 7 + 2; //button距离左边距, 2为btn到黑边框距离
CGFloat btnSpace = 1.5f; //button之间的距离
CGFloat btnw = (SCREEN_WIDTH - 20 * 2 - leftMarge * 2 - btnSpace * 2)/3;
CGFloat margeW = 0; // imageView与button的边框宽度
NSArray *prizeImageArr = self.localImageArray ? : self.urlImageArray;
for (int i = 0; i < prizeImageArr.count + 1; i++) {
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
[btn setImageEdgeInsets:UIEdgeInsetsMake(margeW, margeW, margeW, margeW)];
CGFloat x = leftMarge + btnSpace * (i % 3) + (i % 3) * btnw;
CGFloat y = topMarge + btnSpace * (i / 3) + (i / 3) * btnw;
CGFloat width = btnw;
CGFloat height = btnw;
btn.frame = CGRectMake(x, y, width, height);
[btn setImage:[UIImage imageNamed:@"v1.2.1_抽奖高亮"] forState:UIControlStateSelected];
[btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
self.borderImageView.userInteractionEnabled = YES;
[self.borderImageView addSubview:btn];
if (i == 4) {
[btn setTitle:@"" forState:UIControlStateNormal];
[btn setImage:[UIImage imageNamed:@"v1.2.1_抽奖按钮"] forState:UIControlStateNormal];
btn.tag = 10;
self.startBtn = btn;
continue;
}
btn.tag = i > 4? i -1: i;
if (self.urlImageArray) {
[btn sd_setBackgroundImageWithURL:[NSURL URLWithString:[prizeImageArr objectAtIndex:i > 4? i -1: i]] forState:UIControlStateNormal];
} else {
[btn setBackgroundImage:[UIImage imageNamed:[prizeImageArr objectAtIndex:i > 4? i -1: i]] forState:UIControlStateNormal];
}
switch (i) {
case 0:
self->btn0 = btn;
break;
case 1:
self->btn1 = btn;
break;
case 2:
self->btn2 = btn;
break;
case 3:
self->btn3 = btn;
break;
case 5:
self->btn4 = btn;
break;
case 6:
self->btn5 = btn;
break;
case 7:
self->btn6= btn;
break;
case 8:
self->btn7 = btn;
break;
default:
break;
}
[self.btnArray addObject:btn];
}
[self TradePlacesWithBtn1:self->btn3 btn2:self->btn4];
[self TradePlacesWithBtn1:self->btn4 btn2:self->btn7];
[self TradePlacesWithBtn1:self->btn5 btn2:self->btn6];
});
}
- (void)btnClick:(UIButton *)btn {
if (btn.tag == 10) {
//点击开始抽奖
currentTime = result;
self.time = 0.1;
[self.startBtn setEnabled:NO];
[self.backButton setEnabled:NO];
dispatch_async(dispatch_get_global_queue(0, 0), ^{
self->startTimer = [NSTimer scheduledTimerWithTimeInterval:self.time target:self selector:@selector(start:) userInfo:nil repeats:YES];
[[NSRunLoop currentRunLoop] run];
});
} else {
if ([self.delegate respondsToSelector:@selector(luckSelectBtn:)]) {
[self.delegate luckSelectBtn:btn];
}
}
}
- (void)start:(NSTimer *)timer {
UIButton *oldBtn = [self.btnArray objectAtIndex:currentTime % self.btnArray.count];
currentTime++;
UIButton *btn = [self.btnArray objectAtIndex:currentTime % self.btnArray.count];
dispatch_async(dispatch_get_main_queue(), ^{
oldBtn.selected = NO;
btn.selected = YES;
});
if (currentTime > stopTime) { //抽奖结果
self.TimeoutFlag = (stopTime == 79 + self.stopCount) ? YES : NO;
[timer invalidate];
dispatch_async(dispatch_get_main_queue(), ^{
[self.startBtn setEnabled:YES];
[self.backButton setEnabled:YES];
});
result = currentTime%self.btnArray.count;
[self stopWithCount:currentTime%self.btnArray.count];
return;
}
if (currentTime > stopTime - 10) {
self.time += 0.01 * (currentTime + 10 - stopTime); //动画效果由快变慢
[timer invalidate];
dispatch_async(dispatch_get_global_queue(0, 0), ^{
self->startTimer = [NSTimer scheduledTimerWithTimeInterval:self.time target:self selector:@selector(start:) userInfo:nil repeats:YES];
[[NSRunLoop currentRunLoop] run];
});
}
}
- (void)stopWithCount:(NSInteger)count {
if ([self.delegate respondsToSelector:@selector(luckView:didStopWithArrayCount:)]) {
if (!self.TimeoutFlag) {
self.lotteryNumber = self.lotteryNumber - 1;
}
dispatch_time_t delayTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0/*延迟执行时间*/ * NSEC_PER_SEC));
__weak typeof(self)weakSelf = self;
dispatch_after(delayTime, dispatch_get_main_queue(), ^{
[weakSelf.delegate luckView:self didStopWithArrayCount:count];
});
}
}
使用
- (void)loadLuckView {
WXWLuckView *luckView = [[WXWLuckView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight)];
luckView.center = self.view.center;
//网络图片地址
// luckView.urlImageArray = [@[@"http://oquujevnh.bkt.clouddn.com/first.jpg",
// @"http://oquujevnh.bkt.clouddn.com/second.jpg",
// @"http://oquujevnh.bkt.clouddn.com/third.jpg",
// @"http://oquujevnh.bkt.clouddn.com/fourth.jpg",
// @"http://oquujevnh.bkt.clouddn.com/fifth.jpg",
// @"http://oquujevnh.bkt.clouddn.com/sixth.jpg",
// @"http://oquujevnh.bkt.clouddn.com/seventh.jpg",
// @"http://oquujevnh.bkt.clouddn.com/eighth.jpg"]mutableCopy];
//本地图片
luckView.localImageArray = [@[@"v1.2.1_1天",
@"v1.2.1_5天",
@"v1.2.1_7天",
@"v1.2.1_月卡",
@"v1.2.1_季卡",
@"v1.2.1_年卡",
@"v1.2.1_永久",
@"v1.2.1_大吉大利"] mutableCopy];
//抽奖结果提示信息
luckView.lotteryArray = @[@"加速器 1天",
@"加速器 5天",
@"加速器 7天",
@"加速器 月卡",
@"加速器 季卡",
@"加速器 年卡",
@"永久免费卡",
@"大吉大利，明天再来",];
//指定抽奖结果,对应数组中的元素
luckView.stopCount = 5;
//设置抽奖次数
luckView.lotteryNumber = 5;
//设置代理
luckView.delegate = self;
[self.view addSubview:luckView];
}
#pragma mark - LuckViewDelegate
/**
* 中奖
*
*@param count 返回结果数组的下标
*/
- (void)luckView:(UIView *)luckView didStopWithArrayCount:(NSInteger)count{
NSLog(@"抽到了第%ld个",(long)count);
WXWLuckView *luck = (WXWLuckView *)luckView;
__weak typeof(self)weakSelf = self;
[luck showLotteryResults:^(NSInteger remainTime) {
NSLog(@"点击确认");
if (remainTime == 0) { //次数用完啦，少年赶快去充值吧
[weakSelf dismissViewControllerAnimated:NO completion:nil];
}
}];
}
/**
* 点击了数组中的第几个元素
*
* @param button 点击了第几个奖品
*/
- (void)luckSelectBtn:(UIButton *)button {
NSLog(@"点击了数组中的第%ld个元素",(long)button.tag);
}
//控件布局现在是写死的，只是根据我当前需求写的，后期有时间更新下
1.选中奖项可以通过设置lotteryArray修改提示语，默认x等奖；
2.通过设置stopCount选择抽中奖项；
3.urlImageArray为网络图片链接数组，localImageArray为本地图片数组；
4.lotteryNumber为抽奖次数，默认一次
5.pod使用
pod 'WXWLuckView', '~> 0.2.5'
