Скидка на виниры спб axiomadental.ru.

Анимация на WEB-страницах

Автор: Алексей Шульга

Здравствуйте! В этой статье я хотел бы рассказать о создании анимации на веб-страницах с использованием скриптового языка программирования JavaScript, далее JS. Статья ориентирована на новичков. По правде говоря я не являюсь поклоником JS да и вэб-программирования тоже, но родина сказала «Надо!» 😉 

Шаблон

Для начала нам необходимо создать заготовку- то место, куда мы будем внедрять скрипты, Вот она:

	<html>
	<head>
	  <title>Тестовая страничка</title>
	</head>
	<body>
	</body>
	</html>

Это обыкновенная HTML-страничка, я сохранил ее под именем Test.html .

Встраивание JS-скрипта

Итак, шаблон у нас есть, и теперь мы можем смело пробовать оживлять страничку с помощью скриптов, добавить JS-скрипт можно двумя основными способами- добавлением его непосредственно в веб-страницу, либо вынести его в отдельный файл, для наглядности я выбрал первый способ. Добавим скрипт в секцию body, после чего она примет вид:

 


	<body>

	  <script type="text/javascript">

	  //Тут находится JS-код

	  </script>

	</body>

Для проверки можно заменить за комментированную строку такой строкой:

 


	alert("Hello, world" );

Этот код выведет [модальное] окно с текстом «Hello, world».

Добавление объектов

