Показать сообщение отдельно
  #1 (permalink)  
Старый 11.05.2010, 13:57
Новичок на форуме
Отправить личное сообщение для Сергей Постовит Посмотреть профиль Найти все сообщения от Сергей Постовит
 
Регистрация: 24.04.2010
Сообщений: 2

Как сделать что б не подтормаживало.
Есть скрипт, выбирается 11 картинок - шариков и для каждого запускается функция moving - в нее передаются параметры сам шарик, переменная с - первый цикл движения или нет, координаты 5 точек и последняя переменная - находится шарик на краю экрана или в середине. Каждый шарик движется по своей траектории отлетает от стенок, как только шарик прошел свой путь 4 или 5 отлетов, запускается рекурсивная функция в последней анимации и процес повторяется.
Проблема в том что эта анимация тормозит, особенно в ие6-8, да и вобще везде.
Не знаю как ускорить, мне б идею какую-нибудь, в чем причина тормозов и как это можно лучше сделать.

$(window).load(function(){
	var circle1=$('#page1_circle1');
	var circle2=$('#page1_circle2');
	var circle3=$('#page1_circle3');
	var circle4=$('#page1_circle4');
	var circle5=$('#page1_circle5');
	var circle6=$('#page1_circle6');
	var circle7=$('#page1_circle7');
	var circle8=$('#page1_circle8');
	var circle9=$('#page1_circle9');
	var circle10=$('#page1_circle10');
	var circle11=$('#page1_circle11');
		
	moving1(circle1,1,0,48,15,100,100,65,35,0,0,0,true);
	moving1(circle2,1,0,61,35,100,100,10,85,0,0,0,true);
	moving1(circle3,1,19,51,0,20,15,0,100,30,80,100,false);
	moving1(circle4,1,40,39,0,40,65,0,100,60,20,100,false);
	moving1(circle5,1,51,46,100,34,85,0,0,5,45,100,false);
	moving1(circle6,1,56,13,33,100,0,50,68,0,100,35,false);
	moving1(circle7,1,72,22,100,15,76,0,0,40,35,100,false);
	moving1(circle8,1,86,18,100,18,0,18,18,0,60,100,false);
	moving1(circle9,1,82,18,50,100,40,0,0,25,80,0,false);
	moving1(circle10,1,86,12,45,100,35,0,0,20,75,0,false);
moving1(circle11,1,84,9,40,100,30,0,0,15,70,0,false);					
})
// движение шарика.
function moving1(circle,c,x1,y1,x2,y2,x3,y3,x4,y4,x5,y5,at_end) {
			 var speed_general=3/100;
			 var all_w=$('body').width();
			 var all_h=$('body').height();
		
			 if (x1==100) {x1 = Math.floor((Math.floor(all_w-circle.width()))/all_w*100)}
			 if (y1==100) {y1 = Math.floor((Math.floor(all_h-circle.height()))/all_h*100)}
			 if (x2==100) {x2 = Math.floor((Math.floor(all_w-circle.width()))/all_w*100)}
			 if (y2==100) {y2 = Math.floor((Math.floor(all_h-circle.height()))/all_h*100)}
			 if (x3==100) {x3 = Math.floor((Math.floor(all_w-circle.width()))/all_w*100)}
			 if (y3==100) {y3 = Math.floor((Math.floor(all_h-circle.height()))/all_h*100)}
			 if (x4==100) {x4 = Math.floor((Math.floor(all_w-circle.width()))/all_w*100)}
			 if (y4==100) {y4 = Math.floor((Math.floor(all_h-circle.height()))/all_h*100)}
			 if (x5==100) {x5 = Math.floor((Math.floor(all_w-circle.width()))/all_w*100)}
			 if (y5==100) {y5 = Math.floor((Math.floor(all_h-circle.height()))/all_h*100)}
			 var length=getLineLength(x1,y1,x2,y2);
			 var length2=getLineLength(x2,y2,x3,y3);
			 var length3=getLineLength(x3,y3,x4,y4);
			 var length4=getLineLength(x4,y4,x1,y1);
			
			 if (!at_end) {
			  var length5=getLineLength(x4,y4,x5,y5);
			  var length6=getLineLength(x5,y5,x2,y2);
			  var speed5=Math.floor(length5/speed_general);
			  var speed6=Math.floor(length6/speed_general);
			  }
			  var speed=Math.floor(length/speed_general);
			  var speed2=Math.floor(length2/speed_general);
			  var speed3=Math.floor(length3/speed_general);
			  var speed4=Math.floor(length4/speed_general);
		
	switch (c) {
		  case 1:	
			 circle.animate({top:y2+'%',left:x2+'%'},speed,'linear');
			 circle.animate({top:y3+'%',left:x3+'%'},speed2,'linear');
			 circle.animate({top:y4+'%',left:x4+'%'},speed3,'linear');
			 if (!at_end) {
			 circle.animate({top:y5+'%',left:x5+'%'},speed5,'linear');
			 circle.animate({top:y2+'%',left:x2+'%'},speed6,'linear',function(){moving1(circle,0,x1,y1,x2,y2,x3,y3,x4,y4,x5,y5,at_end)})
			}
			else {
			circle.animate({top:y1+'%',left:x1+'%'},speed4,'linear');
			circle.animate({top:y2+'%',left:x2+'%'},speed,'linear',function(){moving1(circle,0,x1,y1,x2,y2,x3,y3,x4,y4,x5,y5,at_end)})
		}
			 break;
		 case 0:
			circle.animate({top:y3+'%',left:x3+'%'},speed2,'linear');
			circle.animate({top:y4+'%',left:x4+'%'},speed3,'linear');
			if (!at_end) {
				circle.animate({top:y5+'%',left:x5+'%'},speed5,'linear');
				circle.animate({top:y2+'%',left:x2+'%'},speed6,'linear',function(){moving1(circle,0,x1,y1,x2,y2,x3,y3,x4,y4,x5,y5,at_end)});
			}
			else {
			circle.animate({top:y1+'%',left:x1+'%'},speed4,'linear');
			circle.animate({top:y2+'%',left:x2+'%'},speed,'linear',function(){moving1(circle,0,x1,y1,x2,y2,x3,y3,x4,y4,x5,y5,at_end)});
			}
			break;
		}
}
// длина линии.
function getLineLength (x1,y1,x2,y2) {
   var x12=x2-x1;
   var y12=y2-y1;
   var lentgth_not_ready=Math.sqrt(Math.pow(x12, 2) + Math.pow(y12, 2));
   return lentgth_not_ready;
}
Ответить с цитированием