Animazione Loop/Restart con velocità senza riproduzione al contrario

Question

Sto utilizzando Velocity per tradurre un elemento attraverso lo schermo. Al termine, desidero che l'elemento torni al punto di origine e loop l'animazione, ignorando l'effetto inverso predefinito che si verifica durante il ciclo.

ho la mia funzione di animazione di serie in cui mi passa i miei valori:

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

C'è un modo ho potuto ottenere questa funzionalità con la traduzione di un elemento in contrasto con appena ruotare?

Answer 1

Assicurarsi di inizializzare la posizione nella funzione di animazione - vedere l'esempio di seguito:

$(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>