iOS 转盘抽奖游戏(原生)
转盘抽奖游戏在一般的app中都会有,应该算是一种吸引用户的一种手段。在项目中集成转盘抽奖游戏,大都采用h5的方式来实现,但是由于项目需求,需要在app中使用原生来实现转盘抽奖。实现原理也很简单,中间的一个图片姑且把它叫做转盘好了,当用户点击抽奖的时候,跟服务器做一次请求,拿到当前用户即将获得的奖品,根据奖品的位置,让转盘旋转对应的时间,和对应的圈数,最后定位到抽奖的位置,转盘结束转动,弹窗让用户知晓自己的中奖情况。
好了,废话说到这里,直接上效果图:

核心代码:
#define perSection M_PI*2/8
-(void)animationWithSelectonIndex:(NSInteger)index{
[self backToStartPosition];
self.startButton.enabled = NO;
self.needleImgView.image = [UIImage imageNamed:@"lottery_start_needle_noenable"];
self.textImgView.image = [UIImage imageNamed:@"lottery_state_zhong"];
CABasicAnimation *layer = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
//先转4圈 再选区 顺时针(所以这里需要用360-对应的角度) 逆时针不需要
layer.toValue = @((M_PI*2 - (perSection*index +perSection*0.5)) + M_PI*2*4);
layer.duration = 4;
layer.removedOnCompletion = NO;
layer.fillMode = kCAFillModeForwards;
layer.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
layer.delegate = self;
[self.gameBgView.layer addAnimation:layer forKey:nil];
}
-(void)backToStartPosition{
CABasicAnimation *layer = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
layer.toValue = @(0);
layer.duration = 0.001;
layer.removedOnCompletion = NO;
layer.fillMode = kCAFillModeForwards;
[self.gameBgView.layer addAnimation:layer forKey:nil];
}
#pragma mark - CAAnimationDelegate
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
//设置指针返回初始位置
self.startButton.enabled = YES;
self.needleImgView.image = [UIImage imageNamed:@"lottery_start_needle_enable"];
self.textImgView.image = [UIImage imageNamed:@"lottery_state_start"];
if (self.rotaryEndTurnBlock) {
self.rotaryEndTurnBlock();
}
}
更多源码请参考demo: https://github.com/qqcc1388/TYRotaryDemo
转载请标注来源:https://www.cnblogs.com/qqcc1388/p/9121877.html
iOS 转盘抽奖游戏(原生)的更多相关文章
- js实现大转盘抽奖游戏实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery实现转盘抽奖
jquery实现转盘抽奖 一.总结 一句话总结:这里环形转盘,环形的东西可以化成线性的,然后访问到哪个,给他加上背景为红的样式,用定时器开控制转盘的速度,函数执行的时间间隔越小,就运动的越快. 1.如 ...
- 原生JS实现简易转盘抽奖
我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...
- C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断
C#保留2位小数几种场景总结 场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...
- 原生js轮盘抽奖实例分析(幸运大转盘抽奖)
效果图: 所需图片素材: 这张图是pointer.png的位置的. turntable-bg.jpg这张是转盘背景图,在背景位置. 这张是turntable.png位置的. 需要这三张图片,如果要实现 ...
- web:转盘抽奖
移动web:转盘抽奖(幸运大转盘) 为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转 ...
- 移动web:转盘抽奖(幸运大转盘)
为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转盘),游戏式(砸蛋/拼图...).... ...
- 利用C# 窗体设计 写一个抽奖游戏
老师布置了一个任务,要求我们做一个抽奖游戏,以下是我个人制作的一个作品与写项目的过程. 我们用到了8个pictureBox控件和一个button,设置好大小,并且编排成一个九宫个形状 添加窗体的背景图 ...
- 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结
大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...
随机推荐
- C#.net开发 List与DataTable相互转换 【转】
http://blog.csdn.net/shuizhaoshui/article/details/51425527 在.NET开发中,操作关系型数据库提取数据经常用到DataTable.ASP.NE ...
- java 实现poi方式读取word文件内容
1.下载poi的jar包 下载地址:https://www.apache.org/dyn/closer.lua/poi/release/bin/poi-bin-3.17-20170915.tar.gz ...
- 接口测试框架开发(三):maven+restAssured+Excel(jxl)+testng+extentreports的接口自动化
1.http://www.cnblogs.com/lin-123/p/7151031.html 2.http://www.cnblogs.com/lin-123/p/7151046.html 3.ht ...
- linux文件夹操作及递归遍历文件夹
文件夹相关函数介绍 //mkdir 函数创建文件夹 #include <sys/stat.h> #include <sys/types.h> int mkdir(const c ...
- Ubuntu安装Mac皮肤
如果是ubuntu的PC版,在稳定性方面的要求不是非常高,而又想换换界面养养眼,像我一般只用我的Ubuntu12.04来写写代码,娱乐娱乐的,可以试试Ubuntu的Mac皮肤. 好了,废话不多说,上图 ...
- qs.stringify() 和JSON.stringify()的区别
var a = {name:'hehe',age:10}; qs.stringify(a) // 'name=hehe&age=10' JSON.stringify(a) // '{" ...
- 【转】Spring的中IoC及AOP
1. Spring介绍 Spring是轻量级的J2EE应用程序框架.Spring的核心是个轻量级容器(container),实现了IoC(Inversion of Control)模式的容器,Spri ...
- iOS工程中的info.plist文件的完整研究
原地址:http://blog.sina.com.cn/s/blog_947c4a9f0100zf41.html 们建立一个工程后,会在Supporting files下面看到一个"工程名- ...
- NoSQL的CURD结构体的定义
NoSQL的CURD结构体的定义 flyfish 2015-7-23 參考MongoDB Wire Protocol 在这里document部分使用json表示 使用boost::property_ ...
- 应用LR监控Apache性能
1)对Apache服务器中的http.conf进行如下配置修改Apache中Httpd.conf文件,添加如下代码(该文件中都有,只要取消注释就好了)<Location /server-stat ...