javascript - 在 requestAnimationFrame 上添加缓动

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() 函数 以获得更流畅的效果？

编辑:我无法使用 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 中

我真的为这个感到骄傲。一段时间以来，我一直想弄清楚这一点。很高兴我有理由这么做。