Raphael.js 2.0 动画翻译与变量不一致？（小白）答案

【问题标题】：Raphael.js 2.0 animate translation with variable inconsistency? (noob)Raphael.js 2.0 动画翻译与变量不一致？（小白）
【发布时间】：2015-06-20 04:28:28
【问题描述】：

我尝试按照此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 将其转换行为从一个版本更改为另一个版本，所以我自己很难找到它... -.-

（真的不明白为什么 circle 的行为与 rect 如此不同......对我来说没有多大意义...... =/
我正在使用 Opera 11.52 以防万一……？）

【问题讨论】：

标签： javascript animation raphael

【解决方案1】：

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

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

【讨论】：