javascript - 动画速度问题

Question

我有这个 slider ，当我单击其中一个点时，它会滑到屏幕中心。我遇到的问题是，如果我单击一个已经接近中心的点，它的移动速度会非常慢。如果我点击一个距离更远的点，则需要相同的时间才能到达中心(但似乎移动得更快；显然这是一种错觉)。我想做的就是让他们都以相同的速度行驶。因此，距离较远的一个需要更长的时间才能到达中心，但距离最近的一个必须更快。

目前我的代码如下所示:

// Moves the current active item to the center
moveToCenter: function (e, dragOptions, animate) {

    // Get the central position 
    var center = $window.innerWidth / 2,
        rect = e.target.getBoundingClientRect(),
        distance = center - rect.left - ((50 - 18) / 2), // Make these variables?
        positive = rect.left > center;

    // If we should animation
    if (animate) {

        // Get our fake mouse position
        var clientX = center,
            target = center + distance,
            offset = clientX / $window.innerWidth,
            length = distance / $window.innerWidth;

        // Initiate the first move
        _setupMove(dragOptions, offset);

        // Execute every 1 millisecond
        var timer = $interval(function () {

            // Get our new clientX
            clientX = clientX + length;
            offset = clientX / $window.innerWidth;

            // Move
            _moveElements(dragOptions, offset, service.updateDragElement);

            // Should we stop?
            var stop = positive ? clientX <= target : clientX >= target;

            // If we should stop
            if (stop) {

                // Cancel the interval
                $interval.cancel(timer);
            }
        }, 1);

        // Otherwise
    } else {

        // Update the current position
        dragOptions.currentX = distance / dragOptions.speed;

        // Move our elements
        service.updateDragElement(dragOptions);
    }
},

我知道这与设置 clientX 有关。我想也许我需要根据时间计算出我应该走多远，所以我创建了这个:

// Get our fake mouse position
var clientX = center,
    target = center + distance,
    offset = clientX / windowWidth,
    percent = distance / windowWidth,
    interval = 1000 * percent;

// Initiate the first move
_setupMove(dragOptions, offset);

// Execute every 1 millisecond
var timer = $interval(function () {

    // Get our new clientX
    clientX = clientX + (distance * percent);
    offset = clientX / windowWidth;

    // Move
    _moveElements(dragOptions, offset, service.updateDragElement);

    // Should we stop?
    var stop = positive ? clientX <= target : clientX >= target;

    // If we should stop
    if (stop) {

        // Cancel the interval
        $interval.cancel(timer);
    }
}, interval);

理论上，无论行驶距离多远，它都应该以相同的速度行驶。但这没有用。

有人知道我该如何解决这个问题吗？

<小时/>

由于建议的答案，我已将代码更改为:

// Animates the slider
animate: function (startTime, distance, duration, options) {

    // Animate
    requestAnimationFrame(function () {

        // Get our offset
        var now = Date.now(),
            timeDelta = Math.min(now - startTime, duration),
            timePercent = timeDelta / duration,
            offset = timePercent * distance;

        var finalX = options.finalX + offset;

        // Create the transform
        options.transform = 'translateX(' + finalX + 'px)';

        // Add to our element
        options.element.style.transform = options.transform;

        if (timeDelta < duration) {
            service.animate(startTime, distance, duration, options);
        } else {
            options.finalX = finalX;
            options.currentX = options.xOffset + (distance / $window.innerWidth);
        }
    });
},

// Moves the current active item to the center
moveToCenter: function (e, dragOptions, animate) {

    // Get the central position 
    var windowWidth = $window.innerWidth,
        center = windowWidth / 2,
        rect = e.target.getBoundingClientRect(),
        distance = center - rect.left - ((50 - 18) / 2), // Make these variables?
        positive = rect.left > center;

    // If we should animation
    if (animate) {

        var start = center,
            distance = center - rect.left - ((50 - 18) / 2), // Make these variables?
            now = Date.now(),
            duration = distance / 1;

        // Animate our elements
        service.animate(now, distance, duration, dragOptions);

    // Otherwise
    } else {

        // Update the current position
        dragOptions.currentX = distance / dragOptions.speed;

        // Move our elements
        service.updateDragElement(dragOptions);
    }
},

如果我选择中心左侧的任何内容，现在可以正确滚动。当它位于中心右侧时，它只是跳到该点而不是为其设置动画。

Answer 1

这是我推荐的方法。首先计算出您想要的速度:

var velocity = 1; // pixels/millisecond

...然后使用requestAnimationFrame“循环”:

var startPoint = center;
var endPoint = rect.left - 16;
var distance = endPoint - startPoint;
var startTime = Date.now();
var duration = distance / velocity;

animate();

function animate() {
  requestAnimationFrame(function () {
    var now = Date.now();
    var timeDelta = Math.min(now - startTime, duration);
    var timePercent = timeDelta / duration;
    var offset = timePercent * distance;
    _moveElements(dragOptions, offset, service.updateDragElement);
    if (timeDelta < duration) {
      animate();
    }
  });
}

使用 setTimeout/setInterval 可能会给动画添加人为滞后，并且不会在不同设备上一致地执行。