javascript - .使用曲线制作动画

Question

先来看看:

猫需要沿着曲线移动到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();

但是猫是这样移动的:

有没有办法让猫在这种曲线中移动？

Answer 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 使路径看起来像循环路径而不是直接到新位置。