Velocity.js Rotazione attorno all'asse centrale

Question

Sto provando a far ruotare una marcia attorno al suo asse z. Funziona come previsto, ma poi si inverte dopo la durata di 5000. Come faccio a impedire che si inverta e lo faccia andare avanti?

Grazie

var gear_width = $('.gear').width(); 
var gear_height = $('.gear').height(); 

$('.gear').velocity({ rotateZ:-360 }, { duration: 5000, easing: "linear", loop: true,}); 

Answer 1

Si tratta di un bug noto in velocità e Julian dice che sarà fissa, ma non v'è alcuna data nota di rilascio per quanto ne so:

https://github.com/julianshapiro/velocity/issues/453 (Ruota Ruota valore negativo indietro in senso orario)

Poiché il looping in senso orario funziona davvero, un rapido aggiramento per ottenere loop infiniti in senso antiorario è qualcosa del genere fino a quando il bug non viene risolto:

Fiddle: https://jsfiddle.net/znyLtfaf/2/

HTML:

<div class="gear gearRight">rotate right</div> 
<div class="gear gearLeft">rotate left</div> 

CSS:

.gear { 
    width: 100px; 
    height: 100px; 
    position: absolute; 
    background: red; 
} 

.gearRight { 
    top: 100px; 
    left: 100px; 
} 

.gearLeft { 
    top: 300px; 
    left: 100px; 
} 

JS:

$('.gearRight').velocity({ rotateZ: "+=360" }, { duration: 5000, easing: "linear", loop: true}); 

loopMeLeft(); 

function loopMeLeft() { 
    $('.gearLeft').velocity({ rotateZ: "-=360" }, { duration: 5000, easing: "linear", complete: loopMeLeft}); 
} 

Ed ecco esempio un po 'più complicato con l'accelerazione e il rallentando gli ingranaggi d yamicamente anche se un po 'ruvido intorno ai bordi ma l'idea generale è lì.

Fiddle: https://jsfiddle.net/AtheistP3ace/znyLtfaf/4/