Velocity.js绕中心轴旋转

我正试图让齿轮围绕其z轴旋转.它按预期工作,但在5000持续时间后反转.我该如何阻止它倒车而只是让它继续前进？

谢谢

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

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

AtheistP3ace.. 8

这是Velocity中一个已知的错误,Julian说他将修复它,但据我所知,目前还没有已知的发布日期:

https://github.com/julianshapiro/velocity/issues/453 (旋转负值顺时针旋转)

由于顺时针方向的循环确实有效,因此在修复错误之前,快速解决逆时针方向的无限循环是这样的:

小提琴:https://jsfiddle.net/znyLtfaf/2/

HTML:

rotate right
rotate left

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

这里有一个更复杂的例子,动态加速和减速,虽然边缘有点粗糙,但总的想法就在那里.

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

这是Velocity中一个已知的错误,Julian说他将修复它,但据我所知,目前还没有已知的发布日期:

https://github.com/julianshapiro/velocity/issues/453 (旋转负值顺时针旋转)

由于顺时针方向的循环确实有效,因此在修复错误之前,快速解决逆时针方向的无限循环是这样的:

小提琴:https://jsfiddle.net/znyLtfaf/2/

HTML:

rotate right
rotate left

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

这里有一个更复杂的例子,动态加速和减速,虽然边缘有点粗糙,但总的想法就在那里.

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