Прежде чем мы займемся анимацией нужно что бы было то, что будет анимироваться, поэтому займемся созданием анимируемых объектов — для примера возьмем квадратные DIV-вы со стороной 10 пикселей. Прежде чем создавать собственно объекты для них необходимо задать стиль, это делается с помощью CSS. Пример: 

 


	<head>

	  <title>Тестовая страничка</title>

	  <style type="text/css">

	    .obj1style{position:absolute; width:10; height:10; background-color: #00FF00}

	  </style>

	</head>

Наиболее важным свойством является свойство position и именно его значение absolute -оно позволяет размещать объект, к которому применен данный стиль, в любой точке веб-страницы. Свойства width и height, как нетрудно догадаться, отвечают за высоты и ширину объекта соответственно. Цвет фона объекта- зеленый.

Теперь займемся собственно добавлением объектов, для этого необходимо заменить строку:

 


	//Тут находится JS-код

на строки:

 


	var obj_count=10; //Сколько у нас будет объектов

	for (i=1;i<=obj_count;i++){ //Цикл от 1 до количества создаваемых объектов

	document.write('<div class="obj1style" style="left:');

	document.write(i*20+50);

	document.write(';top:50;" id="obj1-');

	document.write(i);

	document.write('">'+'</div>');

	//вот то самое место, именно тут мы вписываем в страницу 10 DIV-ов с

	//классом obj1style идентификаторами с именами от obj1-1 до obj1-10.

	//Все элементы располагаются на одной высоте, отступ от левой стороны

	//страницы высчитывается по формуле i * 20 +50, где i-это номер элемента[1..10].

	}

 

Вместо данного кода мы могли бы написать что-то вроде:

 


	<div class="obj1style" style="left:70; top:50;" id="obj1-1"></div>

	...

	<div class="obj1style" style="left:250; top:50;" id="obj1-10"></div>

Но это неэффективно и некрасиво да и лень мне писать так много.

I  like to move it или анимируем!

Самое интересное. Итак, для начала зададимся целью, что необходимо сделать. Я решил начать с простого – объекты будут летать в неком сосуде и при ударении об стенку они будут отскакивать

* Комментарий автора

кстати данную модель можно было бы назвать «Модель идеального газа»,

ибо данная анимация действительно в некой степени моделирует поведение

частиц идеального газа.

Для начала после строки:

 


	var obj_count=10;

добавим следующий код:

 


	var VX= new Array(obj_count);

	var VY= new Array(obj_count);

	document.write('<div style="position:absolute; left:45; top:40; width:300; height:300;

	        background:#bbbbbb;" id="Area"></div>');

 

Первые две строки создают два массива длиной 10 элементов, которые хранят значение скорости для каждого объекта. Третья же строка размещает на страничке «сосуд», в котором будут летать наши «молекулы», тут, в принципе, я думаю все знакомо и просто. Далее после строк начальной инициализации:

 


	document.write(';top:50;" id="obj1-');

	document.write(i);

	document.write('">'+'</div>');

 

добавляем код, который будет задавать случайную скорость для каждого объекта

 


	VX[i]=Math.round(Math.random()*6)-3; if(VX[i]==0){VX[i]=1;}

	VY[i]=Math.round(Math.random()*6)-3; if(VY[i]==0){VY[i]=1;}

 

Условия «if» нужны для того что бы не было нулевых скоростей, то есть что бы небыло неподвижных объектов. Теперь перейдем к самому сердцу нашего аниматора- функции Timer она периодически ( с интервалом 50мс вызывает функцию Animate, но о ней позже.

Функция выглядит так:

 


	function Timer()

	{

	setTimeout( function(){Animate();setTimeout(arguments.callee, 50);}, 0);

	}

 

Эта функция должна вызываться(стартовать) при загрузке страницы для того что бы обеспечить такую возможность мы подправим тег body, итоговый вид после изменений показан ниже:

 


	<body onload="Timer()">

Вроде разобрались, пора браться за последнюю в данном уроке и самую массивную функцию — функцию Animate, вот полный ее текст:

 


	function Animate()

	{

	for(i=1;i<=obj_count;i++){

	document.getElementById("obj1-"+i).style.left=parseInt(document.getElementById("obj1-"+i).style.left)+VX[i];

	document.getElementById("obj1-"+i).style.top=parseInt(document.getElementById("obj1-"+i).style.top)+VY[i];

	if( parseInt(document.getElementById("obj1-"+i).style.left) <= parseInt(document.getElementById("Area").style.left) ){

	document.getElementById("obj1-"+i).style.left=document.getElementById("Area").style.left;

	VX[i]*=-1;

	}

	if( parseInt(document.getElementById("obj1-"+i).style.left)+10 >= parseInt(document.getElementById("Area").style.left)+

	    parseInt(document.getElementById("Area").style.width) ){

	document.getElementById("obj1-"+i).style.left=parseInt(document.getElementById("Area").style.left)+

	    parseInt(document.getElementById("Area").style.width)-10;

	VX[i]*=-1;

	}

	if( parseInt(document.getElementById("obj1-"+i).style.top) <= parseInt(document.getElementById("Area").style.top) ){

	document.getElementById("obj1-"+i).style.top=document.getElementById("Area").style.top;

	VY[i]*=-1;

	}

	if( parseInt(document.getElementById("obj1-"+i).style.top)+10 >= parseInt(document.getElementById("Area").style.top)+

	    parseInt(document.getElementById("Area").style.height) ){

	document.getElementById("obj1-"+i).style.top=parseInt(document.getElementById("Area").style.top)+

	    parseInt(document.getElementById("Area").style.height)-10;

	VY[i]*=-1;

	}

	}

	}

Как она работает?

Очень просто! В цикле мы пробегаем по всем элементам, при этом выполняем следующие действия:

  1. Прибавляем к X координате объекта его горизонтальную скорость, которую берем из массива VX.
  2. Прибавляем к Y координате объекта его вертикальную скорость, которую берем из массива VY.
  3. Проверяем, не вышел ли левый край объекта за левый край сосуда, если вышел, то ставим объект на границу и инвертируем скорость. Т.е. если летел, к примеру, шарик и он вылетел за левую границу, то мы возвращаем шар на край сосуда и пинаем его в обратную сторону, так, что модуль его горизонтальной скорости не меняться- меняется только знак
  4. Аналогично, только мы проверяем вылет за правую границу.
  5. В принципе тоже самое, только здесь все происходить в вертикальной плоскости- мы определяем вылет за верхнюю границу и если таковой факт был инвертируем вертикальную составляющую скорости.
  6. Аналогично действию №5, за исключением того, что проверка происходит на вылет за нижнюю грань.

Смело копируем функцию перед функцией Timer() и пробуем запустить нашу маленькую демонстрацию.

Заключение

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

Вы можете ответить или разместить запись на вашем сайте.

Ответить

Powered by Procoder