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 (按顺时针方向旋转负值)

由于顺时针方向上的循环确实有效，所以在逆时针方向上快速地循环以获得无限的循环是这样的，直到bug被修复为止：

小提琴：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;
}

联署材料：

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

loopMeLeft();

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

这是一个更复杂的例子，加速和减速齿轮动态，虽然有点粗糙的边缘，但总的想法在那里。

小提琴：https://jsfiddle.net/AtheistP3ace/znyLtfaf/4/