首先来看看:
猫需要在曲线中移动到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();
但猫正在这样移动:
有没有办法让猫在这种曲线中移动?
答案 0 :(得分:1)
http://tympanus.net/codrops/2010/05/07/stunning-circular-motion-effect/
通过谷歌搜索“jquery径向运动”
答案 1 :(得分:1)
您可以通过复合运动使用缓动来实现这一目标:
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
相反会使路径看起来像圆形路径,而不是直接到新位置。
答案 2 :(得分:0)
有一个小脚本,仅用于不是直线的动画,称为pathAnimator
答案 3 :(得分:0)
2021 年的现代答案。您不必为此使用 jQuery。但我假设你想要。您可以将流行的 npm 库(例如 popmotion(每周 60 万次下载)与 jQuery 结合使用,如下所示:
// poo.el.animate({top: footerTop - horsePooHeight})
// your imports may vary - I'm using Angular, popmotion focuses more on Vue and React
import { cubicBezier } from 'popmotion'
declare const popmotion: any
const {tween, easing} = popmotion
const fling = cubicBezier(0, .42, 0, 1)
tween({from: 100, to: 200, duration: 400, ease: fling}).start((v) => $(el).css('top', v))
tween({from: 100, to: 300, duration: 400, ease: easing.linear}).start((v) => $(el).css('left', v))
el 是一个 jQuery 元素。
好消息。它在缓和方面获得了全世界更多的力量,允许曲线。坏消息是它有点复杂,但如果你能理解上面的代码,你会没事的。
PS 我不是说 popmotion 应该与 jQuery 一起使用。我只是说可以。
PPS 永远不要忘记 J-E-S-U-S 爱你 :D
PPPS jQuery 适用于更简单的动画,但对此类问题缺乏兴趣以及缺乏 jQuery 动画库的更新证明 jQuery 本身已不再适用于更复杂的动画。