带曲线的动画 [英] .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屋！