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

主要思路

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

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

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

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

具体实现

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

let move=()=>{
    // 当前的运动位置
    let value = this.fnName(this.start, this.from, this.to - this.from, this.step);
    // 时间递增
    this.start++;
    // 如果还没有运动到位,继续
    if (this.start <= this.step) {
        this.callback(value);
        if(this.run)
            requestAnimationFrame(move);
    } else {
        // 动画结束,这里可以插入回调...
        this.callback(this.to, true);
    }
}

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

Linear: function (t, b, c, d) {
    return c * t / d + b;
},
easeIn: function (t, b, c, d) {
    return c * (t /= d) * t + b;
},
easeOut: function (t, b, c, d) {
    return -c * (t /= d) * (t - 2) + b;
}

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

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

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

保留最后一次旋转角度

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

DEMO下载

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

所有评论

返回
邮箱:
绑定
取消
×

我要评论

回复:

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

图片:

邮箱:
绑定邮箱后,若有回复,会邮件通知。
提交
还可以输入500个字