Raphael.js 2.0 одушевленный перевод с переменной непоследовательностью? (нуб) - PullRequest
Новая
       3

Raphael.js 2.0 одушевленный перевод с переменной непоследовательностью? (нуб)

1 голос
/ 13 ноября 2011

Я пытался следовать этому учебнику http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/, но он не работает точно с Raphael 2.0.Я работал над этим для большинства частей, но я потерян на шаге 8.

Все, что я хочу сделать, это анимировать некоторые круги с помощью некоторых значений переменных ...
Моя проблема в основном такова:1006 * 

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

Может кто-нибудь подсказать мне в правильном направлении?
Поскольку Рафаэль изменил свое поведение трансфрома с версии на версию, найти его самостоятельно довольно сложно ... -.-

(Не могу понять, почему круг ведет себя так иначе, чем прямоугольник ... в любом случае это не имеет особого смысла ... = /
Я использую Opera 11.52 на случай, еслиразница ...?)

1 Ответ

2 голосов
/ 13 ноября 2011

Переменная не заменяется автоматически.Вам нужно объединить строку и число следующим образом: 

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

...