在requestAnimationFrame上添加缓动 [英] Adding easing on requestAnimationFrame

问题描述

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

I need to reproduce the same effect as here: http://www.chanel.com/fr_FR/mode/haute-couture.html = a swipe effect on mouse move event.

我只需要一些关于动画部分的帮助。

I just need some help on the animation part.

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

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

    });

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

Here's what I've done so far. It works as supposed, but as you can imagine, it's pretty raw, I need some easing in that. How can I edit my frame() function to get something smoother ?

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

Edit : I can't use CSS transition / animation as I change the value on requestAnimationFrame (each 1/30 sec).

推荐答案

我想我找到了答案。它基于此库

I think I've found an answer for you. It's based on this library

首先，我只会从该网站获取一个函数

First, I would just grab a function from that site

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

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

Then, I would use a modified form of the example code, something like this

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 等结束，但这是基本格式

I might change how 'stop' is calculated, I might write something to ensure that it ends on destx, etc, but that's the basic format

在这个jsfiddle

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

I'm actually kinda proud of this one. I've been wanting to figure this out for a while. Glad I had a reason to.

这篇关于在requestAnimationFrame上添加缓动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！