Question

我有这个轮播类型的项目：

http://codepen.io/r3plica/pen/xOpzqK?editors=1111

我现在要做的是改变它的行为。我希望拖动知道鼠标的速度，并尝试模仿滚动到那个速度。当我松开鼠标时，我希望滑块继续滑动但在一段时间内减速。我的第一步是试图获得鼠标的实际速度，所以我这样做了：

var eventHandler = function (e) {

    var event = _options.event;
    var timestamp = new Date().getTime();
    var touches = event.touches = e.originalEvent !== undefined ? e.originalEvent.touches : null;

    if (e.type === 'mousedown') {

        // Assign the timer to our event
        event.timer = $timeout(function () {

            // If we have not already enabled the event
            if (!event.enabled) {

                // Set our startX and the time
                event.startX = touches ? touches[0].pageX : e.clientX;
                event.timestamp = timestamp;

                //console.log(event);

                // Enable our drag
                event.enabled = true;
            }
        }, 100);
    }

    if (e.type === 'mousemove' && event.enabled) {

        // Get our old position
        var x = event.currentX;

        //console.log(timestamp);
        //console.log(event.timestamp);
        //console.log('calc', timestamp - event.timestamp);

        // Update our current position and speed
        event.currentX = touches ? touches[0].pageX : e.clientX;
        event.distance = event.currentX - (x || event.startX);
        event.time = timestamp - event.timestamp;
        event.timestamp = timestamp;
        event.speed = (event.distance / event.time) * $window.innerWidth;

        //console.log('distance', event.distance);
        //console.log('time in seconds', event.time);
        //console.log('speed', event.speed);
        //console.log('------');

        // Work out our offset
        var offset = event.currentX / $window.innerWidth;

        console.log(offset);

        // If we have not started
        if (!event.started) {

            // Set our initial start position
            event.xOffset = offset;

            // Initial our position
            event.oldX = event.pageX;

            // Set to started
            event.started = true;
        }

        // Udpate our position
        event.pageX = (offset - event.xOffset) + event.oldX;

        // Set our new offset
        event.xOffset = offset;

        // Update our element
        _updateDragElement(_options.element, event);

        // Update our old position
        event.oldX = event.pageX;
    }

    if (['mouseup', 'mouseout'].indexOf(e.type) > -1) {

        // Clear our timer
        $timeout.cancel(event.timer);

        //console.log(event);

        // If our data is set
        if (event.enabled) {

            // Unset it
            event.enabled = false;
        }

        // Stop the drag
        event.start = false;
    }
}

我会将其分解为事件

鼠标按下

当触发 mousedown 事件时，您可以从 eventHandler 看到，开始位置 startX 会与当前时间戳

鼠标移动

当 mousemove 事件被触发时，我通过获取 currentX 中的值来检查我们是否已经在移动。然后我设置 currentX ，距离行进（当前位置减去最后一个位置或者如果没有当前位置则开始位置。）然后我计算出时间并记录当前的时间戳，最后我计算出速度。然后我通过将 currentX 除以窗口的宽度来获得 xOffset 。如果动画尚未开始，我设置 xOffset 并将 oldX 设置为当前的 pageX ，然后启动动画。 pageX 由 xOffset 减去当前 xOffset 加上 oldX 计算出来，然后我更新新的 X偏移即可。然后我使用新的转换更新元素，最后将 oldX 设置为当前的 pageX 。

鼠标向上

为此，我只是禁用并停止动画。

问题

我遇到的问题是速度非常低，因此动画效果不佳。我决定通过窗口宽度来加倍速度，但是动画并没有更好，因为它只是在四处晃动。我想我的计算不正确，所以我希望有人可以看看并给我一些建议。

Answer 1

我检查了你的codepen，你的计算看起来很好。滚动元素似乎只缺少过渡属性，请尝试将过渡属性赋予.pk-slider-base类。

.pk-slider .pk-slider-base {
  -webkit-transition: all 2s ease;
  transition: all 2s ease;
}

您还可以尝试在updateView()中使用Javascript添加转换。

请参阅以下内容：

function updateView() {
  "use strict";
  finalX = pageX * mySpeed;
  console.log('X', pageX);
  console.log('speed', mySpeed);
  yourTrans = 'translateX(' + finalX + 'px)';
  yourElement.style.transform = yourTrans;
  /*Adding transition*/
  yourElement.style.WebkitTransition = "all 2s";
  yourElement.style.transition = "all 2s";
}

根据鼠标的速度滑动内容

鼠标按下

鼠标移动

鼠标向上

问题

1 个答案: