JS抽奖特效练习之四:平滑加减速旋转

我们进行js抽奖点击开始的时候会不停的绕着圈跑，然后停下来，这期间会先变快，然后变慢，然后停下来。

所以这里会涉及到先变快然后在变慢的方法。

为了让速度平滑的过度，可以让速度每次变化的间隔相同就行了，比如最开始的速度是100，下一次98，然后96，94，92...这样就是一次变快2，

我们最开始绕圈跑的算法是借助的setInterval,开始是匀速跑没有问题，现在我们要变速跑就不能使用它了，因为我们速度每一步都要变，如果用它的话每次都要清除停掉又重新开始浪费效率。

所以我们把run方法修改一下，变成往前走一步，也就是把那个setInterval去掉，仅仅让他往前走一步就好：

//往前面走一步
var run = function (speed) {
    $(".mainbox >div").eq(points[poi]).addClass("cur").siblings().removeClass("cur");
    if (points.length - 1 == poi)
        poi = 0;
    else {
        poi++;
    }
}

这里说一下，这个边界值的判断我们先放增加选中效果的前面去更好一点，可以简化一点代码，而且可以让我们后面计算中奖的时候也不需要处理这个边界值

var run = function (speed) {
    if (poi == points.length)
        poi = 0;
    $(".mainbox >div").eq(points[poi]).addClass("cur").siblings().removeClass("cur");
    poi++;
}

为了方便测试我们可以用个按钮试试，点一次按钮移动一步的效果：

$("#begin").click(function () {
    run();
});

如图，我每点一次按钮他就移动一步


然后我们分析实现怎么让速度每次加快2,其实很简单,使用setTimeout即可，让执行间隔每次变短2就ok。上面分析了变速不能在用setInterval了，因为setInterval还要每次都去清除一下，因为它是一直执行而不像setTimeout只执行一次

//平滑变速
var changespeed = function () {
    var speed = 100;//初始速度100
    setTimeout(function () {
        run();
    }, speed);

    speed = speed + 98
    setTimeout(function () {
        run();
    }, speed);

    speed = speed + 96
    setTimeout(function () {
        run();
    }, speed);

    speed = speed + 94
    setTimeout(function () {
        run();
    }, speed);
}

这样的效果就是平滑的变快移动4格

然后找到规律了，就可以用循环写了。

//平滑变速
var changespeed = function () {
    var speed = 0;
    //随机变快步数
    var skipnumber = 5 + Math.floor(Math.random() * 25);
    //变快
    for (var jq = 100; jq > skipnumber; jq--) {
        setTimeout(function () {
            run();
        }, speed);

        speed += jq;
        jq--;//在减去1为了速度每次变化2
    }
    //随机变慢到停下来的步数
    var slownumber = 110 + Math.floor(Math.random() * 96);
    //变慢
    for (var i = jq; i < slownumber; i++) {
        setTimeout(function () {
            run();
        }, speed);

        speed += i;
        i = i + 2;
    }
}

也可以使用下面的方式好理解一点，上面那个变化的频率使用了循环变量杂到一起可能不是那么好理解(2020-12-18添加)：

var changeSpeed = function () {
    //初始速度
    var speed = 100;
    //变化频率初始值
    var rate = 98;
    //变快的步数
    var sikpnumber = 10 + Math.random() * 25;

    //速度依次递增,速度变快
    for (var i = 0; i < sikpnumber; i++) {
        speed = speed + rate;
        setTimeout(function () {
            run();
        }, speed);
        //速度间隔变小
        rate = rate - 2;
    }

    //速度依次递减,速度变慢
    var slownumber = 20 + Math.random() * 56;

    //变慢
    for (var i = 0; i < slownumber; i++) {
        speed = speed + rate;
        setTimeout(function () {
            run();
        }, speed);
        //速度间隔变大
        rate = rate + 4;
    }
}

完整一点的类：

//游戏类
var Game = function (map) {
    var poi = 0;
    var points = map.points;
    var mapobj = map.mapobj;
    //往前面走一步
    var run = function (speed) {
        if (poi == points.length)
           poi = 0;
        $(".mainbox >div").eq(points[poi]).addClass("cur").siblings().removeClass("cur");
        poi++;
    }
    this.begin = function () {
        changespeed();
    }
    //平滑变速
    var changespeed = function () {
        var speed = 0;
        //随机变快步数
        var skipnumber = 5 + Math.floor(Math.random() * 25);
        //变快
        for (var jq = 100; jq > skipnumber; jq--) {
            setTimeout(function () {
                run();
            }, speed);

            speed += jq;
            jq--;
        }
        //随机变慢到停下来的步数
        var slownumber = 110 + Math.floor(Math.random() * 96);
        //变慢
        for (var i = jq; i < slownumber; i++) {
            setTimeout(function () {
                run();
            }, speed);

            speed += i;
            i = i + 2;
        }
    }
}

调用代码片段：

//操作者
var Operator = function () {
    this.init = function () {
        //地图类
        var map = new Map();
        map.createMap(7);
        //游戏类
        var game = new Game(map);
        game.begin();
    }
}

当时我们这里的做法暂时是随机来的，后期我们会根据上分下分的数量来计算这一次应该停到什么位置，根据停的位置计算好步数即可。比如王者荣耀抽水晶，根据当前停止的位置就可以判断抽到水晶需要的步骤，要满足什么条件才能生成到达水晶需要的步骤即可，需要再你点击那一刻已经知道你中奖的是什么了

完全随机是没办法做到想赢钱就赢钱的