Я пытаюсь заставить шестерню вращаться вокруг своей оси z. Он работает так, как ожидалось, но затем меняется после 5000 раз. Как я могу остановить его от вспять и сделать его только вперед?
Спасибо
var gear_width = $('.gear').width();
var gear_height = $('.gear').height();
$('.gear').velocity({ rotateZ:-360 }, { duration: 5000, easing: "linear", loop: true,});
Это известная ошибка в 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});
}
И вот немного более сложный пример: ускорение и замедление передач динамически, хотя и немного грубое по краям, но общая идея есть.