等分轮盘抽奖实现思路

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/gzzheyi/article/details/79407268

前段时间策划提了一个需求,做一个轮盘抽奖,轮盘不转,转的是指针。指针有几个状态,启动抽奖的时候,加速,然后到达最大速度 。停止抽奖的时候,从当前速度开始减速,然后停止的时候停在目标位置。

一开始觉得挺简单的,大概思路就是:将指针从当前转动速度开始减速,直到停止到刚好的位置这一个过程,映射为一个匀减速直线运动。

但是结果实现起来,就是各种问题,表现起来就是停止的时候没有停到想要的位置。后来分析了一下代码,思路其实没错,主要是公式没用对。

关键的点有两个:
  1. 按下停止的时候,指针真正开始减速的位置,或者说是角度。因为 s = v0 * t + 0.5 * a * (t * t),在v0已知,t已知的情况下,指针从开始减速到停止这个过程,转过的角度是确定的。那么按下停止那一刻,不能立即让指针开始减速,否则停不到目标位置,而是应该根据目标位置反过来推算指针应该从哪个位置开始减速
  2. 减速的时候每帧更新走过的距离。一开始想得太简单,以为时间delta t已经足够小了,指针减速走过的距离 用 s = t * v 来算,但是实际上是错的。每次更新指针位置,还是实实在在得套用标准公式:s = v0 * t + 0.5 * a * (t * t),来算出delta t 时间内指针走过的距离,同时也需要根据 vt = v0 + at来更新vt的速度 。

如果按照上面关键的两点来做,就可以做到,在指针转动的任意时候,按下停止,都能停到目标位置了。而且将指针的最大速度完全停止转动的时间做成可配置,可以将效果调整到比较“恰好”的样子。

不过交互貌似不太满意最后那段停下来的效果,按照她的口述,我大概理解是一种变减速的运动,最后面的减速是比较诡异的,具体实现后面再看看吧~~

展开阅读全文

ajax jquery 轮盘旋转抽奖无动画效果

03-20

[size=16px][color=#0000FF]html中的body:[/color][/size]rn[code=html]rnrn rn rn rn rnrn rn rn rn[/code]rnrn[size=16px][color=#0000FF]导入的相关js[/color][/size]rn[code=html]rn rn rn rn rn rn[/code]rnrn[size=16px][color=#0000FF]用于实验部分的页面脚本代码[/color][/size]rn[code=javascript]rn $(function()rn //alert('into function'); rn $("#startbtn2").rotate( rn bind: rn click:function()//绑定click单击事件 rn //alert('into click'); rn var a = Math.floor(Math.random() * 360); //生成随机数 rn $(this).rotate( rn duration:6000,//转动时间间隔(转动速度) rn angle: 0, //开始角度 rn animateTo:3600+a, //转动角度,10圈+ rn easing: $.easing.easeOutSine, //动画扩展 rn callback: function() //回调函数 rn alert("中奖了!"); rn rn ); rn rn rn ); rn );rn[/code]rn[color=#FF0000][size=14px]这部分可正常执行动画效果。[/size][/color]rnrn[size=16px][color=#0000FF]真正需要部分的页面脚本代码[/color][/size]rn[code=javascript]rn $(document).ready(function()rn $("#startbtn").bind("click",function()rn gogo();rn );rn ); rn rn function gogo()rn var urlStr="Turntable.do"; rn //alert("ajax");rn $.ajax(rn type:"POST", //提交數據的類型rn url:urlStr, //提交請求的地址rn dataType:"json", //返回的數據格式rn cache:false,rn rn error:function()rn alert("error");rn return false;rn ,rn success:function(data)succ(data);rn );rn rn rn function succ(data)rn //alert('success'+data);rn $("startbtn").unbind("click").css("cursor","default");rn var a = data.angle; //角度rn var p = data.prize; //獎項rn var msg = data.msg; //提示信息rn alert("a:"+a+";p:"+p+";m:"+msg);rn $("startbtn").rotate(rn duration:4000, //轉動時間rn angle:0,rn animateTo:3600+a, //轉動角度rn easing: $.easding.easeOutSine,rn callback:function()rn alert("這裡是回調函數");rn var con = confirm("恭喜您,中得"+p+"\n還要再來一次嗎?");rn if(con)rn alert("into");rn elsern return false;rn rn rn )rn rn[/code]rn[size=14px][color=#FF0000]代码直至运行到succ方法中的alert部分都正常,alert的返回数据类似[/color] [color=#0000FF]a:33;p:4;m:继续努力[/color][color=#FF0000]继续运行页面无动画效果。[/color] [/size]rnrn[size=16px][color=#0000FF]运用Google浏览器查看Js脚本运行情况如图:[/color][/size]rn[img]http://img1.ph.126.net/EUHnRVpzRWlc7u-SgxUlEQ==/4820258976270126751.jpg[/img]rn[color=#FF0000][size=14px]现在想请教为何我所需要部分的动画效果没有正常执行?,明明用于实验的部分没有任何问题呀![/size][/color] 论坛

没有更多推荐了,返回首页