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

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

Ответ 1

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

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

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

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

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

Ответы

Ответ 1