Raphael.js 2.0动画翻译与变量不一致? (菜鸟)

时间:2011-11-13 15:39:37

标签: javascript animation raphael

我尝试过这个http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/教程,但它与Raphael 2.0并不完全兼容。我为大多数部分工作过,但我在第8步迷路了。

我想做的就是通过一些变量值来动画一些圆圈......
我的问题基本上是这样的:

paper.rect(250,250,20,20).animate({transform: "t0,100"}, 2000); //works
paper.circle(250,250,20).animate({transform: "t0,100"}, 2000); //works

paper.rect(250,250,20,20).animate({x:250,y:250+100}, 2000); //works
paper.circle(250,250,20).animate({x:250,y:250+100}, 2000); // doesn't work
paper.circle(250,250,20).animate({x:250,y:350}, 2000);    // doesn't work either

var someTrans = 100;

paper.rect(250,250,20,20).animate({transform: "t0,someTrans"}, 2000); //doesn't work
paper.circle(250,250,20).animate({transform: "t0,someTrans"}, 2000); //doesn't work

paper.rect(250,250,20,20).animate({x:250,y:250+someTrans}, 2000); //works
paper.circle(250,250,20).animate({x:250,y:250+someTrans}, 2000); // doesn't work

有人可以给我一个正确方向的推动吗? 由于Raphael将其转换行为从版本改为版本,因此我很难自己找到它...... -.-

(不能真正理解为什么圆圈的行为与rect完全不同......对我来说没有多大意义... = /
我正在使用Opera 11.52,以防有任何不同......?)

1 个答案:

答案 0 :(得分:2)

变量不会自动替换。您需要连接字符串和数字,如下所示:

paper.rect(250,250,20,20).animate({transform: "t0," + someTrans}, 2000); //doesn't work
paper.circle(250,250,20).animate({transform: "t0," + someTrans}, 2000); //doesn't work

对于圈子:你必须指定所有三个属性x,y和r,然后动画才有效。尝试:

paper.circle(50,50,40).animate({cx:100,cy:100,r:100},1000)
RaphaelJs Playground

上的