我正在尝试创建一个轮盘/ 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);
如果有更理想的解决方案,请随意拆开它.
正如在小提琴中可以看到的那样,它有点作用,但它不是平滑而且不一致它有时会减速等…所以帮助会非常感激.
提前致谢!
最佳答案 你需要实施一些摩擦力.
只需将速度乘以所需摩擦力的一小部分即可.
速度=速度*摩擦力
速度=速度* 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)'
});
};