今天看一个小程序的转盘抽奖:

canvas&css 小程序转盘抽奖 gif canvas&css 小程序转盘抽奖

主要思路

我们可以把抽奖转盘分解成三个过程:

加速过程,指的是转盘从静止开始然后到达旋转最大速度的过程;

匀速过程,指的是转盘加速到达最大速度后一直以该速度匀速旋转,这个时候可以请求后台的接口,等返回了结果后就可以进行减速操作了;

减速过程,指的是已经得到了结果,计算出最后停止的位置,然后从最大速度转到最终位置的过程。

具体实现

首先我们要利用缓动效果中的easeIn,linear,easeOut来模拟加速,匀速,减速的过程,这里我们要写一个简单的缓动动画。

easeIn,linear,easeOut的计算公式在网上很容易找到:

加速过程就是让转盘从0度旋转到360度,用easeIn效果,耗时1s。

匀速过程就是让转盘动0度旋转到360度,用linear效果,耗时.6s,如果结果没有返回就一直匀速,一旦有结果返回就调用clear方法,结束匀速缓动动画。

减速过程就是从转盘开始减速的时候到最后停止的角度上,一般会控制这两个角度差不要太小,然后旋转的时间和角度差成正比,用easeOut效果。

保留最后一次旋转角度

如果多次抽奖的时候,为了让抽奖更自然,当前转盘角度是上一次转盘停止的角度会更好些,这个时候我们要记录每次转盘抽完后停止的角度,然后下次开始的时候从那个角度开始旋转。

DEMO下载

点击下载 [0积分]一共下载0

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字