Shulou(Shulou.com)06/03 Report--

This article is about how iOS achieves the turntable effect of the New year raffle. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Implementation steps:

First, the effect of racing lantern

In fact, it is very simple, that is, through two pictures, infinite replacement with NSTimer, to achieve the effect of horse racing lantern

Implementation code:

_ 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"]];}}

Second, the effect of lucky draw

1. Initialize the prize array and layout the UI interface from top to bottom and left to right

_ itemTitleArray = @ [@ "3 coins", @ "Carnival tickets", @ "8 coins", @ "10 flowers", @ "128flowers", @ "2018 coins", @ "128coins", @ "28flowers", @ "88coins"]; for (int I = 0; I)

< 4; i ++) { UIImageView *img = [[UIImageView alloc] initWithFrame:CGRectMake(i*82*XT, 0, 78*XT, 80*XT)]; [img setImage:[UIImage imageNamed:itemImgArray[i]]]; [itemView addSubview:img]; UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 63*XT, 78*XT, 13*XT)]; label.textAlignment = NSTextAlignmentCenter; label.textColor = [UIColor whiteColor]; label.font = [UIFont systemFontOfSize:13*XT]; label.text = _itemTitleArray[I]; [img addSubview:label]; } for (int i = 0 ; i < 2; i ++) { UIImageView *img = [[UIImageView alloc] initWithFrame:CGRectMake(i*(78*XT+169*XT), 84*XT, 78*XT, 80*XT)]; [img setImage:[UIImage imageNamed:itemImgArray[i+4]]]; [itemView addSubview:img]; UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 63*XT, 78*XT, 13*XT)]; label.textAlignment = NSTextAlignmentCenter; label.textColor = [UIColor whiteColor]; label.font = [UIFont systemFontOfSize:13*XT]; label.text = _itemTitleArray[i+4]; [img addSubview:label]; } for (int i = 0 ; i < 4; i ++) { UIImageView *img = [[UIImageView alloc] initWithFrame:CGRectMake(i*82*XT, 168*XT, 78*XT, 80*XT)]; [img setImage:[UIImage imageNamed:itemImgArray[i+6]]]; [itemView addSubview:img]; UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 63*XT, 78*XT, 13*XT)]; label.textAlignment = NSTextAlignmentCenter; label.textColor = [UIColor whiteColor]; label.font = [UIFont systemFontOfSize:13*XT]; label.text = _itemTitleArray[i+6]; [img addSubview:label]; } 2.点击之后开始抽奖按钮后，先快速地将选中框 正时针 转三圈，再慢速地在 一圈之内 旋转至中奖位置，请 注意 是按照 正时针 的顺序旋转，和UI布局的顺序不一致 - (void)getLotteryInfo{ // 快速旋转计数，在NSTimer的方法下自增到29时结束，代表选中框快速旋转了三圈，结束快速旋转 _fastIndex = 0; // 慢速旋转计数，在NSTimer的方法下自增到下面 _selectedIndex 的数字时，选中框到达中奖位置，结束慢速旋转 _slowIndex = -1; // 中奖位置计数，按照顺时针的顺序，如上图所示，若 _selectedIndex = 9 则获得 9 所在位置的奖品 _selectedIndex = arc4random(); // 根据奖品数组，获取中奖信息 if (_selectedIndex= 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 >

When = _ selectedIndex, the box ends slow rotation and opens the winning prize interface if (_ slowIndex > = _ selectedIndex) {[_ slowTimer invalidate]; dispatch_time_t delayTime = dispatch_time (DISPATCH_TIME_NOW, (int64_t) (1.5 NSEC_PER_SEC * delayed execution time * / * NSEC_PER_SEC)); dispatch_after (delayTime, dispatch_get_main_queue (), ^ {self.startButton.userInteractionEnabled = YES; [self showLotteryRlesultView];});}}

Thank you for reading! This is the end of the article on "how iOS achieves the turntable effect of the New year raffle". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.