Проблем с повтаряща се анимация RaphaelJS


1

 Опитвам се да направя по спиралата от домашното за Raphael да се движи едно топче. Идеята е топчето да се движи, а не да се натрупват топчета както при самото изчертаване на спиралата. Ето го кодът:

http://jsfiddle.net/S9PBS/2/

Мисля, че се получава проблем при зануляването на timeout защото при дебъгване двете променливи innerTimer и outterTimer увеличават стойността си на всяко извикване на функцията repeat, без да се зануляват.

 Може ли съвет как да го оправя?

Опитах се първо да използвам .animate({   }), но не мога да я накарам да се повтаря без да го обгърна във функция, а тогава на всяко повторение се чертае ново кръгче и се наслагват едно върху друго 




Отговори



1

Ето ти решение с интервал.

Ти вече си запазил всички позиции в масива. Само сменяй центъра на новото топче през определен интервал. С анимация не трябва да е много по-различно.


от dzhenko (3893 точки)


0
Как не се сетих, че с .attr мога по всяко време да местя топчето - така може да се направи и с requestAnimationFrame, където става най-красива анимация

от ivan.mihov1 (4988 точки)


2

Здравей,

можеш да изчистваш нарисуваното преди всяко извикване с paper1.clear(); Добавих и проверката дали да продължи анимацията, за да не хвърля грешка когато свършат стойностите от масива.

paper1.clear();

paper1.circle(positionsArr[i].x, positionsArr[i].y, 3)

if(i<1800){

requestAnimationFrame(repeat);

}




0

 Мерси получи се.

А тези clearTimeout вършат ли някаква работа, защото като ги махна пак си работи по същия начин:

http://jsfiddle.net/S9PBS/5/


от ivan.mihov1 (4988 точки)


0
Ами като стигне до края топчето няма смисъл да се изпълнява интервала повече - ако не го махнеш ще достъпваш undefined стойности от масива и може да се бъгне позицията на топчето. Дори и нищо да не става си е грехота да си хвърлил там един безмислен код да се изпълнява през 10 мс без да има смисъл от него.

от dzhenko (3893 точки)

0
За undefined е ясно, това е финалната версия - http://jsfiddle.net/S9PBS/6/. Въпроса ми беше за clearTimeout, как работи в случая със стария ми код и дали въобще работи

от ivan.mihov1 (4988 точки)