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

    主要思路

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

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

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

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

    具体实现

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

    1. let move=()=>{
    2.     // 当前的运动位置
    3.     let value = this.fnName(this.start, this.from, this.to - this.from, this.step);
    4.     // 时间递增
    5.     this.start++;
    6.     // 如果还没有运动到位,继续
    7.     if (this.start <= this.step) {
    8.         this.callback(value);
    9.         if(this.run)
    10.             requestAnimationFrame(move);
    11.     } else {
    12.         // 动画结束,这里可以插入回调...
    13.         this.callback(this.to, true);
    14.     }
    15. }

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

    1. Linear: function (t, b, c, d) {
    2.     return c * t / d + b;
    3. },
    4. easeIn: function (t, b, c, d) {
    5.     return c * (t /= d) * t + b;
    6. },
    7. easeOut: function (t, b, c, d) {
    8.     return -c * (t /= d) * (t - 2) + b;
    9. }

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

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

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

    保留最后一次旋转角度

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

    DEMO下载

    点击下载[0积分]一共下载0
    回到顶部
    我要评论

    所有评论

      相关文章