美文网首页
[Nipuream] Android抽奖转盘的实现

[Nipuream] Android抽奖转盘的实现

作者: 一一小知 | 来源:发表于2016-09-21 19:52 被阅读928次

「原文链接」

Nipuream 的博客地址

序言

效果如下:


点击Go按钮自动启动+自动滚动

实现的效果还不错,因为是模拟器加录制,画面可能会有些卡顿,真机其实蛮顺畅的,下面简单的讲讲实现的步骤。

实现

绘制

首先第一个我们要它给画出来,但是要注意的就是Android所对应的坐标系的问题。

坐标系

其中有两个地方需要注意下,第一个就是画弧的地方.第一个角度是起始角度,第二个是弧的角度,并不是结束的角度,所以是固定值60第二个地方就是计算具体的 x,y的值 的时候要 *根据弧度去计算,不能根据角度。

使用属性动画旋转

如果用 SurfaceView 去进行重绘旋转存在一些问题,比如旋转的角度不好控制,旋转的速度不好控制。但是用属性动画,这个问题就很好解决了。

用动画最重要的就是,如何计算出结束动画后的位置,那么把最终旋转的总角度%360°就得到最后一圈实际旋转的角度,再除以60就得到了到底选择了几个位置,因为一个位置占据60°,这应该不难理解。

但是问题又来了,Android所对应的坐标系,0的位置应该是最底下,而指针的位置是在最上面,所以,我们结合上面的坐标系来看,还需要处理下,如上面的代码所示。

处理手势

触摸事件的处理,最后到底允不允许转盘随手势滑动呢?其实貌似做成这样也就可以了,但是最后还是实现了下,用到了 GestureDetectorScroller 这个类。其实做法有很多,首先获取我们的滑动的距离,Math.sqrt(dx * dx + dy * dy),然后无非就是把这个距离转换成我们需要的角度,你可以把这个距离当作我们的周长来处理,也可以把这个距离当作我们总的旋转的角度来处理。之后就是随着时间的流逝,不断的刷新我们的界面了。

处理剩余问题

还存在个问题,如果没有手势去操作转盘,那我们很容易判断它所旋转的角度,但是有手势的参与,我们很容易旋转到转盘中两个分片中间的位置,那么,我们在让它旋转之前,要简单处理下,避免这种事情发生。

//TODO 为了每次都能旋转到转盘的中间位置
int offRotate = DesRotate % 360 % 60;
DesRotate -= offRotate;
DesRotate += 30;

这样不管手势怎么操作,我最终都是旋转到分片的中间位置了。

代码地址
apk地址


相关文章

  • [Nipuream] Android抽奖转盘的实现

    「原文链接」 Nipuream 的博客地址 序言 效果如下: 实现的效果还不错,因为是模拟器加录制,画面可能会有些...

  • Android超简单实现九宫格抽奖

    目录 前言 如果有小伙伴想实现转盘抽奖效果的话请看我的另一篇文章《Android超简单实现自定义抽奖转盘效果》 效...

  • Android 旋转动画实现抽奖转盘

    项目要求做一个类似转盘抽奖的东西出来,还要求转的过程中要变速,变就变吧,要求阶段函数样式的变速。。。。想了好多种办...

  • JS实现抽奖转盘

    超级简单的原理:点击转盘指针后随机得到一个数(每个数字对应一个奖项),并确定每个奖项在轮盘上的大概角度,然后调用 ...

  • canvas实现转盘抽奖

    用canvas写了一个简单的转盘抽奖插件, 给大家参考下下。。。 做的时候的想法是,通过传进来的标签以及属性,直接...

  • Android抽奖转盘LotteryView

    一次吃饭,突然听到有一个前端朋友有个需求是做一个抽奖的转盘,然后我就思考了下用Android原生的话要怎么实现这个...

  • 小程序实现大转盘,九宫格抽奖,带跑马灯效果

    基本实现功能 1,小程序仿天猫超市大转盘 2,九宫格转盘抽奖 3,积分抽奖 4,抽到的积分随机生成 5,抽奖结果可...

  • Scratch—转盘抽奖

    【知识延伸】 传统抽奖分为抽奖盒抽取、转盘抽奖等 【要求】 今天我们按照平时转盘抽奖、利用Scratch做一个转盘...

  • css 如何“画”一个抽奖转盘

    主要描述的是如何运用 css 绘制一个抽奖转盘,并运用原生 js 实现转盘抽奖效果。 先来张效果图: 布局 一般来...

  • php实现刮刮卡大转盘抽奖概率

    php实现刮刮卡大转盘抽奖概率 本文实例为大家分享了php中奖概率算法,可用于刮刮卡,大转盘等抽奖算法,用法很简单...

网友评论

      本文标题:[Nipuream] Android抽奖转盘的实现

      本文链接:https://www.haomeiwen.com/subject/mbiaettx.html