Последние записи

Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке - https://slurm.club/3MeqNEk

Online-курс Java с оплатой после трудоустройства. Каждый выпускник получает предложение о работе
И зарплату на 30% выше ожидаемой, подробнее на сайте академии, ссылка - ttps://clck.ru/fCrQw

2nd
Июл

Анимация в WEB на JavaScript

Posted by bullvinkle under Журнал

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

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

Алексей Шульга

by Levsha100 http://www.programmersforum.ru/member.php?u=19268

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

Шаблон

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

<html>

<head>

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

</head>

<body>

</body>

</html>

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

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

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

<body>

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

</script>

</body>

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

alert(”Hello, world” );

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

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

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

<head>

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

.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 style=”left:’);

document.write(i*20+50);

document.write(’;top:50;”MsoBodyTextIndent” style=”margin-right: -2.75pt; text-indent: 0cm;”>

document.write(i);

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

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

}

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

…

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

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=Math.round(Math.random()*6)-3; if(VX==0){VX=1;}

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

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

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

function Timer()

{

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

}

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

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

function Animate()

{

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

document.getElementById(”obj1-”+i).style.left=parseInt(document.getElementById(”obj1-”+i).style.left)+VX;

document.getElementById(”obj1-”+i).style.top=parseInt(document.getElementById(”obj1-”+i).style.top)+VY;

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*=-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*=-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*=-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*=-1;

}

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

1. Прибавляем к X координате объекта его горизонтальную скорость, которую берем из массива VX.

2. Прибавляем к Y координате объекта его вертикальную скорость, которую берем из массива VY.

3. Проверяем, не вышел ли левый край объекта за левый край сосуда, если вышел, то ставим объект на границу и инвертируем скорость. Т.е. если летел, к примеру, шарик и он вылетел за левую границу, то мы возвращаем шар на край сосуда и пинаем его в обратную сторону, так, что модуль его горизонтальной скорости не меняться- меняется только знак

4. Аналогично, только мы проверяем вылет за правую границу.

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

6. Аналогично действию №5, за исключением того, что проверка происходит на вылет за нижнюю грань.

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

Рис. Тестовая анимация.

Заключение

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

Если возникнут какие-либо вопросы то обращайтесь на форум www.programmersforum.ru, либо пишите на почтовый ящик редакции. Я или кто-либо другой попытаемся Вам помочь.

Статья из четвертого выпуска журнала “ПРОграммист”.
Скачать этот номер можно по ссылке.
Ознакомиться со всеми номерами журнала.

Обсудить на форуме – Анимация в WEB на JavaScript