javascript - library - Rotación de Velocity.js alrededor del eje central

velocity.js download

Question

Estoy tratando de hacer que un engranaje gire alrededor de su eje z. Funciona como se esperaba, pero luego se revierte después de la duración de 5000. ¿Cómo evito que se invierta y solo lo hago avanzar?

Gracias

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

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

Answer 1

Este es un error conocido en Velocity y Julian dice que lo arreglará, pero no hay una fecha de lanzamiento conocida hasta donde yo sé:

https://github.com/julianshapiro/velocity/issues/453 (Girar el valor negativo gira en sentido horario)

Como el bucle en el sentido de las agujas del reloj sí funciona, un trabajo rápido para obtener un bucle infinito en el sentido contrario a las agujas del reloj es algo así hasta que se corrija el error:

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

Y aquí hay un ejemplo un poco más complicado con la aceleración y ralentización de los engranajes de forma dinámica, aunque un poco áspero en los bordes, pero la idea general está ahí.

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