.用曲线制作动画

首先看一下：

猫需要移动到 a 中的 xcurve。 （见箭头）

当猫击中 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 1.4 开始就可以工作jQuery 文档 http://api.jquery.com/animate/并且提到的缓动需要 jQuery UI（但仅效果核心 https://github.com/jquery/jquery-ui/blob/master/ui/jquery.effects.core.js模块）。每个.animate()呼叫占整圆路径的四分之一，反之亦然easeInQuad vs. easeOutQuad使路径看起来像圆形路径，而不是直接到达新位置。