小程序轮播抽奖

今天看一个小程序轮播抽奖:

我们可以将彩票转盘分为三个过程:

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

恒速过程意味着转盘即使达到最大速度也以相同的速度旋转. 此时，您可以请求后台界面，并可以在返回结果后执行减速操作；

减速过程是指获得结果，计算出最终停止位置小程序转盘抽奖程序，然后将最大速度传递至最终位置的过程.

首先，我们需要在easy效果中使用easyIn，linear，easyOut来模拟加速，匀速和减速过程. 在这里，我们要编写一个简单的轻松.

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);
    }
}

easyIn，linear，easyOut的计算公式很容易在网上找到:

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;
}

加速过程是使用easyIn效果将转盘从0度旋转到360度，耗时1秒.

恒速过程是使转盘从0度旋转到360度. 线性效应需要0.6s. 如果结果没有返回，则将是恒定速度. 结果返回后小程序转盘抽奖程序，调用clear方法以结束统一的慢动作.

减速过程是从转盘开始减速到最后停止的角度. 通常，使用easyOut效果将这两个角度之间的差控制得不太小，然后旋转时间与角度差成比例.

如果彩票抽奖是多次的，为了使彩票抽奖更自然，当前转盘角度要比最后一个转盘停止的角度好. 是时候从那个角度开始旋转了.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-225279-1.html