【问题标题】:Great animation engines for Javascript? - Javascript/Animations [closed]很棒的 Javascript 动画引擎? - Javascript/动画[关闭]
【发布时间】:2010-07-19 10:03:47
【问题描述】:

我正在尝试实现基于时间轴的动画,其中动画将能够:

  • 暂停
  • 已恢复
  • 快进
  • 放慢速度
  • 反转
  • ...

是否有任何用于 Javascript 的动画/补间引擎可用于此目的?还是强烈推荐?


Hwlp 会很棒,尤其是因为这真的让我很感兴趣! =)

【问题讨论】:

  • JQuery 和其他有通用动画引擎,但如果你需要一个性能和内存稳定的引擎,用纯 JavaScript 编写你自己的引擎。对于您提到的功能,这并不难。在与您类似的情况下,包含在 120 行类中的队列和计时器对我有用。祝你好运。

标签: html animation javascript tween


【解决方案1】:

我不知道你是否仍然感兴趣,但我正在寻找和你一样的东西(相信我,我正在寻找 HOURS 和几个小时),我不知道我是否真的找到了什么我正寻找。最接近的是 jsAnim (http://jsanim.com),它现在工作正常。我列出了我在网上找到的内容:

(评论非常中性,测试很快。请用镊子夹住。)

  • jsAnim: 语法很容易专注于动画而不是对象架构(参见 YUI)(这对工程师来说非常棒......)。缓动选项不是很棒,但很好。总的来说,工作正常。
  • Scripty2(以前的 Script.aculo.us): 未针对需要 Prototype 进行测试。
  • moo.fx: 未针对需要原型或 mootools 进行测试。
  • YUI 2/3 动画: 工作正常,但它的工程师代码对于休闲的前端动画有很高的学习曲线。
  • $fx(): 占用空间非常小(只有 3 KB!)。如果只有宽松,那将是一个选择。
  • Trident-js: 似乎有一个非常强大的时间线,并且在演示中看起来很棒,但它对我一点用都没有,而且它的简陋文档没有多大帮助。
  • Animator.js: 语法吓到我了。在我看来也很业余。
  • JSTweener/GX/xAnimation:这些都没有引起我的注意。对我来说似乎很业余。
  • 用于 jQuery 代码生成的 Glimmer GUI: 安装程序未安装在我的机器上(安装程序的未知错误)。
  • Raphael/Burst Engine/Processing.js/Pixastic/Cake-js:它们用于画布/矢量。另一种(很酷)的东西。
  • Spritely:还有另一种东西:精灵动画。

因此,就目前和我目前的动画需求而言,赢家是 jsAnim。我也想尝试一下 Scripty2moo.fx 因为它们似乎已经存在了一段时间(从 2005 年开始,Scripty2 都是 Script.acoulo 的第二个版本.us)。

我的 2 美分。希望它可以帮助某人。现在上帝,我想要我最后的 8 小时!!!

【讨论】:

  • 我没有意识到 jsAnim 有多棒。我看到你选择了 jsAnim 而不是我选择的 jsAnim 列表中的库。所以我再次检查了它,它很棒。经理选项很棒
【解决方案2】:

我认为你要找的东西不存在,你应该自己写。

我还认为 Adob​​e 正在推出一套用于 JS/HTML/CSS 动画的工具,您可以在 Google IO 上查看他们的演示文稿。

【讨论】:

    【解决方案3】:

    我认为所有这些框架都会为你做到这一点(我看到的并不是所有框架都支持反向):

    我更喜欢 jQuery。

    【讨论】:

    【解决方案4】:

    尝试使用 Yahoo UI:

    http://developer.yahoo.com/yui/3/examples/

    查看动画部分。

    【讨论】:

      【解决方案5】:

      您可以在

      上查看 jQuery animate

      http://www.visualjquery.com/

      在搜索字段中写下“动画”点击项目,您将在那里看到一些示例。

      【讨论】:

      • jQuery 很棒,但我发现创建一个基于时间轴的动画非常困难,而且它也足够灵活,可以被视为“电影”。
      【解决方案6】:

      我建议BetweenJS 为Javascript 提供BetweenAS3 的跨浏览器移植,您所要求的一切都已实现并可以使用 http://github.com/sazaam/BetweenJS/

      【讨论】:

        【解决方案7】:

        如需完整功能集,请查看KUTE.js。它具有变换、盒子模型属性、滚动、演示属性、SVG 变形、SVG 绘制、补间集合、暂停和大量缓动功能。

        【讨论】:

          猜你喜欢
          • 2018-06-10
          • 2015-07-21
          • 2012-04-27
          • 1970-01-01
          • 2019-03-21
          • 2015-04-18
          • 2021-04-15
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多