Smooth requestAnimationFrame mit Jquery.animate?

Ich versuche, ein div nach rechts mit requestAnimationFrame und Jquery animate() zu verschieben. Mein div scheint jedoch zu stottern anstatt sich kontinuierlich zu bewegen. Wie kommt es, dass es immer wieder startet und aufhört?Smooth requestAnimationFrame mit Jquery.animate?

Here is a JSfiddle of my implementation

Wenn Sie nur wollen, hier mein Code sehen, ist der html:

<body> 
    <div id="back"> 
    <div id="myDiv"> 
    </div> 
    </div> 
</body>

Die CSS:

#myDiv { 
    height: 50px; 
    width: 50px; 
    background-color: black; 
    position: absolute; 
} 

#back { 
    height: 200px; 
    width: 200px; 
    background-color: teal; 
}

Und das javascript:

function updateFrame(){ 
     $("#myDiv").animate({left: '+=25px'}, function(){ 
     window.requestAnimationFrame(updateFrame); 
     }); 
    } 


    updateFrame();

Quelle

2016-03-22 MarksCode

warum wollen Sie '.animate kombinieren()' 'mit rAF'? Gab es ein Problem mit der '.animate()' Methode? –

Was ist, wenn ich mehr als nur dieses div auf dem Animationsframe animieren möchte? – MarksCode

hmm, das ist meiner Meinung nach noch kein gutes Argument für die Kombination. '$ ('# myDIV')' gibt momentan ein Element zurück. Sie könnten stattdessen einen Klassenselektor (oder was nicht) übergeben und mehrere Elemente animieren. –

Versuchen Sie folgendes:

function updateFrame(){ 
     $("#myDiv").animate({left: '+=1px'}, 10, function(){ 
     window.requestAnimationFrame(updateFrame); 
     }); 
    } 


    updateFrame();

Verwendung left: 1px statt 25px dann speed verwenden animieren.

jsFiddle

Quelle

2016-03-22 05:57:13 Pedram

Das scheint zu funktionieren, danke! – MarksCode

Smooth requestAnimationFrame mit Jquery.animate?

Antwort

Verwandte Themen