臨近春節(jié)酪刀，相信不少app都會(huì)加一個(gè)新的需求——新年抽獎(jiǎng)
不多廢話梦谜，先上GIF效果圖
DEMO鏈接：https://gitee.com/xudongxiang/LuckyDraw.git
1. 跑馬燈效果
QQ20190117-153231.gif
2. 抽獎(jiǎng)效果
QQ20190117-153345.gif
實(shí)現(xiàn)步驟：
一、跑馬燈效果
其實(shí)很簡(jiǎn)單窄做，就是通過以下兩張圖片毁兆，用NSTimer無(wú)限替換河泳，達(dá)到跑馬燈的效果
bg_lamp_1@2x.png
bg_lamp_2@2x.png
實(shí)現(xiàn)代碼：
_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"]];
}
}
二、抽獎(jiǎng)效果
- 初始化獎(jiǎng)品數(shù)組断序，以及按照 從上到下流纹，從左到右 的順序布局UI界面
_itemTitleArray = @[@"3跳幣",@"嘉年華門票",@"8跳幣",@"10朵花",@"128朵花",@"2018跳幣",@"528跳幣",@"128跳幣",@"28朵花",@"88跳幣"];
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];
}
- 點(diǎn)擊之后開始抽獎(jiǎng)按鈕后，先快速地將選中框 正時(shí)針 轉(zhuǎn)三圈违诗，再慢速地在 一圈之內(nèi) 旋轉(zhuǎn)至中獎(jiǎng)位置漱凝，請(qǐng) 注意 是按照 正時(shí)針 的順序旋轉(zhuǎn)，和UI布局的順序不一致诸迟，如圖所示：
bg_lamp_2@2x.png
- (void)getLotteryInfo
{
// 快速旋轉(zhuǎn)計(jì)數(shù)茸炒，在NSTimer的方法下自增到29時(shí)結(jié)束，代表選中框快速旋轉(zhuǎn)了三圈阵苇，結(jié)束快速旋轉(zhuǎn)
_fastIndex = 0;
// 慢速旋轉(zhuǎn)計(jì)數(shù)壁公，在NSTimer的方法下自增到下面 _selectedIndex 的數(shù)字時(shí)，選中框到達(dá)中獎(jiǎng)位置绅项，結(jié)束慢速旋轉(zhuǎn)
_slowIndex = -1;
// 中獎(jiǎng)位置計(jì)數(shù)紊册，按照順時(shí)針的順序，如上圖所示快耿，若 _selectedIndex = 9 則獲得 9 所在位置的獎(jiǎng)品
_selectedIndex = arc4random()%10;
// 根據(jù)獎(jiǎng)品數(shù)組囊陡，獲取中獎(jiǎng)信息
if (_selectedIndex<4) {
_result = _itemTitleArray[_selectedIndex];
}else if (_selectedIndex == 4){
_result = @"2018跳幣";
}else if (_selectedIndex == 5){
_result = @"88跳幣";
}else if (_selectedIndex == 6){
_result = @"28朵花";
}else if (_selectedIndex == 7){
_result = @"128跳幣";
}else if (_selectedIndex == 8){
_result = @"528跳幣";
}else if (_selectedIndex == 9){
_result = @"128朵花";
}
_itemBorderView.hidden = NO;
// 開啟快速旋轉(zhuǎn)，時(shí)間間隔為0.1秒
_fastTimer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(fastTimerEvent) userInfo:nil repeats:YES];
[[NSRunLoop currentRunLoop] addTimer:_fastTimer forMode:NSRunLoopCommonModes];
}
- NSTimer 快速旋轉(zhuǎn)事件
- (void)fastTimerEvent
{
// _fastIndex 自增
_fastIndex = _fastIndex + 1;
// 順時(shí)針移動(dòng)選中框的位置
if (_fastIndex % 10 == 0) {
[_itemBorderView setFrame:CGRectMake(-1*XT, -1*XT, 80*XT, 82*XT)];
}else if (_fastIndex % 10 == 1){
[_itemBorderView setFrame:CGRectMake(82*XT-1*XT, -1*XT, 80*XT, 82*XT)];
}else if (_fastIndex % 10 == 2){
[_itemBorderView setFrame:CGRectMake(2*82*XT-1*XT, -1*XT, 80*XT, 82*XT)];
}else if (_fastIndex % 10 == 3){
[_itemBorderView setFrame:CGRectMake(3*82*XT-1*XT, -1*XT, 80*XT, 82*XT)];
}else if (_fastIndex % 10 == 4){
[_itemBorderView setFrame:CGRectMake(3*82*XT-1*XT, 84*XT-1*XT, 80*XT, 82*XT)];
}else if (_fastIndex % 10 == 5){
[_itemBorderView setFrame:CGRectMake(3*82*XT-1*XT, 2*84*XT-1*XT, 80*XT, 82*XT)];
}else if (_fastIndex % 10 == 6){
[_itemBorderView setFrame:CGRectMake(2*82*XT-1*XT, 2*84*XT-1*XT, 80*XT, 82*XT)];
}else if (_fastIndex % 10 == 7){
[_itemBorderView setFrame:CGRectMake(82*XT-1*XT, 2*84*XT-1*XT, 80*XT, 82*XT)];
}else if (_fastIndex % 10 == 8){
[_itemBorderView setFrame:CGRectMake(-1*XT, 2*84*XT-1*XT, 80*XT, 82*XT)];
}else if (_fastIndex % 10 == 9){
[_itemBorderView setFrame:CGRectMake(-1*XT, 84*XT-1*XT, 80*XT, 82*XT)];
}
// _fastIndex = 29 時(shí)選中框結(jié)束快速旋轉(zhuǎn)润努，開啟慢速旋轉(zhuǎn)关斜，時(shí)間間隔為0.45秒
if (_fastIndex >= 29) {
[_fastTimer invalidate];
_slowTimer = [NSTimer scheduledTimerWithTimeInterval:0.45 target:self selector:@selector(slowTimerEvent) userInfo:nil repeats:YES];
[[NSRunLoop currentRunLoop] addTimer:_slowTimer forMode:NSRunLoopCommonModes];
}
}
- NSTimer 慢速旋轉(zhuǎn)事件
// 慢速移動(dòng)動(dòng)畫
- (void)slowTimerEvent
{
// _slowIndex 自增
_slowIndex = _slowIndex + 1;
// 順時(shí)針移動(dòng)轉(zhuǎn)中框的位置
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)];
}
// 當(dāng) _slowIndex >= _selectedIndex 時(shí)選中框結(jié)束慢速旋轉(zhuǎn)，開啟中獎(jiǎng)獎(jiǎng)品界面
if (_slowIndex >= _selectedIndex) {
[_slowTimer invalidate];
dispatch_time_t delayTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.5/*延遲執(zhí)行時(shí)間*/ * NSEC_PER_SEC));
dispatch_after(delayTime, dispatch_get_main_queue(), ^{
self.startButton.userInteractionEnabled = YES;
[self showLotteryRlesultView];
});
}
}
