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

- Camrin Parnell

---

有人有任何想法吗？ - Camrin Parnell

Answer 1

这是Velocity中已知的一个问题，Julian表示他将修复它，但据我所知没有已知的发布日期：

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/

- AtheistP3ace

---

嗨，Atheist，感谢你的帮助！我尝试运行这个代码片段，但是它没有任何反应？即使按下“开始”按钮也是如此？ - Camrin Parnell

哎呀，它不喜欢我包含速度的方式。我一秒钟修复一下。 - AtheistP3ace

好的@CamrinParnell，请尝试使用新的fiddle链接。 - AtheistP3ace

@CamrinParnell，你有时间再看一下吗？我认为你会发现这个答案解释了为什么会出现这种情况，并提供了一个临时解决方案，直到速度开发人员修复该问题。 - AtheistP3ace

@CamrinParnell 你好吗？ - AtheistP3ace

嗨 Atheist，非常感谢你的帮助。抱歉回复晚了……我去度假了。 - Camrin Parnell