Исследовательская работа анимация в javascript. Перспективные библиотеки и плагины JavaScript для анимации

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

Использование различных анимационных эффектов (переходов, движений, трансформаций и т.п.) значительно «оживляют» веб-сайт, позволяют управлять вниманием пользователя, переключая его на требуемый элемент и давая определенные визуальные подсказки.

Говоря об анимации нельзя не упомянуть известные 12 принципов, сформулированные аниматорами студии Дисней, использование которых исключительно важно для разумного и качественного использования анимационных эффектов.

Говоря о технологиях, обеспечивающих использование анимации в веб-страницах , можно выделить несколько но, пожалуй, ни одна из них не является настолько мощной как . Еще несколько лет назад технология Flash-анимации была грозным конкурентом и очень популярной. Но сейчас, похоже, ее лучшие годы позади и она постепенно вытесняется со страниц сайтов более мощными и гибкими Java-скриптами. И если вы решили всерьез использовать анимацию на своем сайте , то ставку следует делать именно на JavaScript. А чтобы сделать разумный выбор библиотеки я и сделал сегодняшний обзор.

Dynamics.jsНачну я, пожалуй, с Dynamics.js . Это серьезная и мощная библиотека, позволяющая создавать физически достоверную анимацию (как, например, гармонические затухающие колебания точки на главной странице сайта). Библиотека способна управлять и свойствами любого DOM-элемента. Dynamics.js используется для создания меню , кнопок, индикаторов процесса, маркеров. При этом доступны самые разнообразные параметры, такие как частота, декремент затухания, параметры, характеризующие упругость или продолжительность процесса и т.п.

Cta.jsНебольшая по объему библиотека cta.js предназначена для создания на странице анимационных эффектов типа «действие-эффект», т.е. наведение или нажатие указателем мыши на объект приводит к определенному эффекту. Очень удобно использовать при разработке плиточных интерфейсов, когда нажатие на элемент приводит к его раскрытию в виде модального окна, на всю страницу, или в виде боковой слайд-панели .

Beep.jsИнтересная библиотека, использующая WebAudio API для создания на странице музыкального синтезатора. Может найти применение при разработке онлайн-учебника по музыке или в качестве забавной игрушки.

Rainyday.jsНевероятно красивый эффект дождя с каплями разного размера, стекающими вниз. Правда, на мой взгляд, крупным каплям не хватает реалистичности (может той самой физики, которая присутствует в Dynamics.js?). Впрочем, имеющийся API позволяет создать собственные объекты и управлять их поведением, создавая еще более невероятные эффекты.

Dom-Animator.jsDom-Animator.js - это так называемое «пасхальное яйцо» (easter egg). Производимый ею эффект не виден «невооруженным» глазом, т.е. тем кто просматривает страницу в обычном окне браузера. Но те, кто будет разбирать ваш код, увидят ее в консоли (если вы все еще не поняли о чем речь, то здесь есть видеоролик, из которого все станет понятно).

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

Bounce.jsНеплохая JavaScript библиотека для создания впечатляющей анимации с использованием CSS. Позволяет применять к объектам различные виды движения, вращения, масштабирования и преобразования.

Snabbt.jsЛегкая и быстрая библиотека, выдающая, по заверениям разработчиков, 60 fps даже на мобильных устройствах. При помощи матриц трансформирования CSS позволяет перемещать, вращать, масштабировать и производить другие манипуляции с объектами. Позволяет также применять к объектам специальные эффекты, привлекающие внимание, которые можно использовать при заполнении форм.

RekapiRekapi позволяет использовать как CSS анимацию ключевых кадров (правило @keyframes), так и DOM анимацию при помощи JavaScript. Эта библиотека позволяет создавать довольно сложные динамические объекты, например круговые и линейные диаграммы, временные шкалы и другие элементы пользовательского интерфейса.

ShiftyShifty - библиотека, содержащая все необходимое для полноценной анимации по ключевым кадрам (так называемый «твиннинг»), причем количество объектов может быть просто огромным. Это низкоуровневая библиотека, которую можно использовать как ядро для более высокоуровневых платформ или библиотек. Собственно, в качестве ядра вышеупомянутой Rekapi, используется как раз Shifty.

Всем привет! Данной статьёй я открываю цикл публикаций на тему создания анимаций на чистом javascript-е.

Зачем вообще делать анимации на чистом js

можете ужаснуться вы. Ведь есть же масса библиотек , например, наша любимая jQuery. Так-то оно так, но чистые анимации полезно уметь писать вот в каких ситуациях .

Делается небольшой сайт с минимумом эффектов. Сторонние библиотеки не подключаются. И вдруг возникает необходимость сделать плавное растворение элемента при клике. Стоит ли из-за одного такого пустяка подключать jQuery!? Многие подключат и по факту сделают правильно - в современном мире 86Кб никого не интересуют. Однако, при работе в команде бывают такие упёртые тимлиды, которые не позволят из-за мелкой анимации внедрять в проект стороннюю библиотеку . Вот и придётся вам разбираться в анимации самим.

Используется готовая библиотека, и в ней не находится нужного эффекта. Например, вам нужно, чтобы элемент, перед тем как исчезнуть, три раза повернулся по часовой стрелке, подпрыгнул и только потом растворился. В таком случае библиотеку придётся расширять , и вам опять же понадобится понимание основ организации анимационных эффектов.

