Анимация Canvas

[Sanjke]

Только начал общаться с js - пишу дипломную с использованием канвы и js. Проблема возникла вот тут:

$("#play").click(function(){
   for (var i = 0; i<kol_sost; i++){
      for (var t=1;t<c_id+1;t++){
         jc("#my_circ"+t).animate({x: mas[i][t].x, y: mas[i][t].y ,radius: mas[i][t].rad},500);                                 
      }
   }
});

mas - массив состояний. В нём хранятся значения переменных для каждого состояния.
kol_sost - количество состояний (!внезапно!)
c_id - кол-во окружностей
Использую jQuery и вот эту штуку http://jcscript.com/
Вполне возможно - это приличный говнокод, т.к. опыта общения со скриптом пока мало. Этот код переходит в одно из состояний из набора, вместо перехода через все этапы - т.е. если у нас есть 3 состояния круг переходит сразу в 3 минуя 2.
Думал что проблема в отсутствии паузы после выполнения первого цикла - колдовал, колдовал - безрезультатно.

[ASerputko]

не совсем понятно что на jc у вас в коде

[Sanjke]

http://jcscript.com/documentation/functions/animate
Изменение х, у и радиуса конкретной окружности на значения взятые из массива.

[Micky_Holtern]

Sanjke,

Вы совершаете логические ошибки. Во-первых, вы назначаете анимацию на объект - и тут же назначаете другую анимацию тех же значений того же объекта. Естественно, выполняется только анимация, назначенная последней. Если вы хотите, чтобы функции анимации выполнялись последовательно, используйте коллбэк.

http://jcscript.com/documentation/fu...mate#animate_3

То есть, примерно так:

jc('#myCircle').animate({x:50,y:50,radius:50},500,function(){
          jc('#myCircle').animate({x:50,y:150,radius:100});
});

И еще - Вы совершенно зря выбираете объект по айдишнику в цикле каждый раз заново. Это весьма и весьма сказывается на производительности. Выберите один раз в массив все объекты, а потом обращайтесь уже напрямую к ним. Примерно так:

var myCircle=jc('#myCircle');
myCircle.animate({x:50,y:50,radius:50},500,function(){
          myCircle.animate({x:50,y:150,radius:100});
});

[Sanjke]

Всё-равно не помогает. Запускаю рекурсивно функцию рисовки, он у меня переходит в следующее состояние и всё, тушите свет.
По пониманию надо что-то типа

<script type="text/javascript">
	$(document).ready(function(){	
		$("#but").click(function(){
			function step(t){
                                $("#bb").append(t);
				jc("#circ").animate({radius: t});
			}	
			for (i=1; i<100;i++){
				setTimeout(function(){step(i)},1000);
			}
		});	
		jc.start("canv",50);
		jc.circle(50,50,10).id("circ");
	});
	</script>
	<input type="button" id="but" value="OK" />
	<canvas id="canv" width=100 height=200></canvas>
	<div id="bb"></div>

Тоже не работает. Проходит некоторый промежуток времени, затем блок наполняется 100 сотнями. Хотя по идее должно происходить плавное заполнение и плавное увеличение окружности

[Micky_Holtern]

Как вы программу написали, так она и работает. Почитайте статьи про JavaScript, что ли. Чтобы хотя бы не писать

for (i=1; i<100;i++){
      setTimeout(function(){step(i)},1000);
}

Либо setTimeOut пропишите в саму функцию step, без всякого цикла, либо используйте setInterval().