Velocity.js Вращение вокруг центральной оси

Question

Я пытаюсь заставить шестерню вращаться вокруг своей оси z. Он работает так, как ожидалось, но затем меняется после 5000 раз. Как я могу остановить его от вспять и только сделать его вперед?

Благодаря

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

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

Answer 1

Это известная ошибка в скорости и Джулиан говорит, что он будет фиксируя его, но не известно, дата выпуска, насколько я знаю:

https://github.com/julianshapiro/velocity/issues/453 (Поворот отрицательные вращает значение назад по часовой стрелке)

Так как петля по часовой стрелке действительно работает, быстрая работа вокруг, чтобы получить бесконечную петлю в направлении против часовой стрелки, это примерно так, пока ошибка не будет исправлена:

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

А вот немного более сложный пример с ускорением и замедления передач d yamamically хотя немного грубо вокруг краев, но общая идея есть.

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