如何为“Raphael”画布添加动画效果？

Question

我将使用Raphael库创建SVG对象。

为了初始化SVG形状并创建一个画布，用于放置所有内容，我按照文档中的说明使用了以下代码：

var paper = Raphael(10, 50, 320, 200);

我现在想要对纸张及其内部所有元素进行动画处理，就像我对已经添加到纸张上的形状进行动画处理一样：

var firstShape = paper.rect(x, y, width, height);
firstShape.animate({x: 100}, 500, "<");

当我尝试用纸张类似的东西时，例如：

paper.animate({x: 100}, 500, "<");

我遇到了错误 'paper.animate is not a function'。

这是什么情况，我该如何解决？

- Jack Roscoe

Answer 1

你无法对纸张物体进行动画处理，因为纸张没有可用于动画的属性。但是你可以将所有元素合并成一个 集合，然后对其进行动画处理。

- Dmitry Baranovskiy

---

我能不能借此机会说一声：“感谢 Raphaël” =) - David Thomas

Answer 2

你的关闭括号序列是错误的。

更改为：

paper.animate({x: 100, 500, "<")}; 

to

paper.animate({x: 100}, 500, "<"); 

更新

从文档来看，似乎无法直接在paper上调用animate，而只能在从画布中剪切出的子形状上调用 - 这就是为什么firstshape.animate有效的原因。

- JoseK

---

抱歉，我的错误。我在问题中重新输入了它，但是这个错误并不存在于我的实际代码中。我已经更新了问题以反映这一点。 - Jack Roscoe

Answer 3

你不能对绘图板进行动画处理...只能对其中的形状进行处理..

纸张就是你的绘图板..而firstShape是在绘图板内创建的一个形状..

- Gabriele Petrioli

---

我曾经认为主要的“画板”只是SVG元素。难道你不能动画/转换整个SVG对象吗？ - Jack Roscoe

@Jack，我的理解是Raphael(..)返回一个画布对象。其余的对象都引用了这个画布，并可以在其中进行动画处理..不过我可能理解有误.. - Gabriele Petrioli