Поэтому понимание того, как организуются анимации для элементов, лишним явно не будет. В данной статье мы рассмотрим базовые приёмы и простейший пример - напишем функцию, которая умеет плавно скрывать элемент DOM, уменьшая его прозрачность.

По правда говоря, подобный подход для простых анимаций уже можно признать устаревшим. Лучше делать анимации на CSS, а с помощью javascript управлять моментом запуска и окончания анимации.

У нас будет два файла: index.html и script.js. HTML-документ очень прост:

JS #item{ width: 300px; height: 200px; background: #f9b; margin: 20px; }

Мы сделали div 300х200 пикселей, залили его цветом, дали небольшой внешний отступ и присвоили id=item. Ничего больше пока что нам и не нужно.

Организация анимации в javascript.

Теперь организуем работу в js. Для начала повесим на наш div какое-нибудь событие:

// После загрузки документа window.onload = function(){ // При клике на элемент с id=item document.getElementById("item").onclick = function(){ // для проверки выводим алерт alert(1); } }

Немного комментариев по данной конструкции. Весь javascript-код мы традиционно помещаем внутрь функции, установленной на событие window.onload. Таким образом, мы дожидаемся окончательной загрузки документа и формирования DOM - объектной модели документа.

После этого с помощью document.getElementById мы получаем div с id=item и устанавливаем событие onclick, при наступлении которого произойдёт показ проверочного алерта. На самом деле, вместо алерта мы чуть позже поместим сюда вызов функции fade, которую сейчас начнём рассматривать.

Итак, что же нам нужно для анимации? Попробуем сразу продумать такой интерфейс функции, который в дальнейшем позволит сделать её по-настоящему удобной! Получится что-то такое:

// Функция растворения элемента: // elem - объект DOM // t - время анимации // f - количество кадров в секунду function fade(elem, t, f){ // код }

Действительно, у любой анимации есть элемент, над которым она производится, и время, в течение которого мы видим плавные изменения. Но что за кадры в секунды?

Здесь для начала нужно разобраться с тем, как вообще происходит анимация. Анимация - это просто ступенчатое изменение визуально заметной величины с определённым интервалом . Такой величиной для нас является свойство opacity - прозрачность элемента. А интервал мы создаём с помощью стандартной функции javascript - setInterval.

Так вот, эта функция вторым параметром принимает время в миллисекундах, через которое ей нужно повторять своё выполнение. Получается, что если мы напишем:

SetInterval(function(){ alert(1); }, 20);

то будем видеть алерт каждые 20 миллисекунд. А если напишем

SetInterval(function(){ alert(1); }, 50);

то каждые 50мс.

С кадрами в секунду это соотносится очень легко. В одной секунде тысяча миллисекунд, значит, если мы хотим показывать человеку 50 кадров в секунду, то 1000 / 50 = 20мс - каждые 20 миллисекунд мы должны повторять действия по интервалу.

Исходя из всего вышесказанного, мы уже можем изобразить базовый хребет нашей функции:

Function fade(elem, t, f){ // кадров в секунду (по умолчанию 50) var fps = f || 50; // время работы анимации (по умолчанию 500мс) var time = t || 500; var timer = setInterval(function(){ // изменение opacity // если анимация окончена if(/* проверка */){ // убираем интервал выполнения clearInterval(timer); // и убираем элемент из потока документа elem.style.display = "none"; } }, (1000 / fps)); }

Конструкции var fps = f || 50 и var time = t || 500 объявляют параметры по умолчанию. То есть, если при вызове мы не передадим в функцию второй и третий элементы, то их значения будут равны соответственно 50 и 500.

Сама конструкция организации setInterval тоже логична. Мы устанавливаем интервал с периодичностью 1000 / fps. После завершения анимации этот интервал нам нужно удалить.

Обратите внимание на строчку elem.style.display = "none" ! Это указание нужно, чтобы после обнуления непрозрачности элемента, он освободил место. Если этого не сделать, элемента не будет видно, но его место будет оставаться пустым - нижние элементы не переместятся туда.

Уже почти всё! Нам осталось добавить только изменение видимого свойства и проверку на завершение анимации.

Как же правильно организовать изменение свойства opacity. Математика здесь элементарная. У нас есть время и количество кадров в секунду. Например, время time = 2000 и количество кадров в секунду fps = 50. fps = 50, означет, что мы будем показывать кадр каждые 1000 / fps милисекунд, т.е. 1000 / 50 = 20.

Это означает, что всего мы покажем пользователю n = time / (1000 / fps) = 2000 / (1000 / 50) = 1000 кадров. Получается, что значение свойства opacity мы также должны изменить 1000 раз. Вспомним, opacity изменяется от x0 = 0 до x1 = 1. Общая формула dx = (x1 - x0) / (time / (1000 / fps)) . А если по-простому, то мы 1 делим на 1000 и получаем 0.001.

Занесём это всё в код:

Function fade(elem, t, f){ // кадров в секунду (по умолчанию 50) var fps = f || 50; // время работы анимации (по умолчанию 500мс) var time = t || 500; // сколько всего покажем кадров var steps = time / (1000 / fps); // текущее значение opacity - изначально 0 var op = 1; // изменение прозрачности за 1 кадр var d0 = op / steps; // устанавливаем интервал (1000 / fps) // например, 50fps -> 1000 / 50 = 20мс var timer = setInterval(function(){ // уменьшаем текущее значение opacity op -= d0; // устанавливаем opacity элементу DOM elem.style.opacity = op; // уменьшаем количество оставшихся шагов анимации steps--; // если анимация окончена if(steps