博客> iOS 抽奖轮盘效果实现思路
iOS 抽奖轮盘效果实现思路
2019-08-23 09:26 评论:0 阅读:543 月华七子
ios 抽奖轮盘 实现思路

临近活动,相信不少app都会加一个新的需求——抽奖 不多废话,先上GIF效果图

DEMO获取,请阅读 原文地址

  1. 跑马灯效果

跑马灯效果

  1. 抽奖效果

15591283-cb0a8bc1c83c1e9d.gif

实现步骤:

一、跑马灯效果 image.png

image.png

其实很简单,就是通过以下两张图片,用NSTimer无限替换,达到跑马灯的效果

实现代码:

_rotaryTable = [[UIImageView alloc] initWithFrame:CGRectMake((kScreenWidth-366*XT)/2, 218*XT, 366*XT, 318*XT)];
_rotaryTable.tag = 100;
[_rotaryTable setImage:[UIImage imageNamed:@"bg_lamp_1"]];
[scrollView addSubview:_rotaryTable];

_itemBordeTImer = [NSTimer scheduledTimerWithTimeInterval:0.5 target:self selector:@selector(itemBordeTImerEvent) userInfo:nil repeats:YES];
[[NSRunLoop currentRunLoop] addTimer:_itemBordeTImer forMode:NSRunLoopCommonModes];
- (void)itemBordeTImerEvent
{
    if (_rotaryTable.tag == 100) {
        _rotaryTable.tag = 101;
        [_rotaryTable setImage:[UIImage imageNamed:@"bg_lamp_2"]];
    }else if (_rotaryTable.tag == 101){
        _rotaryTable.tag = 100;
        [_rotaryTable setImage:[UIImage imageNamed:@"bg_lamp_1"]];
    }
}

二、抽奖效果

初始化奖品数组,以及按照 从上到下,从左到右 的顺序布局UI界面

_itemTitleArray = @[@"3跳币",@"嘉年华门票",@"8跳币",@"10朵花",@"128朵花",@"2018跳币",@"528跳币",@"128跳币",@"28朵花",@"88跳币"];
for (int i = 0 ; i < 4 xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed>= 29) {
        [_fastTimer invalidate];
        _slowTimer = [NSTimer scheduledTimerWithTimeInterval:0.45 target:self selector:@selector(slowTimerEvent) userInfo:nil repeats:YES];
        [[NSRunLoop currentRunLoop] addTimer:_slowTimer forMode:NSRunLoopCommonModes];
    }
}

4.NSTimer 慢速旋转事件

// 慢速移动动画
- (void)slowTimerEvent
{
    // _slowIndex 自增
    _slowIndex = _slowIndex + 1;

    // 顺时针移动转中框的位置
    if (_slowIndex % 10 == 0) {
        [_itemBorderView setFrame:CGRectMake(-1*XT, -1*XT, 80*XT, 82*XT)];
    }else if (_slowIndex % 10 == 1){
        [_itemBorderView setFrame:CGRectMake(82*XT-1*XT, -1*XT, 80*XT, 82*XT)];
    }else if (_slowIndex % 10 == 2){
        [_itemBorderView setFrame:CGRectMake(2*82*XT-1*XT, -1*XT, 80*XT, 82*XT)];
    }else if (_slowIndex % 10 == 3){
        [_itemBorderView setFrame:CGRectMake(3*82*XT-1*XT, -1*XT, 80*XT, 82*XT)];
    }else if (_slowIndex % 10 == 4){
        [_itemBorderView setFrame:CGRectMake(3*82*XT-1*XT, 84*XT-1*XT, 80*XT, 82*XT)];
    }else if (_slowIndex % 10 == 5){
        [_itemBorderView setFrame:CGRectMake(3*82*XT-1*XT, 2*84*XT-1*XT, 80*XT, 82*XT)];
    }else if (_slowIndex % 10 == 6){
        [_itemBorderView setFrame:CGRectMake(2*82*XT-1*XT, 2*84*XT-1*XT, 80*XT, 82*XT)];
    }else if (_slowIndex % 10 == 7){
        [_itemBorderView setFrame:CGRectMake(82*XT-1*XT, 2*84*XT-1*XT, 80*XT, 82*XT)];
    }else if (_slowIndex % 10 == 8){
        [_itemBorderView setFrame:CGRectMake(-1*XT, 2*84*XT-1*XT, 80*XT, 82*XT)];
    }else if (_slowIndex % 10 == 9){
        [_itemBorderView setFrame:CGRectMake(-1*XT, 84*XT-1*XT, 80*XT, 82*XT)];
    }

    // 当  _slowIndex >= _selectedIndex 时选中框结束慢速旋转,开启中奖奖品界面
    if (_slowIndex >= _selectedIndex) {
        [_slowTimer invalidate];

        dispatch_time_t delayTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.5/*延迟执行时间*/ * NSEC_PER_SEC));
        dispatch_after(delayTime, dispatch_get_main_queue(), ^{
            self.startButton.userInteractionEnabled = YES;
            [self showLotteryRlesultView];
        });
    }
}

DEMO获取,请阅读 原文地址

收藏
0
sina weixin mail 回到顶部