Раздел: Сайтостроение / JavaScript /

Как сделать анимацию на JavaScript

Что такое JavaScript Что такое JavaScript

Небольшая книга о JavaScript, которая поможет вам в изучении JavaScript. В книге и рассылке сведения для начинающих: что такое JavaScript, как это работает, письма, которые помогут принять решение, надо ли вам это или нет, а также полезные ссылки на обучающие материалы. Подробнее...

Современные сайты - это не просто текст и картинки. И даже выпадающими меню сегодня никого не удивишь. Поэтому такие вещи, как анимация (движущиеся или изменяющиеся рисунки и текст) многие веб разработчики используют при создании сайтов. Сделать это можно разными способами, в том числе и с помощью JavaScript.

Кроме того, иногда требуется нарисовать что-нибудь на экране программно. И я вас обрадую - рисунки в JavaScript тоже можно делать.

Как всегда напоминаю, что полный обучающий курс по JavaScript можно найти здесь:

>>> JavaScript, jQuery и Ajax с нуля до гуру >>>

Начнём с более простого...

Рисование в JavaScript

Существует несколько технологий создания векторной графики, которые могут быть использованы в сценариях JavaScript. Это, например, такие технологии, как SVG, VML, FLASH. Кроме того HTML-тег <canvas> предоставляет API для рисования из сценариев. Именно на последней технологии и остановимся чуть более подробно.

Нестандартный HTML-тег <canvas> предназначен для создания векторной графики на стороне клиента. Сам он не имеет визуального представления, но предоставляет сценариям JavaScript интерфейс для создания рисунков внутри тега <canvas>. Однако следует помнить, что не все браузеры (особенно старые) поддерживают этот тег.

Основная часть прикладного интерфейса Canvas определена не в элементе <canvas>, а в объекте «контекста рисования». Получить доступ к этому объекту можно методом getContext() элемента, играющего роль «холста» для рисования.

Следующий сценарий показывает пример использования canvas в JavaScript.

<html>
<head>  

<script>
//Создает рисунок после загрузки документа
window.onload = function() 
{ 
  //Получить элемент холста
  var canvas = document.getElementById("square");   
  var context = canvas.getContext("2d");  //Получить 2D контекст
  context.fillStyle = "#0f0";             //Цвет заливки зелёный
  context.fillRect(0, 0, 20, 20);         //Залить квадрат
  canvas = document.getElementById("circle"); //Новый элемент холста
  context = canvas.getContext("2d");          //Получить его контекст
  context.fillStyle = "#f00";                 //Цвет заливки красный
  context.beginPath();                        //Начать рисование
  //Добавить в рисунок окружность с радиусом 10 
  //и с центром в точке (15,15)
  context.arc(15, 15, 10, 0, 2*Math.PI, true);
  context.fill( );                            //Залить фигуру
}
</script>

</head>

<body>

Зелёный квадрат: <canvas id="square" width=20 height=20></canvas>
<br><br>
Красный круг: <canvas id="circle" width=30 height=30></canvas>

</body>

</html>

Здесь мы рисуем рисуем зелёный квадрат и красный круг. Разъяснения даны в комментариях.

Рисунки в JavaScript

Готовые изображения могут включаться в HTML-страницу с помощью тега <img>. Тег <img>, как и любой другой элемент страницы, является частью модели DOM, и, следовательно, может управляться.

Модель DOM нулевого уровня позволяет обращаться к рисункам через массив images[] объекта Document. Каждый элемент этого массива - это объект Image, связанный со своим тегом <img> на странице.

Обращаться к объектам Image можно также с использованием методов модели DOM первого уровня, таких как getElementById() и getElementsByTagName().

Объекты Image содержатся в массиве document.images[] в том порядке, в котором они встречаются в документе. Но в некоторых случаях удобнее получать доступ к изображениям по именам. Если в теге <img> определен атрибут name, доступ к изображению может быть получен по значению этого атрибута.

Допустим, у вас есть такая картинка, и эта картинка первая на странице:

<img src="picture.jpg" name="mypic">

Тогда обратиться к ней можно любым из следующих способов:

document.images[0]
document.images["mypic"]
document.images.mypic

В следующем примере имеется кнопка, каждый щелчок по которой уменьшает размер изображения на 10%:

<img src="picture.jpg" name="mypic"
     onclick="DownsizeImg()">
<br><br>
<input type="button" value="Уменьшить" onClick="DownsizeImg()">

<script>
function DownsizeImg()
{
  var w = document.images.mypic.width;
  document.images.mypic.width = w * 0.9;
}

</script>

Анимация в JavaScript

Работать с изображениями мы более менее научились. А как быть с анимацией? Как оживить картинки?

В простейшем случае по тем же правилам - изменять свойства рисунков во времени. Например, в предыдущем примере мы уменьшали размер изображения при щелчке по кнопке. Но если делать то же самое по таймеру, то изображение будет уменьшаться автоматически. А это и есть анимация.

Для примера я выберу чуть более сложную задачу - перемещение рисунка по экрану.

<body>

<div id="imgLayerCar" 
        style="position:absolute; left:10; top:100; 
        width:96; height:44; z-index:3;">
<img name="img_car" src="car.jpg" width="96" height="44">
</div>

<input type="button" value="Поехали!" onClick="MoveCar()"> 

<script>

var carLeft, carStep, tmrCar; 

function AddPixelForCar() 
{
  carLeft = carLeft + carStep;
  if (carLeft < 400) {carLeft = carLeft + carStep;}
  document.all.imgLayerCar.style.left = carLeft;
  if (carLeft >= 400) {clearInterval(tmrCar);}
}

function MoveCar() 
{
  carLeft = 10;
  carStep = 1; 
  tmrCar = setInterval("AddPixelForCar()", 20); 
}
</script>

</body>

Здесь мы ещё используем слои - но это отдельный вопрос.

Есть кнопка. Когда мы нажимаем эту кнопку, то вызываем функцию MoveCar(). В этой функции мы задаём начальную координату рисунка и шаг изменения координаты. Затем запускаем таймер, который периодически вызывает функцию AddPixelForCar(). А уже в этой функции мы увеличиваем левую координату на заданное число, и таким образом наш рисунок перемещается по экрану слева направо.

Когда рисунок “проедет” некоторое количество шагов, он остановится. Потому что в функции AddPixelForCar() мы проверяем текущую координату, и когда она увеличится больше, чем нам надо, мы останавливаем таймер.

Ну вот и всё. Краткое знакомство с рисованием и анимацией завершено. Если хотите знать больше, то вам сюда:

>>> JavaScript, jQuery и Ajax с нуля до гуру >>>


Программирование на JavaScript с Нуля до Гуру 2.0 Программирование на JavaScript

Видеокурс о программировании на JavaScript. Содержит 8 больших разделов от основ до работы с сетевыми запросами. В комплекте 5 подарков - мини-курсов по темам, связанным с сайтостроением. 72 урока продолжительностью более 13 часов. Упражнения и примеры исходных кодов. Поддержка от автора. Подробнее...
Инфо-МАСТЕР ®
Все права защищены ©
e-mail: mail@info-master.su

Яндекс.Метрика