#javascript #animation #raphael
#javascript #Анимация #рафаэль
Вопрос:
Я попытался следовать этому 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 на случай, если это имеет какое-то значение …?)
Ответ №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)