使用 html5 画布创建不复杂的动画使用哪个 js 库？答案

【问题标题】：Which js library to use for creating not complicated animation with html5 canvas?使用 html5 画布创建不复杂的动画使用哪个 js 库？
【发布时间】：2013-02-26 03:28:54
【问题描述】：

我想用 html5 canvas 元素写一些动画。我发现有一些 js 库有助于利用画布功能。例如 KineticJS、FabricJS。但我不知道该使用哪个库。
使用这个库有什么优缺点？或者您可能知道更好的实施方式？

编辑
我将创建一些类似于静态图片的东西，但带有一段动画。例如天空上的浮云，可以撕下花瓣并扔掉的花朵。可能是一些带有太阳的动画。这是一般描述，希望对您有所帮助。

【问题讨论】：

这完全取决于您想做什么，您能否详细说明一下，让我们更了解您想要什么...？即只是一个矩形移动？ ... ?
你不是在谈论那里的动画，你是在谈论通过画布的交互性。

标签： javascript html canvas html5-canvas html5-animation

【解决方案1】：

有 Processing.js，它是 Processing for Java 的一个端口。 Processing.js 是 2d 图像的理想选择。

Raphaël 使用 svg 来绘制图像，这样兼容性更好。

对于 3d，有 Three.js，它同时使用 canvas 和 webgl。

周围有很多不同的库，你应该先弄清楚你要画什么。

http://javascript.open-libraries.com/utilities/drawing/10-best-javascript-drawing-and-canvas-libraries/

【讨论】：

【解决方案2】：

cgSceneGraph 是一个 javascript 动画框架，提供完整的动画引擎，包括时间线、动画键、... 它还提供了帮助方法来轻松地在元素的每个属性上添加动画。

网站首页的例子正是你所说的，所以它应该符合你的需要:)

【讨论】：

【解决方案3】：

对于简单的动画，忘记画布并使用带有背景图像的position: absolute div 元素，您可以使用 CSS 变换 translate3d 和 scale3d 来移动。

【讨论】：