Schleife/Restart Animation mit Geschwindigkeit ohne Wiedergabe im Reverse

Question

Ich verwende Velocity, um ein Element über den Bildschirm zu übersetzen. Nach Abschluss möchte ich, dass das Element zu seinem Ursprungspunkt zurückkehrt und die Animation unter Umgehung des Standard-Reverse-Effekts, der während des Schleifens auftritt, durchläuft.

Ich habe meine Standard-Animationsfunktion, in die ich meine Werte übergeben:

$(element).delay(initialDelay).velocity(animationValues, {duration: duration, easing: easing, loop: loop, complete: function() { 
    callback(); 
}}); 

Gibt es eine Weise, die ich diese Funktionalität wie bei der Übersetzung ein Element nur es dreht, um im Gegensatz zu erreichen könnte?

Answer 1

Stellen Sie sicher, dass die Funktion in der Animationsfunktion initialisieren - siehe Beispiel unten:

$(document).ready(function(){ 
 

 
    var el = $('#target'); 
 
    
 
    function anim() { 
 
    el.velocity({ 'left': 0 }, 0) 
 
     .velocity({ 'left': 300 }, { duration: 2000, complete: anim }); 
 
    }; 
 

 
    anim(); 
 

 
});

#target { 
 
    background: #999; width: 100px; height: 100px; position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdn.jsdelivr.net/velocity/1.4.2/velocity.min.js"></script> 
 
<div id="target"></div>