7

先来看看：

在此处输入图像描述

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

但是猫是这样移动的：

在此处输入图像描述

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

4

3 回答 3

1

您可以使用 easing 来实现这一点，方法是进行复合运动：

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 文档和提到的缓动需要 jQuery UI（但只有Effect Core模块）。每次.animate()调用占整圈路径的四分之一，反向easeInQuadvs.easeOutQuad使路径看起来像圆形路径，而不是直接到达新位置。

于 2011-11-22T21:11:17.980 回答
1

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

通过谷歌搜索“jquery 径向运动”找到了这个

于 2011-11-22T20:51:14.300 回答
0

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 本身对于更复杂的动画来说已经死了。

于 2021-05-18T21:32:05.590 回答