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控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...
随机推荐
- 【转载】WebStorm安装 & Nodejs-Express Demo
试试下面这个方法: http://www.sdifenzhou.com/?p=6941 从这里下载 http://pan.baidu.com/share/link?shareid=2512210975 ...
- 关于File.separator 文件路径:window与linux下路径问题(“No such file or diretory ”异常解决方案)
最近有个在页面上传Excel文件至服务器指定目录并进行数据校验.最后入库及进行进一步处理的应用情境,我写好代码在模拟环境下测试,完全没问题:但客户试用的时候,却老是报告“No such file or ...
- java中class.forName和classLoader加载类的区分
java中class.forName和classLoader都可用来对类进行加载.前者除了将类的.class文件加载到jvm中之外,还会对类进行解释,执行类中的static块.而classLoade ...
- 关于configure和Makefile
http://blog.csdn.net/lltaoyy/article/details/7615833 转篇文章,讲的不是很清楚,再附上几个资料连接,来自http://www.linuxdw.com ...
- Ubuntu切换root用户权限
其实方法很简单,就是需要选对自己使用的linux系统,不同分支的系统切换root的方法不一定一样. Ubuntu切换root的方法很简单,首先一档钱管理员命令执行: sudo passwd root ...
- vue - dist
描述:打包后准备上线的文件(需要服务器环境才能运行!!!)
- 实现toggleClass功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android性能优化的方方面面
通常项目比较大的APP都面临着如下性能问题,APP启动慢.界面跳转慢.事件相应慢.滑动和动画卡顿.展现内容慢等,有的公司处理的很好,有的还有很大的优化空间,对于性能优化,怎么去做,我总结了一下性能优化 ...
- 【Firefly API文档】—— Package Netconnect
http://bbs.gameres.com/forum.php?mod=viewthread&tid=219655 package netconnect 该包中包含的服务端与客户端通信的一些 ...
- Unity3d 录像
flashtd1: 回复 tqfa :我觉得是有方法可以实现的,之前使用高通的增强显示开发包时发现其实它是添加了一个类似movietexture的东西,叠加在它的摄像机上 如果文档里有操作moviet ...