Анимация в JavaScript (JS) — это основная способность данного языка, из-за которой он обрел свою популярность. Изначально сайты были статическими, на них не происходило никаких «движений». Потом эту ситуацию исправил язык JavaScript, потому что он был придуман для браузерной разработки как единственный инструмент, анимирующий элементы сайта.
Прошло несколько десятков лет с момента запуска языка JavaScript. Он уже «вышел» из категории только браузерной разработки и применяется в разработке мобильных приложений, компьютерных игр, серверной части приложений и др. Это стало возможным благодаря его фреймворкам и библиотекам. Его пытаются «сместить» с пьедестала «языка для анимации» в веб-разработке новые возможности CSS3, и отчасти у них это получилось. При помощи CSS можно сделать очень много разновидностей анимации на сайте. Но, несмотря ни на что, JavaScript остается «королем» веб-разработки, а анимация — его основным козырем.
Анимация JavaScript(JS)
При помощи CSS можно сделать простую анимацию на сайте. Она не так сильно «нагружает» сайт, поэтому активно применяется веб-разработчиками. Однако, когда дело доходит до сложной анимации, тогда без JavaScript не обойтись.
Анимация в JS достигается тремя основными путями:
«чистыми» возможностями языка;
с использованием сторонних библиотек, например jQuery;
гибридным способом, когда смешивают стороннюю библиотеку и возможности «чистого» языка — так делают, если при помощи библиотеки невозможно реализовать анимацию должным образом.
Анимация JS: примеры
Анимация JS многообразна в своем исполнении. При помощи JavaScript можно сделать абсолютно все, что вы можете придумать для своего веб-ресурса. Не зря на JavaScript пишут полноценные браузерные игры. В этом случае игра — это не что иное, как анимированные компоненты веб-страницы, которые реагируют на действия пользователя.
Мы же покажем шаблон-пример того, как делается анимация. Изучив сам процесс, вы сможете «усложнить» собственную анимацию до нужного вам предела. А пока давайте посмотрим, как реализуется простая анимация JavaScript.
Для начала в HTML нужно создать компонент веб-страницы, который будет анимирован. Вообще, HTML, CSS и JavaScript идут тесно рядом, поэтому даже при создании анимации на JavaScript вам все равно потребуются знания CSS и, конечно же, HTML.
Создаем HTML
Создаем HTML-документ и добавляем в него блок, который будем анимировать:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Анимация JS</title>
/!--В примере мы прописываем стили прямо в HTML-документе, вы же их можете вынести в отдельный файл «style.css» и подключить его --/
<style>
#exampleItem{
width: 15em;
height: 18em;
background: #fff;
margin: 10px;
}
/!--Подключаем JavaScript-файл «script.js», в котором будет прописана анимация --/
</style>
<script src="script.js"></script>
</head>
<body>
/!--Объявляем наш блок, который будем анимировать --/
<div id="exampleItem"></div>
</body>
</html>
Мы добавили комментарии в HTML-документ, чтобы вам было понятнее. Такое их количество в документ добавлять необязательно.
Добавляем JavaScript
В HTML у нас есть определенный блок с собственными стилями, который мы будем анимировать — это «exampleItem». Теперь самое время перейти в файл «script.js» и «навесить» на него какое-то событие. Событие означает, что должно произойти, чтобы запустилась анимация JS. Например:
// Определяем, что анимация должна запуститься после загрузки всего документа
window.onload = function(){
// Определяем, что анимация должна запуститься при клике на элемент с идентификатором «exampleItem»
document.getElementById('exampleitem').onclick = function(){
//Определяем, какая анимация должна произойти при клике на элемент, в нашем случае для проверки произойдет вывод цифры «5»
alert(5);
}
}
Определить событие, при котором запускается анимация, — это просто. Как правило, запуск будет связан либо с «кликом», либо с поведением курсора или пользователя, либо с каким-то промежутком времени.
Самой важной частью скрипта является место, где у нас указано «alert(5)». Здесь записывается JS-анимация и поведение элемента, когда на него «кликают».
Анимация JS может быть реализована с расчетом:
времени,
траектории,
скорости,
ускорения,
направления,
эффектов появления и исчезновения,
хаотичности,
увеличения или уменьшения размера,
изменения цвета,
и др.
JavaScript анимация отличается от CSS анимации тем, что она никак не ограничена функционально. Она ограничена только профессиональными навыками программиста.
Заключение
Анимация JS строится по одному и тому же шаблону, однако ее сложность зависит от знаний программиста. В следующих статьях мы подробнее остановимся на нескольких вариациях JavaScript-анимации, чтобы вы могли оценить способности этого языка.
Если есть профессиональные трудности с языком JavaScript, тогда можно реализовать анимацию при помощи CSS. Таблицы CSS на данный момент очень функциональны и в простой анимации полностью заменяют JavaScript. JavaScript понадобится, когда нужно будет реализовать что-то сложное.
JavaScript
