Velocity.js 围绕中心轴旋转答案

【问题标题】：Velocity.js Rotation Around Center AxisVelocity.js 围绕中心轴旋转
【发布时间】：2015-12-23 04:20:49
【问题描述】：

我正在尝试使齿轮围绕其 z 轴旋转。它按预期工作，但在 5000 持续时间后反转。我如何阻止它反转而只让它前进？

谢谢

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

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

【问题讨论】：

有人有什么想法吗？

标签： javascript jquery animation velocity.js

【解决方案1】：

这是 Velocity 中的一个已知错误，朱利安说他会修复它，但据我所知没有已知的发布日期：

https://github.com/julianshapiro/velocity/issues/453（旋转负值顺时针旋转回来）

由于顺时针方向的循环确实有效，因此在修复错误之前，快速解决逆时针方向无限循环的方法如下：

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

这里有一个更复杂的例子，它动态地加速和减速齿轮，虽然边缘有点粗糙，但总体思路就在那里。

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

【讨论】：

您好无神论者，感谢您的帮助！我试着运行小提琴，它什么也没做？即使按下“开始”按钮？
糟糕，它不喜欢我包含速度的方式。我会修复它一秒钟。
OK @CamrinParnell 试试新的小提琴链接。
@CamrinParnell 你有机会再看一遍吗？我想在速度开发人员解决问题之前，您会找到此问题的答案和解决方法。
@CamrinParnell 你好？