这种沿着y轴做3d旋转圆盘的抽奖活动怎么做,提供些思路

cjwj
  • 628

clipboard.png

滑动屏幕后圆盘开始沿着y轴旋转,圆盘看到的这一面是奖品图,每翻转一次更换奖品图,停止旋转后当前圆盘的奖品就是中奖结果!

问题:

  1. 如何控制每翻转一次换一个奖品图;
  2. 如何控制抽奖过程中由慢到快到最终停止;
  3. 如何控制最后停下的一面与服务端返回的中奖结果一致。
回复
阅读 3k
2 个回答
✓ 已被采纳

自己琢磨了一下,解决了,基本思路就是:

只设置一个旋转元素,通过旋转过程中设置元素的内容来实现奖品切换。

把360旋转一周分成四次动画来实现,每个动画周期只旋转90度,每个动画周期动画的执行设置为匀速的。在旋转角度90,270,450 .....时设置元素内容实现切换,因为此时人眼看到转盘时是一条线,是切换奖品图案的最佳时机。

此时会遇到一个问题:因为转盘分正面和背面,比如已经旋转90度时,切换后进行从90->180度旋转的时候,人眼看到的是转盘的背面,从背面看过去奖品图是反的,所以此时需要对奖品图的元素进行一次180翻转,这样即便转盘是背面,看到的奖品图就是正的,从270 -> 360 的过程中因为看到的是正面,就不用对奖品图翻转,根据已经旋转的角度判断一下即可。

为什么考虑每次动画周期设置只转90度?而且每次动画设置为匀速?
这是因为我通过写一个控制器,控制器返回下一次动画执行的时长,根据动画已经执行的次数来控制时长的返回:随着次数增加,一次动画的时长从200ms(开始速度) -> 50ms(最快) -> 500ms(最慢),这样一来,虽然一次动画的过程是匀速的,但下一次动画执行如果时长更短,看起来就是后一次转的比第一次快,多次连续执行看起来可以做到先加速再减速的过程。我这里设置一次动画只旋转90度,即旋转一周是四次不同的速度,360度里细分的越细效果越好,我细分90度一个单位也表现很完美了,而且这还能很好的配合切换奖品时机 2n+1 个90度时)的判断。

有了以上思路,关键就是考虑如何判断上一次动画结束时机,这样才能上一次结束了就马上调用下一次。
这里简单的来做可以使用jquery提供的animate 方法,最后一个参数就是动画结束后的回调方法,回调方法里递归调用自己写的动画执行即可;如果想挑战一下,自己实现一个animate即可,谷歌一样教程很多。我用promise实现的。

最后你可以设定一个最小的转动次数,达到这个次数,就把服务器获取到的中奖结果的图样设置到转盘元素上,然后停止....

做完后的样子:
clipboard.png

1、3比较容易,2比较难

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