如何制作'Raphael'帆布的动画?

时间:2010-06-29 10:03:37

标签: javascript html5 svg raphael

我正在使用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”。

这里发生了什么,我该如何解决它?

3 个答案:

答案 0 :(得分:9)

您无法为纸质对象制作动画。纸张没有动画属性。但是您可以将所有元素合并到set中,然后为其设置动画。

答案 1 :(得分:3)

您的右括号序列错误

更改

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

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

<强>更新

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

答案 2 :(得分:0)

您无法为绘图板设置动画...只有其中的形状..

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