一个简单的抽奖案例

---

前言

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

本案例的实现方式

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

具体实现

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

@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的合法权益，请联系本人取消该图。