如何在javascript轮盘上平稳地控制动画速度？

2023年1月11日 218次阅读

我正在尝试创建一个轮盘/ CSGO型轮,我已经拼凑了一些我在网上找到的解决方案.但是我似乎无法弄清楚如何处理动画/减慢轮子以使其看起来尽可能平滑.

基本前提是我将传递获胜结果编号,然后轮子旋转最小所需时间(_this.spinTime),然后它“应该”优雅地减速,然后当然落在正确的数字上.

这是我到目前为止的代码(我已经评论过关键区域)：

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's 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);

如果有更理想的解决方案,请随意拆开它.

Fiddle Here

正如在小提琴中可以看到的那样,它有点作用,但它不是平滑而且不一致它有时会减速等…所以帮助会非常感激.

提前致谢！

最佳答案 你需要实施一些摩擦力.

只需将速度乘以所需摩擦力的一小部分即可.

速度=速度*摩擦力

速度=速度* 0.8

分数越高,摩擦力越小,减速度越慢.

编辑：在您的情况下,您可能希望对运动值应用摩擦,但我不完全确定没有运行您的代码.

编辑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)'
  });
};
点赞