制作交互式动画的最佳低级画布库？答案

【问题标题】：Best low level canvas library for making interactive animations?制作交互式动画的最佳低级画布库？
【发布时间】：2014-08-19 13:48:14
【问题描述】：

我正在评估画布库，我的需求是：

我想让构建漂亮的可移动按钮变得容易我可以很容易地捕捉到事件。按钮绘图助手会很酷
我将构建一个系统供其他人用来创建动画结合移动测试、图像和声音的场景。我永远不会自己画复杂的形状，我可能画的最多的是一些文本周围的按钮。
我确实不想要与低级机器完全隔离每帧绘图回调。确实有帮助，但是我将与 Web Audio API 内容同步并希望保留访问超严格的时序控制
我对相当低级的动画脚本很满意，我宁愿不要它把 Canvas 变成一些完全不同的范式，但在这一点上不确定
需要很好地在 iO 上进行触控
理想情况下，我希望使用具有良好文档和高卡车编号的车辆。 Canvas 库的状态让我想起了 JS 库的状态 10 年前，我宁愿不投资那些不背后有一个真正的“团队”。卡车号 == 1 让我担心。

【问题讨论】：

【解决方案1】：

你标记了 KineticJS，所以我可以稍微介绍一下它的工作原理。

1) 它是跟踪画布上的形状、捕捉点击和移动它们的绝佳工具。将图像放置在任何形状上都很容易，但我会使用另一个程序来制作这些图像。

2) 即使您除了按钮之外没有做太多事情，KineticJS 也提供了一些很好的功能来操作画布，我相信您会在为其他人制作工具时使用其中的很多功能。

3) KineticJS 提供了一个动画对象，它可以为您重复调用 draw() 方法。你定义你的 draw 方法来创建动画。

4) 它更像是画布的包装。您使用舞台和图层，但画布本身仍然有很多透明度，您也可以随时进行直接操作。

5) 您可以捕获范围广泛的事件，包括“触摸”、“点击”等。如果需要，可以很容易地在适当的时候将它们相同或不同地对待。此外，您可以简单地将形状标记为“可拖动”，它会适当地处理所有这些。

6) Kinetic 拥有出色的文档和示例，但现在看来，http://kineticjs.com/ 似乎缺少这些教程，而且我在其他地方找不到它们。这有点令人担忧，但文档仍然存在，我猜他们很快就会恢复，因为 KineticJS 仍在积极开发中。

【讨论】：

感谢您的意见。你会说如果我只是在画布上寻找薄薄的单板 Kinetic 是一个不错的选择吗？
这就是我使用它的原因，我认为它让我在易用性和更深入的控制之间取得了很好的平衡。我现在正在为它构建一些 C++ 包装器，这让我了解了更多关于胆量的知识，这让我印象深刻。

【解决方案2】：

我会权衡#1：

漂亮的按钮：

动手...使用 Adobe Illustrator 创建一组按钮矢量图像 (.svg)。

如果您需要在运行时对按钮设计进行低级控制，请使用 Mike Swanson 的这个出色插件将 Illustrator 图像转换为画布绘图命令：

这里的关键是画布会为您缩放矢量按钮，因此您在小型移动屏幕和大型桌面屏幕上始终都能获得专业、精美的外观。

您可以使用画布从头开始构建按钮的每个部分，但不要重新发明轮子。

一个好的动画库是 Greensock。它还可以帮助您构建时间线（有点像 Flash 时间线）。

关于画布库，请查看 Stackoverflow 提供软件推荐的姊妹网站：

祝你的项目好运！

【讨论】：