抽奖

logo

访问人数

00000

20:20

2014-11-30


>>抽奖

先来试一试吧

flash版(鼠标点一点吧,发现bug截图发给作者)

转盘抽奖
九宫格抽奖
老虎机抽奖

html版(鼠标点一点吧,发现bug截图发给作者)

css3,html5支持旋转,可以试试做转盘。作者非专业,就不献丑了。这里js缓动用的作者自己写的类,专业人士完全可以用jQuery。



>>原理

抽奖在网上很常见,各种各样的抽奖,转盘应该是见得最多的了吧。抽奖实现起来很简单,但是要求不能出错,要根据服务器返回的结果,停在正确的位置上,在此基础上,尽量让界面漂亮。

下面说一下转盘抽奖的实现方法。

转盘转一圈是360度,每一个中奖结果对应一个角度,我们这里是有12种结果,每30度一种结果。怎么样才能让转盘有加速减速的效果,又能停在指定的位置上?这个问题可把作者难住了,为此,作者自己写过一个类,这里就不多提了。 自从用了greensockTweenLite类,很多问题变得简单了。获取到抽奖结果之后,先算出目标位置的角度,然后加上几个整圈,得到targetRotation,最后用TweenLite把转盘的rotation属性缓动到targetRotation。这样就完成了,简单吧。 想要不同的加速减速方式,调整TweenLite的ease参数就行。

九宫格抽奖和老虎机抽奖也一样。

九宫格抽奖,是45度一个方格,只要把0-360度映射到0-7分别对应8个小方格就OK了,然后用TweenLite的onUpdate,每次更新时,更新显示即可。

老虎机抽奖,缓动的是y坐标,3个元件的缓动而已。

以上都可以通过调整TweenLite的参数,达到不同的效果。


>>源码下载

温馨提示:本站flash文件由flash cs6创建,需要cs5.5以上版本方能打开,如果您使用的版本较低,请自行下载高版本或联系作者

抽奖js源码下载(0)

抽奖flash源码下载(0)



回顶部