用于制作交互式动画的最佳低级画布库?

时间:2014-06-28 16:46:36

标签: html5-canvas kineticjs fabricjs easeljs

我正在评估画布库,我的需求是:

  1. 我希望能够轻松构建漂亮的按钮 我可以轻松地捕捉事件。按钮绘图 帮助者会很酷

  2. 我将构建一个供其他人使用的系统来制作动画     结合移动测试,图像和声音的场景。我永远不会     我自己绘制复杂的形状,我可能画的最多     一些文字周围的按钮。

  3. 希望完全与低级机械绝缘 每帧绘图回调。确实帮助,但是     我将要与Web Audio API同步,并希望保留     获得超紧时间控制

  4. 我对相当低级别的动画脚本感到满意,宁可不要将Canvas改成某些东西 完全不同的范例,但在这一点上不确定

  5. 需要适合触摸iOs

  6. 我最好使用一个有良好文档和高卡车号码的人。 Canvas libs的状态让我想起了JS libs的状态 10年前,我宁愿不投资那些没有投资的东西 背后有一个真正的“团队”。卡车号码== 1让我担心。

2 个答案:

答案 0 :(得分:1)

你标记了KineticJS,所以我可以稍微说一下它是如何起作用的。

1)这是一个很棒的工具,用于跟踪画布上的形状,捕获点击并移动它们。在任何形状上放置图像都很容易,但我会用另一个程序来制作这些图像。

2)即使你没有做太多按钮之外的事情,KineticJS也提供了一些很好的操作画布的功能,我相信你会用很多它们为别人制作工具。

3)KineticJS提供了一个动画对象,可以为您重复调用draw()方法。您可以定义绘制方法以创建动画。

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

5)您可以捕捉广泛的事件,包括“触摸”,“点击”等。如果需要,可以在适当或不同时轻松地对待它们。此外,您可以简单地将形状标记为“可拖动”,并且可以正确处理所有这些。

6)Kinetic有着壮观的文档和示例,但现在看来,http://kineticjs.com/似乎缺少教程,我在其他地方找不到它们。这有点令人担忧,但是文档仍然存在,我的猜测是,由于KineticJS仍在积极开发中,它们很快就会恢复。

答案 1 :(得分:0)

我将在#1:

中权衡

好看的按钮:

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

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

http://blog.mikeswanson.com/post/29634279264/ai2canvas

这里的关键是画布会为您缩放矢量按钮,这样您就可以在小型移动屏幕和大型桌面屏幕上获得专业,精致的外观。

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

一个好的动画库是Greensock。它还可以帮助您构建时间轴(类似于Flash时间轴)。

http://www.greensock.com/gsap-js/

对于canvas库,请查看Stackoverflow的姐妹站点,该站点提供软件建议:

http://softwarerecs.stackexchange.com

祝你的项目好运!