Velocity.js绕中心轴旋转

Velocity.js Rotation Around Center Axis

本文关键字：旋转 js Velocity      更新时间：2023-09-26

我正试图使齿轮绕z轴旋转。它按预期工作，但在5000持续时间后发生逆转。如何阻止它倒车，只让它前进？

感谢

var gear_width = $('.gear').width();
var gear_height = $('.gear').height();
$('.gear').velocity({  rotateZ:-360 }, { duration: 5000, easing: "linear", loop: true,});

这是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/

相关文章：