先来看看:
猫需要沿着曲线移动到x。 (见箭头)
当猫击中 x 时,它应该停留 10 秒,然后猫应该回到 o,再次弯曲,并重复。
我用这段代码试过了:
function curve() {
$('#cat').delay(10000).animate({top: '-=20',left: '-=20'}, 500, function() {
$('#cat').delay(10000).animate({top: '+=20', left: '+=20'}, 500, function() {
curve();
});
});
}
curve();
但是猫是这样移动的:
有没有办法让猫在这种曲线中移动?
最佳答案
您可以使用缓动来实现这一点,通过进行复合运动:
function curve () {
$('#cat').delay(10000).animate({top: "+=20px", left: "+=20px"}, {
duration: 500,
specialEasing: {top: 'easeOutQuad', left: 'easeInQuad'},
complete: function () {
$('#cat').animate({top: "-=20px", left: "+=20px"}, {
duration: 500,
specialEasing: {top: 'easeInQuad', left: 'easeOutQuad'},
complete: function() {
// repeat the other way around.
}});
}
});
}
根据 jQuery docs,它从 jQuery 1.4 开始工作并且提到的缓动需要 jQuery UI(但只有 Effect Core 模块)。每个 .animate()
调用占整个圆路径的四分之一,而反向 easeInQuad
与 easeOutQuad
使路径看起来像循环路径而不是直接到新位置。
关于javascript - .使用曲线制作动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8233606/