一个简单的抽奖案例
前言
先说一下程序实现抽奖这个事。据我目前了解到的情况，一般是由服务端实现抽奖的全部业务，客户端拿到抽奖结果展示给用户。嗯，可能有人会说，我在客户端点击抽奖了啊，结果是随机的啊，有一定的概率......
其实，一切都在服务端的掌控之中，抽奖结果可以是按照一定的概率随机产生，也可以不是。之前在广东的时候，听说过一个计算机实现抽奖的案例--“赌马”，我猜啊（简单猜测一下，或许不是这样的），每种可能的中奖结果计算机都会存储起来，然后呢，每种结果再对应所有用户计算出一个需要付出的中奖金额总额，再然后，拿出那个最小的中奖结果。当然啦，这个结果是不断变化的，据参与的人说，距离开奖时间越近，越可能中奖。这个抽奖案例恐怕就不是随机产生抽奖结果的了。
本案例的实现方式
作为客户端，当用户点击抽奖时，拿到服务端送过来的抽奖结果并旋转转盘，转盘再转到相应的扇区（抽奖结果）。
具体实现
先把头文件和定义的几个静态变量列出来
@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的合法权益，请联系本人取消该图。
