Hinzufügen Beschleunigung auf AnfrageAnimationFrame

Question

Ich muss den gleichen Effekt wie hier reproduzieren: http://www.chanel.com/fr_FR/mode/haute-couture.html = ein Swipe-Effekt auf Mausbewegung Ereignis.

Ich brauche nur etwas Hilfe für den Animationsteil.

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

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

    }); 

Hier ist, was ich bisher getan habe. Es funktioniert wie angenommen, aber wie Sie sich vorstellen können, ist es ziemlich roh, ich brauche eine Erleichterung in diesem. Wie kann ich meine frame() function bearbeiten, um etwas glatter zu bekommen?

Edit: Ich kann CSS Transition/Animation nicht verwenden, da ich den Wert auf AnfrageAnimationFrame (jeweils 1/30 Sek.) Ändern.

Answer 1

Fügen Sie einen css-Übergang zu Ihrem Element mit der Klasse images-gallery hinzu. Wie unten:

transition: transform .5s ease-in;

Answer 2

Sie können Ihre eigene ease Funktion erstellen und verwenden Sie es in Ihrem frame Funktion:

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; 

}); 

Answer 3

Ich glaube, ich habe eine Antwort für Sie gefunden. Es basiert auf this library

Zuerst würde ich nur greifen eine Funktion von dieser Seite

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

Dann würde ich eine modifizierte Form des Beispiel-Code, so etwas wie dieses Ich

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); 
} 

verwenden könnte ändern, wie 'stop' berechnet wird, könnte ich etwas schreiben, um sicherzustellen, dass es auf destx usw. endet, aber das ist das grundlegende Format

Zeigt es in this jsfiddle

Ich bin eigentlich ein bisschen stolz auf dieses. Ich wollte das schon eine Weile herausfinden. Ich bin froh, dass ich einen Grund dazu hatte.