Самый быстрый способ выучить английский язык
Раздел: Сайтостроение / 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 с нуля до гуру >>>