带曲线的动画 [英] .animate with a curve
问题描述
猫需要在曲线中移动到x。 (见箭头)
当猫碰到x时,它应该保持10秒,之后猫应该回到o,再次以曲线形式出现,并且重复。
我试过这段代码:
函数曲线(){
$('#cat')。delay(10000).animate({top:' - = 20',left:' - = 20'},500,function(){
$('#cat')。delay(10000).animate({top:'+ = 20',left:'+ = 20'},500,function(){
curve();
});
});
}
curve();
但是猫正在像这样移动:
有没有如何让猫在这种曲线中移动?
您可以使用easing来实现这一点,运动:
函数曲线(){
$('#cat')。delay(10000).animate {top:+ = 20px,left:+ = 20px},{
duration:500,
specialEasing:{top:'easeOutQuad',left:'easeInQuad'},
完成:function(){
$('#cat')。animate({top: - = 20px,left:+ = 20px},{
duration:500,
specialEasing:{top:'easeInQuad',left:'easeOutQuad'},
complete:function(){
//重复其他方法
}});
}
});根据
$ b /api.jquery.com/animate/rel =nofollow> jQuery文档,并且提到的简化操作要求使用jQuery UI(但仅限于 Effect Core 模块)。每个 .animate()
呼叫帐户的四分之一整圆路径,反向 easeInQuad
与 easeOutQuad
使得路径看起来像一个圆形路径,而不是直接到达新的位置。
First take a look:
The cat needs to move to the x in a curve. (see the arrow)
When the cat hits the x, it should stay 10 seconds, and after that the cat should go back to o, again in a curve, and repeat.
I tried it with this code:
function curve() {
$('#cat').delay(10000).animate({top: '-=20',left: '-=20'}, 500, function() {
$('#cat').delay(10000).animate({top: '+=20', left: '+=20'}, 500, function() {
curve();
});
});
}
curve();
But the cat is moving like this:
Is there a way to get the cat to move in this kind of curve?
解决方案 You can use easing to achieve that, by doing a compound movement :
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.
}});
}
});
}
It works since jQuery 1.4, according to jQuery docs and the easings mentionned require jQuery UI (but only the Effect Core module). Each .animate()
call accounts for a quarter of a full circle path, and the reverse easeInQuad
vs. easeOutQuad
makes the path looks like a circular path instead of straight to the new position.
这篇关于带曲线的动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!