.動畫曲線

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

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

通過谷歌搜索“jquery徑向運動”找到了這個

Answer 2

您可以使用緩動來實現這一目標，方法是進行復合運動：

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（但只有Effect Core模塊）。 每個.animate()調用占完整圓形路徑的四分之一，而相反的easeInQuad與easeOutQuad使路徑看起來像一個圓形路徑，而不是直接到達新位置。

Answer 3

2021 年的現代答案。您不必為此使用 jQuery。 但我假設你想要。 您可以將流行的 npm 庫（如 popmotion（每周 60 萬次下載））與 jQuery 結合使用，如下所示：

// 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 我不是說 popmotion 應該與 jQuery 一起使用。 我只是說可以。

PPS 永遠不要忘記耶穌愛你 :D

PPPS jQuery 適用於更簡單的動畫，但對此類問題缺乏興趣以及缺乏 jQuery 動畫庫的更新證明 jQuery 本身對於更復雜的動畫已經死了。