Velocity.js 绕中心轴旋转
Velocity.js Rotation Around Center Axis
我正在尝试让齿轮绕其 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});
}
这里有一个更复杂的例子,动态地加速和减速齿轮,虽然边缘有点粗糙,但总体思路就在那里。
我正在尝试让齿轮绕其 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});
}
这里有一个更复杂的例子,动态地加速和减速齿轮,虽然边缘有点粗糙,但总体思路就在那里。