iOS 转盘抽奖游戏(原生)

时间:2022-09-04 09:24:54

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

好了,废话说到这里,直接上效果图:

iOS 转盘抽奖游戏(原生)

核心代码:

#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 转盘抽奖游戏(原生)的更多相关文章

  1. js实现大转盘抽奖游戏实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jquery实现转盘抽奖

    jquery实现转盘抽奖 一.总结 一句话总结:这里环形转盘,环形的东西可以化成线性的,然后访问到哪个,给他加上背景为红的样式,用定时器开控制转盘的速度,函数执行的时间间隔越小,就运动的越快. 1.如 ...

  3. 原生JS实现简易转盘抽奖

    我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...

  4. C&num;保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  5. 原生js轮盘抽奖实例分析(幸运大转盘抽奖)

    效果图: 所需图片素材: 这张图是pointer.png的位置的. turntable-bg.jpg这张是转盘背景图,在背景位置. 这张是turntable.png位置的. 需要这三张图片,如果要实现 ...

  6. web:转盘抽奖

    移动web:转盘抽奖(幸运大转盘)   为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转 ...

  7. 移动web:转盘抽奖&lpar;幸运大转盘&rpar;

    为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转盘),游戏式(砸蛋/拼图...).... ...

  8. 利用C&num; 窗体设计 写一个抽奖游戏

    老师布置了一个任务,要求我们做一个抽奖游戏,以下是我个人制作的一个作品与写项目的过程. 我们用到了8个pictureBox控件和一个button,设置好大小,并且编排成一个九宫个形状 添加窗体的背景图 ...

  9. 【Vue&period;js游戏机实战】- Vue&period;js实现大转盘抽奖总结

    大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...

随机推荐

  1. &lbrack;Effective JavaScript 笔记&rsqb; 第5条:避免对混合类型使用&equals;&equals;运算符

    “1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...

  2. poj 3565 uva 1411 Ants KM算法求最小权

    由于涉及到实数,一定,一定不能直接等于,一定,一定加一个误差<0.00001,坑死了…… 有两种事物,不难想到用二分图.这里涉及到一个有趣的问题,这个二分图的完美匹配的最小权值和就是答案.为啥呢 ...

  3. 【最大流】【HDU3338】【Kakuro Extension】

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3338 题目大意:填数字,使白色区域的值得和等于有值得黑色区域的相对应的值,用网络流来做 题目思路:增加 ...

  4. python之实现批量远程执行命令(堡垒机)

    python远程批量执行 我并不是一个专业的开发,我一直在学习linux运维,对于python也是接触不久,所以代码写的并不是很规范简洁. 前段时间一个同学找我一起做一个自动化运维平台,我对pytho ...

  5. JAVA读取Excel中内容(HSSF和Workbook两种方法)

    内容添加,以前是用的HSSF,前几天帮同学写一个统计表用了Workbook,现在码一下. ---新内容(Workbook)--- 同学要统计一个xls表格,让表1里面的某一列内容对表2里面的每列进行匹 ...

  6. 为fastdfs文件服务器新增一个storage

    一.前言: 前期,已经搭建好了一套fastdfs文件服务器,一个tracker和一个storage,且部署在同一台服务器上,已经正式投入运行快半年了,1T的空间现在只剩下100G容量了,现在需要扩容, ...

  7. STP实验(指定特定交换机为根桥)

    实验要求:将三层交换机设置为根桥交换机,并查看 拓扑如下: 涉及内容有: 1.根桥交换机的选举方式 2.生成树修改优先级成为根桥交换机 3.生成树直接指定根桥交换机 根桥交换机是根据优先级和MAC地址 ...

  8. Tree&lpar;树链剖分&plus;线段树延迟标记&rpar;

    Tree http://poj.org/problem?id=3237 Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 12 ...

  9. ASP&period;NET Core使用EPPlus操作Excel

    1.前言 本篇文章通过ASP.NET Core的EPPlus包去操作Excel(导入导出),其使用原理与NPOI类似,导出Excel的时候不需要电脑上安装office,非常好用 2.使用 新建一个AS ...

  10. VS2012&sol;2013引用对话框的糟糕设计

    先看两张图: 1. 首次打开引用对话框(Reference Manager),Name显示不全: (图1) 2. 然后双击或拖动splitter,让Name显示全: (图2) 3. 下次再打开引用对话 ...