Question

我需要重现与此处相同的效果：http://www.chanel.com/fr_FR/mode/haute-couture.html =对鼠标移动事件的滑动效果。

我只需要动画部分的帮助。

    function frame() {
      $('.images-gallery').css({
        'transform': 'translateX('+ -mouseXPerc +'%)'
      });
      requestAnimationFrame(frame);
    }

    requestAnimationFrame(frame);
    $(document).on('mousemove',function(e){
      mouseXPerc = e.pageX/containerWidth*100;

    });

这是我到目前为止所做的。 它按预期工作，但你可以想象，它非常原始，我需要一些缓解。如何编辑frame() function以使某些内容更顺畅？

编辑：我无法使用CSS转换/动画，因为我更改了requestAnimationFrame上的值（每1/30秒）。

Answer 1

我想我找到了答案。它基于this library

首先，我只想从该网站获取一个功能

function inOutQuad(n){
    n *= 2;
    if (n < 1) return 0.5 * n * n;
    return - 0.5 * (--n * (n - 2) - 1);
};

然后，我会使用示例代码的修改形式，类似这样

function startAnimation(domEl){
    var stop = false;

    // animating x (margin-left) from 20 to 300, for example
    var startx = 20;
    var destx = 300;
    var duration = 1000;
    var start = null;
    var end = null;

    function startAnim(timeStamp) {
        start = timeStamp;
        end = start + duration;
        draw(timeStamp);
    }

    function draw(now) {
        if (stop) return;
        if (now - start >= duration) stop = true;
        var p = (now - start) / duration;
        val = inOutQuad(p);
        var x = startx + (destx - startx) * val;
        $(domEl).css('margin-left', `${x}px`);
        requestAnimationFrame(draw);
    }

    requestAnimationFrame(startAnim);
}

我可能会更改“停止”的计算方式，我可能会写一些内容以确保它以destx等结束，但这是基本格式

在this jsfiddle

中显示

我真的为这个感到自豪。我一直想要解决这个问题。很高兴我有理由。

Answer 2

您可以创建自己的ease功能并在frame功能中使用它：

var ease = function() {
    var x = 0;
    return function(x_new) {
        x = (x_new+x)*.5;
        return x;
    }
}();

function frame() {
  $('.images-gallery').css({
    'transform': 'translateX('+ -ease(mouseXPerc) +'%)'
  });
  requestAnimationFrame(frame);
}

requestAnimationFrame(frame);
$(document).on('mousemove',function(e){
  mouseXPerc = e.pageX/containerWidth*100;

});

在requestAnimationFrame上添加缓动

2 个答案: