iOS 客户端实现幸运大转盘(抽奖)

2017-01-14 10:20:18来源:http://www.jianshu.com/p/2534367cb5f3作者:本源道人人点击

第七城市
一个简单的抽奖案例
前言

先说一下程序实现抽奖这个事。据我目前了解到的情况,一般是由服务端实现抽奖的全部业务,客户端拿到抽奖结果展示给用户。嗯,可能有人会说,我在客户端点击抽奖了啊,结果是随机的啊,有一定的概率......
其实,一切都在服务端的掌控之中,抽奖结果可以是按照一定的概率随机产生,也可以不是。之前在广东的时候,听说过一个计算机实现抽奖的案例--“赌马”,我猜啊(简单猜测一下,或许不是这样的),每种可能的中奖结果计算机都会存储起来,然后呢,每种结果再对应所有用户计算出一个需要付出的中奖金额总额,再然后,拿出那个最小的中奖结果。当然啦,这个结果是不断变化的,据参与的人说,距离开奖时间越近,越可能中奖。这个抽奖案例恐怕就不是随机产生抽奖结果的了。


本案例的实现方式

作为客户端,当用户点击抽奖时,拿到服务端送过来的抽奖结果并旋转转盘,转盘再转到相应的扇区(抽奖结果)。


具体实现

先把头文件和定义的几个静态变量列出来


@interface ATLLotteryController ()<CAAnimationDelegate>
/** 转盘底盘 */
@property (nonatomic, weak) UIImageView *turntableImageView;
/** 转盘指针 */
@property (nonatomic, weak) UIImageView *pointerImageView;
@end
/** 转盘块的数量 */
static NSUInteger const kTurntablePieceCount = 6;
/** 本次旋转位置的角度 */
static CGFloat originAngle_ = 0;
/** 本次旋转的增量角度 */
static CGFloat incrementAngle_ = 0;
/** 每天抽奖总次数 */
static NSUInteger lotteryCount_ = 3;

1. 抽奖界面实现


实现代码如下:


-  (void)setupTurntableView
{
// 添加转盘
UIImageView *turntableImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"lottery_turntable"]];
turntableImageView.size = CGSizeMake(ATLScreenWidth*0.9, ATLScreenWidth*0.9);
turntableImageView.center = CGPointMake(ATLScreenWidth*0.5, ATLScreenHeight*0.5);
turntableImageView.layer.cornerRadius = turntableImageView.width * 0.5;
turntableImageView.layer.masksToBounds = YES;
[self.view addSubview:turntableImageView];
self.turntableImageView = turntableImageView;
// 添加转针
UIImageView *pointerImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"lottery_pointer"]];
CGFloat turntableWidth = turntableImageView.width;
pointerImageView.width = 150/489.0 * turntableWidth;
pointerImageView.height = 180/489.0 * turntableWidth;
pointerImageView.centerX = turntableImageView.centerX;
pointerImageView.centerY = turntableImageView.centerY;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(lotteryClick)];
[pointerImageView addGestureRecognizer:tap];
pointerImageView.userInteractionEnabled = YES;
[self.view addSubview:pointerImageView];
self.pointerImageView = pointerImageView;
// 幸运大转盘标语
UIImageView *sloganImageView = [UIImageView new];
sloganImageView.image = [UIImage imageNamed:@"lottery_slogan"];
[self.view addSubview:sloganImageView];
[sloganImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.view.mas_left);
make.right.equalTo(self.view.mas_right);
make.top.equalTo(self.view.mas_top).offset(ATLNavBarMaxY);
make.bottom.lessThanOrEqualTo(turntableImageView.mas_top);
}];
}

2. 产生随机增量角度


拿到服务端旋转结果(指针旋转到的扇区,由于客户端是顺时针旋转,这里按逆时针方向划分6个扇区分别为0~5这几个数字表示)。
简单模拟一下服务端产生抽奖结果如下:
/** 服务端送过来的结果(指针转到某一扇区)*/
- (unsigned int)resultPiece
{
// 0...5 共6扇区,设置每扇区的概率
// 0的概率: 0.001, 1的概率: 0.11, 2的概率: 0.005,3的概率: 0.15, 4的概率:0.05, 5的概率:0.684
unsigned int resultPiece = 0;
unsigned int random = arc4random() % 1000;
if (random < 1)
{
resultPiece = 0;
}
else if (random < 111)
{
resultPiece = 1;
}
else if (random < 116)
{
resultPiece = 2;
}
else if (random < 266)
{
resultPiece = 3;
}
else if (random < 316)
{
resultPiece = 4;
}
else
{
resultPiece = 5;
}
return resultPiece;
}

根据拿到的服务端结果计算出本次抽奖增量角度,代码如下:
- (CGFloat)randomIncrementAngle
{
unsigned int resultPiece = [self resultPiece]; // 抽奖结果,旋转到某一扇区
unsigned int incrementPiece; // 一个圆周内的增量扇区数,就是从初始位置再旋转几个扇区到指定的抽奖结果扇区
unsigned int originPiece = round((((originAngle_/M_PI) - floor(originAngle_/M_PI)) + (int)floor(originAngle_/M_PI) % 2) * kTurntablePieceCount * 0.5); // 这里采用弧度制计算初始扇区(转盘可能不止旋转一次,每旋转一次,弧度都是增加的。)
if (originPiece <= resultPiece)
{
incrementPiece = resultPiece - originPiece;
}
else
{
incrementPiece = resultPiece + kTurntablePieceCount - originPiece;
}
CGFloat incrementAngle = (M_PI*2 / kTurntablePieceCount * incrementPiece) + 2*M_PI*5; // 算出增量角度,为了用户体验更好些,增加了 2*M_PI*5 即5圈。
return incrementAngle;
}

3. 转盘旋转到指定的抽奖结果


下面就是让转盘动起来了,代码如下:


- (void)lotteryClick
{
if (lotteryCount_ == 0) {
[self lotteryHint:@"次数已经用完,请明天再来吧."];
return;
}
lotteryCount_ --;
self.pointerImageView.userInteractionEnabled = NO; // 防止转动过程中用户点击抽奖
//产生随机增量角度
incrementAngle_ = [self randomIncrementAngle];
//设置动画
CABasicAnimation *lotteryAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
lotteryAnimation.fromValue = @(originAngle_);
lotteryAnimation.toValue = @(originAngle_ + incrementAngle_);
lotteryAnimation.duration = 5;
lotteryAnimation.delegate = self;//设置代理,可以相应animationDidStop:finished:函数,用以弹出提醒框
//速度控制器
[lotteryAnimation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
//添加动画
[self.turntableImageView.layer addAnimation:lotteryAnimation forKey:nil];
//锁定fromValue的位置,下次的初始位置
originAngle_ = originAngle_ + incrementAngle_;
//锁定结束位置,就是下次的初始位置
self.turntableImageView.transform = CGAffineTransformMakeRotation(originAngle_);
}

4. 转盘旋转停止时,给个提示


实现动画停止时的代理,代码如下:


- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
// 转盘指针停止时,指针指向的扇区的角度,弧度制有误差,角度制还好
CGFloat resultPieceAngle = (((originAngle_/M_PI) - floor(originAngle_/M_PI)) + (int)floor(originAngle_/M_PI) % 2) * M_PI;
NSLog(@"resultPieceAngle: %fπ", resultPieceAngle/M_PI); // 除以M_PI,便于肉眼观察结果
NSLog(@"incrementAngle_: %fπ", incrementAngle_/M_PI);
NSLog(@"originAngle_: %fπ", originAngle_/M_PI);
NSUInteger turnablePieceHalf = kTurntablePieceCount * 0.5; // 为了下面弧度制计算方便
// 判断抽奖结果,修正误差,修正值 0.1
if ((resultPieceAngle < 0.1) || (resultPieceAngle > (5*M_PI/turnablePieceHalf + 0.1)))
{
[self lotteryHint:@"恭喜你获得1000元"];
}
else if (resultPieceAngle < (M_PI/turnablePieceHalf + 0.1))
{
[self lotteryHint:@"恭喜你获得5元"];
}
else if (resultPieceAngle < (2*M_PI/turnablePieceHalf + 0.1))
{
[self lotteryHint:@"恭喜你获得500元"];
}
else if (resultPieceAngle < (3*M_PI/turnablePieceHalf + 0.1))
{
[self lotteryHint:@"恭喜你获得50元"];
}
else if (resultPieceAngle < (4*M_PI/turnablePieceHalf + 0.1))
{
[self lotteryHint:@"恭喜你获得100元"];
}
else if (resultPieceAngle < (5*M_PI/turnablePieceHalf + 0.1))
{
[self lotteryHint:@"恭喜你获得10元"];
}
self.pointerImageView.userInteractionEnabled = YES; // 旋转结束恢复点击
}
- (void)lotteryHint:(NSString *)message
{
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提示" message:message preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *cancel = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleCancel handler:nil];
[alert addAction:cancel];
[self presentViewController:alert animated:YES completion:nil];
}

5. 抽奖结果示意图


本案例原图太丑,随意切了一个APP的抽奖图。大致是这样的,姑且一看。



lottery.png

注:若侵犯相关APP的合法权益,请联系本人取消该图。




第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台