带曲线的.animate

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文档的说法，它可以从jQuery文档 1.4开始工作，所提到的附加条件需要jQuery UI (但只需要效应芯模块)。每个.animate()调用占一个完整循环路径的四分之一，反向easeInQuad与easeOutQuad使路径看起来像一个圆形路径，而不是直接到新位置。

Answer 2

http://tympanus.net/codrops/2010/05/07/stunning-circular-motion-effect/

这是通过谷歌搜索"jquery径向运动“发现的。

Answer 3

2021年的现代答案。您不必为此使用jQuery。但我猜你是想的。您可以将流行的npm库与jQuery结合使用，比如popmotion (每周下载600 k)，如下所示：

// 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，我不是说波波运动应该和jQuery一起使用。我只是说可以的。

PPS永远不要忘记爱你

对于更简单的动画来说，PPPS jQuery是很好的，但是对像这样的问题缺乏兴趣，以及缺乏jQuery动画库的更新都证明了jQuery本身对于更复杂的动画来说已经死了。