How can I smoothly control the animation speed on javascript roulette wheel?

Question

I am trying to create a wheel like Roulette / CSGO, I have combined some solutions that I found on the network. However, I cannot figure out how to handle the wheel animation / deceleration to make it as smooth as possible .

The basic premise is that I will go into the number of winning results, then the wheel will begin to spin for the minimum necessary time (_this.spinTime), after which it should "gracefully" slow down, and then, of course, land on the correct number.

Here is my code so far (I have commented on a key area):

window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback, element) {
      window.setTimeout(callback, 1000 / 60);
    };
})();

SpinWheel = function(id) {

  var _this = this;

  _this.el = $('.wheel-wrapper');
  _this.speed = 0;
  _this.startTime = new Date();
  _this.items = 20;
  _this.itemsWidth = 50;
  _this.spinTime = 3000;
  _this.running = false;
  _this.motion = 20;
  _this.resultId = id;
  _this.resultOffset = null;

  _this.setup = function() {
    _this.resultOffset = _this.resultId * _this.itemsWidth;
    _this.loop();
  };

  _this.loop = function() {
    _this.running = true;
    (function gameLoop() {
      _this.update();
      //this returns the translateX to 0 once wheel width is met
      if (_this.speed >= (_this.items * _this.itemsWidth + _this.itemsWidth)) {
        _this.speed = 0;
      }
      _this.speed += _this.motion;
      if (_this.running) {
        requestAnimFrame(gameLoop);
      }
    })();
  };

  _this.update = function() {
    var now = new Date();
    _this.el.css({
      'transform': 'translateX(-' + _this.speed + 'px)'
    });
    //the key area!!
    //if the time elapsed it greater than the spin time, start the slowing down
    if (now - _this.startTime > _this.spinTime) {
        //if the x pos == winning pos && the transition speed is at it slowest
      if (_this.speed == _this.resultOffset && _this.motion == 1) {
      //stop the animation
        _this.running = false;
        //here we increment down the slowing down
      } else if (_this.speed >= _this.resultOffset) {
        if (_this.motion == 2) {
          _this.motion = 1;
        } else if (_this.speed % _this.motion == 0 && _this.motion > 1) {
          _this.motion -= 2;
        }
      }
      return;
    }

  };


  _this.init = function() {
    _this.setup();
  };

  _this.init();

  return _this;

};
//will be passed in: 20 = number of items
var resultId = parseInt(Math.random() * 20);

var wheel = new SpinWheel(resultId);

Feel free to rip it if there is a more perfect solution.

Fiddle here

, , , .. .

!

Answer 1

.

.

= *

= * 0,8

, .

---

EDIT: , , .

---

2:

, , , ? https://jsfiddle.net/ywm3zbc4/7/

_this.update = function() {
    var now = new Date();
    _this.el.css({
      'transform': 'translateX(-' + _this.speed + 'px)'
    });
    if (now - _this.startTime > _this.spinTime) {
      if (_this.speed == _this.resultOffset && _this.motion == 1) {
        _this.running = false;
      } else if (_this.speed >= _this.resultOffset) {
         _this.motion = _this.motion * 0.99;
      }
      return;
}

};

, .

---

3 ( ):

- , . , .

" ", , .

: https://jsfiddle.net/ywm3zbc4/10/

:

// t: current time
// b: start value
// c: change in value
// d: duration
function easeOutSine(t, b, c, d) {
    return c * Math.sin(t/d * (Math.PI/2)) + b;
}

_this.update = function(rafTime) {
  var deltaTime = rafTime - _this.startTime;
  if (deltaTime >= _this.spinTime) {
    _this.running = false;
    return;
  }
  // t = timeFraction
  var t = easeOutSine(deltaTime, 0, 1, _this.spinTime);
  _this.position = Math.round(t * _this.totalDistance);
  var translateX = _this.position % _this.totalWidth;
  console.log('translateX:', translateX, 'position:', _this.position, 'deltaTime:', deltaTime);
  _this.el.css({
    'transform': 'translateX(-' + translateX + 'px)'
  });
};