>>抽奖
先来试一试吧
flash版(鼠标点一点吧,发现bug截图发给作者)
html版(鼠标点一点吧,发现bug截图发给作者)
css3,html5支持旋转,可以试试做转盘。作者非专业,就不献丑了。这里js缓动用的作者自己写的类,专业人士完全可以用jQuery。
>>原理
抽奖在网上很常见,各种各样的抽奖,转盘应该是见得最多的了吧。抽奖实现起来很简单,但是要求不能出错,要根据服务器返回的结果,停在正确的位置上,在此基础上,尽量让界面漂亮。
下面说一下转盘抽奖的实现方法。
转盘转一圈是360度,每一个中奖结果对应一个角度,我们这里是有12种结果,每30度一种结果。怎么样才能让转盘有加速减速的效果,又能停在指定的位置上?这个问题可把作者难住了,为此,作者自己写过一个类,这里就不多提了。 自从用了greensock的TweenLite类,很多问题变得简单了。获取到抽奖结果之后,先算出目标位置的角度,然后加上几个整圈,得到targetRotation,最后用TweenLite把转盘的rotation属性缓动到targetRotation。这样就完成了,简单吧。 想要不同的加速减速方式,调整TweenLite的ease参数就行。
九宫格抽奖和老虎机抽奖也一样。
九宫格抽奖,是45度一个方格,只要把0-360度映射到0-7分别对应8个小方格就OK了,然后用TweenLite的onUpdate,每次更新时,更新显示即可。
老虎机抽奖,缓动的是y坐标,3个元件的缓动而已。
以上都可以通过调整TweenLite的参数,达到不同的效果。