. 用曲线动画

Posted 2023-05-08

【中文标题】. 用曲线动画

【英文标题】：.animate with a curve

【发布时间】：2012-01-04 05:43:18

【问题描述】：

先看看：

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

但是猫是这样移动的：

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

【问题讨论】：

***.com/questions/2240052/…

YUI 还提供了对弯曲动画的支持。 developer.yahoo.com/yui/examples/animation/control.html

【参考方案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 UI（但只有Effect Core 模块），它从jQuery 1.4 开始工作。每个.animate() 调用占整圈路径的四分之一，而相反的easeInQuad 与easeOutQuad 使路径看起来像一个圆形路径，而不是直接到达新位置。

【讨论】：

嗨，伙计！我在错误控制台中收到此错误：错误：f.easing[e.animatedProperties[this.prop]] 不是函数源文件：file:///C:/Dokumente%20und%20Einstellungen/Administrator/Desktop/tyler /js/js/jquery-1.6.4.min.js 行：4

您可能需要包含 jQuery UI（仅 Effects Core 部分），尤其是 file。

【参考方案2】：

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

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

【参考方案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 永远不要忘记 J-E-S-U-S 爱你 :D

PPPS jQuery 适用于更简单的动画，但对此类问题缺乏兴趣以及 jQuery 动画库缺乏更新证明 jQuery 本身对于更复杂的动画已死。