Есть ошибочное мнение среди веб-разработчиков, что CSS анимация — единственный производительный способ анимирования в сети. Этот миф принудил много разработчиков отказаться от основанной на JavaScript анимации в целом. Таким образом:

Вынудили себя управлять сложным взаимодействием UI в таблицах стилей

Блокировали себя в поддержке Internet Explorer 8 и 9

Воздерживаются от возможности построения физики движения, которая возможна только в JavaScript

Проверка в реальных условиях: основанная на JavaScript анимация так же быстра, как и анимация, основанная на CSS - иногда еще быстрее. Анимация CSS имеет преимущество, как правило, только по сравнению с $.animate() jQuery, которая является, по сути, очень медленным. Однако библиотеки для анимации JavaScript, которые обходят jQuery, показывают невероятную производительность, избегая манипулирования DOM насколько это возможно. Эти библиотеки могут быть до 20 раз быстрее, чем jQuery.

Так, давайте развеем некоторые мифы, погрузимся в некоторые реальные примеры анимации и улучшим наши навыки программирования в процессе. Если вы любите разрабатывать практичные UI анимации для своих проектов, то эта статья для вас.

Почему JavaScript?

CSS анимации удобны, когда вы должны сделать переходы свойств в свои таблицы стилей. Плюс, они показывают фантастическую производительность из коробки - без добавления библиотеки на страницу. Однако, когда вы используете переходы CSS, чтобы привести в действие богатый проект движения (подобное вы увидите в последних версиях IOS и Android), они становятся слишком трудными в управлении, или их функции просто сыпятся ошибками.

В конечном счете, CSS анимации ограничивают вас определенной спецификацией. В JavaScript, по самой природе любого языка программирования, у вас есть бесконечное количество логического контроля. Механизмы JavaScript анимации усиливают этот факт, чтобы обеспечить новые функции, которые позволяют вам осуществлять некоторые очень полезные приемы:

Примечание: Если вас интересует тема производительности, то можете почитать Джулиана Шапиро “CSS vs. S Animation: что быстрее?” и Джека Дойла: “Разрушение мифа: CSS Animations vs. JavaScript” . Для демо производительности, обратитесь к панели производительности в документации Velocity и демо GSAP «Библиотека сравнения скорости».

Velocity и GSAP

Две самых популярных библиотеки для JavaScript анимации — Velocity.js и GSAP . Обе работают с и без jQuery. При использовании этих библиотек совместно с jQuery, нет никакого ухудшения производительности, потому что они полностью обходят стек jQuery анимации.

Если jQuery присутствует на вашей странице, вы можете использовать Velocity и GSAP точно так же как и $.animate() jQuery. Например, $element.animate({ opacity: 0.5 }); просто становится $element.velocity({ opacity: 0.5 }) .

Эти две библиотеки также работают, когда jQuery не присутствует на странице. Это означает, что вместо того, чтобы объединить вызов анимации в цепочку в элемент jQuery объекта - как просто показано - вы передали бы целевой элемент(ы) к вызову анимации:

1 2 3 4 5

/* Работа без jQuery */ Velocity(element, { opacity: 0.5 } , 1000 ) ; // Velocity TweenMax.to (element, 1 , { opacity: 0.5 } ) ; // GSAP

Как видно Velocity сохраняет тот же синтаксис что и $.animate () jQuery, даже когда это используется без jQuery; просто сместите все параметры вправо на одну позицию, чтобы создать место для передачи в предназначенных элементах в первой позиции.

GSAP, напротив, использует объектно-ориентированный API проект, а также удобные статические методы. Так, вы можете получить полный контроль над анимациями.

В обоих случаях вы больше не анимируете объект элемента jQuery ,а скорее необработанный DOM узел. Как напоминание, вы получаете доступ к необработанным DOM узлам при помощи document.getElementByID , document.getElementsByTagName , document.getElementsByClassName или document.querySelectorAll (который работает так же к селекторному механизму jQuery). Мы будем работать с этими функциями в следующем разделе.

Работа без jQuery

(Примечание: если вы нуждаетесь в базовом учебнике для начинающих в работе с $.animate() jQuery, обратитесь к первым нескольким разделам в документации Velocity .)

Давайте исследовать querySelectorAll потому что, вероятно, вы будете использовать именно это оружие при выборе элементов без jQuery:

Как показано вы просто передаете querySelectorAll CSS селектор (те же селекторы, которые Вы использовали бы в своих таблицах стилей), и он возвратит все соответствующие элементы в массив. Следовательно, вы можете сделать это:

1 2 3 4 5

/* Получите все элементы div. */ var divs = document.querySelectorAll ("div" ) ; /* Анимируйте все div сразу. */ Velocity(divs, { opacity: 0.5 } , 1000 ) ; // Velocity TweenMax.to (divs, 1 , { opacity: 0.5 } ) ; // GSAP

Поскольку мы больше не присоединяем анимации к объектам элемента jQuery, вы можете задаться вопросом, как мы можем объединить анимации в цепочку:

В Velocity вы просто вызываете анимации одну за другой:

/* Эти анимации автоматически становятся цепочкой. */ Velocity(element, { opacity: 0.5 } , 1000 ) ; Velocity(element, { opacity: 1 } , 1000 ) ;

У анимации этого пути нет недостатка производительности (вы кэшируете элемент, анимируемый к переменной, вместо того, чтобы неоднократно делать querySelectorAll выборку для того же элемента).

(Подсказка: С пакетом Velocity UI вы можете создать свои собственные анимации мультивызова и дать им пользовательские имена, которые сможете использовать в дальнейшем как первый параметр Velocity. См. UI Pack документацию Velocity для получения дополнительной информации.)

Velocity вызов-обработки-за-один-раз, обладает огромным преимуществом: если вы будете использовать promises со своими Velocity анимациями, то каждый Velocity вызов возвратит действенный promise объект. Можно узнать больше о работе с promises в статье Джейка Арчибальда . Они невероятно сильны.

В случае GSAP его выразительный объектно-ориентированный API позволяет вам помещать свои анимации во временную шкалу, давая вам контроль над планированием и синхронизацией. вы не ограничены цепочечными анимациями; можно вложить временные шкалы, заставить анимации наложиться, и т.д.:

Удивительность JavaScript: Workflow

Анимация является по сути экспериментальным процессом, в котором необходимо играть с timing и easing для получения правильного ощущения, в котором нуждается приложение. Конечно, даже если вы будете считать дизайн прекрасным, клиент будет часто запрашивать нетривиальные изменения. В этих ситуациях управляемый workflow становится важным.

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

Однако базовый недостаток API ключевых кадров — в том, что вы должны определить разделы в процентах, который не интуитивен. Например:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

@ keyframes myAnimation { 0 % { opacity: 0 ; transform: scale(0 , 0 ) ; } 25 % { opacity: 1 ; transform: scale(1 , 1 ) ; } 50 % { transform: translate(100px, 0 ) ; } 100 % { transform: translate(100px, 100px) ; } } #box { animation: myAnimation 2.75s; }

Что происходит, если клиент просит, чтобы вы сделали translateX анимацию на секунду длиннее? Это требует восстановления математики и изменения всех (или большинства) процентов.

Небольшая библиотека для создания анимации на основе JavaScript. С её помощью можно анимировать свойства CSS, SVG-изображения или атрибуты DOM-дерева на веб-странице. Библиотека позволяет контролировать все аспекты анимации и предоставляет много способов для обозначения элементов, которые нужно привести в движение.

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

В этой серии обучающих статей вы узнаете обо всех функциях Anime.js и сможете применять библиотеку в своих проектах.

Примечание Если вы совсем новичок в JavaScript, предлагаем вам ознакомиться с по этому языку программирования.

Установка библиотеки

Для установки можно использовать команды npm или bower:

Npm install animejs bower install animejs

Вы также можете загрузить библиотеку и включить в свой проект или ссылаться на её последнюю версию через CDN.

После успешной установки вы сможете использовать Anime.js для добавления интересных анимаций к вашим элементам. Давайте начнём с базовых возможностей библиотеки.

Определение целевых элементов

Для создания анимации с помощью Anime.js нужно вызвать функцию anime() и передать ей объект с парами ключ-значение, которые определяют целевые элементы и свойства, которые вы хотите анимировать. Вы можете использовать ключевое слово targets , чтобы дать библиотеке понять, что вам нужно анимировать. Это ключевое слово может принимать значение в разных форматах.

CSS-селекторы : вы можете передавать один или более селекторов в виде значений для ключевого слова targets .

Var blue = anime({ targets: ".blue", translateY: 200 }); var redBlue = anime({ targets: ".red, .blue", translateY: 200 }); var even = anime({ targets: ".square:nth-child(even)", translateY: 200 }); var notRed = anime({ targets: ".square:not(.red)", translateY: 200 });

В первом случае Anime.js будет анимировать все элементы с классом blue . Во втором - blue или red . В третьем случае Anime.js будет анимировать все дочерние чётные элементы с классом square . А в последнем случае библиотека будет взаимодействовать со всеми элементами с классом square , у которых нет класса red .

DOM-узлы (DOM node) или коллекция узлов (NodeList): вы можете также использовать DOM-узел или NodeList в качестве значения для ключевого слова targets . Посмотрите на пример использования DOM-узла для targets .

Var special = anime({ targets: document.getElementById("special"), translateY: 200 }); var blue = anime({ targets: document.querySelector(".blue"), translateY: 200 }); var redBlue = anime({ targets: document.querySelectorAll(".red, .blue"), translateY: 200 }); var even = anime({ targets: document.querySelectorAll(".square:nth-child(even)"), translateY: 200 }); var notRed = anime({ targets: document.querySelectorAll(".square:not(.red)"), translateY: 200 });

В первом случае использовалась функция getElementById() , чтобы обратиться к определённому элементу. Функция querySelector() использовалась для обращения к элементу с классом blue . А функция querySelectorAll() применялась для обращения ко всем элементам внутри документа, которые соответствуют группе определённых селекторов или же, наоборот, не входят в неё.

Существует множество функций, которые вы также можете использовать для выбора целевого элемента. Например, вы можете обратиться к элементам с определённым классом, используя функцию getElementsByClassName() . Или к элементам с определённым тегом, используя функцию getElementsByTagName() .

Любая функция, возвращающая DOM-узел или NodeList, может использоваться для установки значения targets в Anime.js.

Объект: вы можете использовать объекты JavaScript в качестве значения для targets . Ключ этого объекта используется в качестве идентификатора, а значение - в качестве числа, которое нужно анимировать.

Затем вы сможете показать анимацию внутри другого HTML-элемента с помощью дополнительного JavaScript-кода. Ниже приведён пример анимации значений двух разных ключей одного объекта.

Var filesScanned = { count: 0, infected: 0 }; var scanning = anime({ targets: filesScanned, count: 1000, infected: 8, round: 1, update: function() { var scanCount = document.querySelector(".scan-count"); scanCount.innerHTML = filesScanned.count; var infectedCount = document.querySelector(".infected-count"); infectedCount.innerHTML = filesScanned.infected; } });

Код выше будет приводить в движение счётчик сканированных файлов от 0 до 1 000 и счётчик заражённых файлов от 0 до 8. Помните, что вы можете анимировать числовые значения только таким образом. При попытке анимировать ключ из AAA в BOY будет выведено сообщение об ошибке.

Кроме того, в коде использовалась функция обратного вызова ключа update , который вызывается на каждый кадр во время выполнения анимации. Здесь она использовалась для обновления количества сканированных и заражённых файлов. Однако вы можете пойти дальше и показать пользователям сообщение об ошибке, когда количество заражённых файлов превысит определённый порог.

Массив: возможность указывать массив JavaScript в качестве значения targets будет полезна, если вам нужно анимировать множество элементов, которые относятся к разным категориям. Например, если вы хотите анимировать DOM-узел, объект и множество других элементов, основанных на CSS-селекторах, то можно это сделать, поместив их в массив, а затем определить массив в качестве значения для targets . Пример ниже должен прояснить ситуацию.

Var multipleAnimations = anime({ targets: , translateY: 250 });

Какие свойства можно анимировать с помощью Anime.js

Теперь вы знаете, как определить разные элементы, которые нужно анимировать. Пришло время узнать, какие свойства и атрибуты могут быть анимированы при использовании библиотеки.

Свойства CSS

К таким, например, относятся ширина, высота и цвет для разных целевых элементов. Финальные значения разных анимируемых свойств вроде background-color определяются с использованием lowerCamelCase. Таким образом background-color превращается в backgroundColor . Код ниже иллюстрирует анимацию положения объекта left и цвета фона (backgroundColor) целевого объекта.

Var animateLeft = anime({ targets: ".square", left: "50%" }); var animateBackground = anime({ targets: ".square", backgroundColor: "#f96" });

Свойства могут принимать разные виды значений, которые они бы приняли при использовании обычного CSS. Например, свойство left может иметь такие значения: 50vh , 500px или 25em . Вы также можете не указывать единицу измерения после числа, но в таком случае ею станет px по умолчанию. Аналогичные действия можно выполнить с background-color , указав цвет в виде шестнадцатеричного значения или при помощи кода RGB или HSL.

CSS-трансформирование

Преобразование по осям X и Y достигается с помощью свойств translateX и translateY . Аналогичным образом можно масштабировать, наклонять или вращать элемент вдоль определённой оси, используя свойства: scale (масштабирование), skew (наклон) или rotate (поворот), соответствующие этой конкретной оси.

Существует возможность определения разных углов или в градусах, или с помощью свойства turn . Значение turn, равное 1, соответствует 360 градусам. Это позволяет сделать вычисления проще, так как вы знаете, на сколько нужно повернуть элементы относительно своей оси. В примере ниже показано, как происходит анимация масштабирования, перехода или поворота как единичного свойства, так и всех сразу.

Var animateScaling = anime({ targets: ".square", scale: 0.8 }); var animateTranslation = anime({ targets: ".square", translateX: window.innerWidth*0.8 }); var animateRotation = anime({ targets: ".square", rotate: "1turn" }); var animateAll = anime({ targets: ".square", scale: 0.8, translateX: window.innerWidth*0.8, rotate: "1turn" });

Атрибуты SVG

Единственное условие заключается в том, что значение атрибутов должно быть числовым. Способность анимировать разные атрибуты открывает возможности для создания некоторых классных эффектов. Поскольку эта статья ознакомительная, в ней будут приведены простые примеры.

В финальной части будут описаны различные обратные вызовы (callback-функции), используемые для выполнения функций в зависимости от прогресса анимации. Почти в каждом примере в предыдущих статьях использовались свойства CSS, чтобы показать, как работают различные методы и параметры. Возможно, у вас могло создаться впечатление, что библиотека Anime.js больше подходит для анимации CSS-свойств. В этом уроке вы узнаете, что её также можно использовать для анимации SVG-файлов.

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

Callback-функции

Обратные вызовы используются для выполнения функций, основанных на прогрессе анимации. В Anime.js существует 4 функции обратного вызова: begin , run , update и comlete . Каждая из них запускается в определённое время и принимает объект анимации в качестве своего аргумента.

Функция begin() вызывается, когда анимация начинается. Это значит, что если у анимации есть параметр delay со значением 800 миллисекунд, то begin() будет вызвана только через 800 миллисекунд. Можно проверить, запустилась анимация или нет, используя функцию animationName.begin , которая возвращает true (запустилась) или false (не запустилась).

Run используется для выполнения функции в каждом кадре после запуска анимации. Если нужно выполнить функцию в каждом кадре с самого начала анимации, независимо от параметра delay , то используйте callback-функцию update .

Callback-функция complete похожа на begin , только вызывается она после окончания. Чтобы проверить, завершилась анимация или нет, используйте animationName.complete , как и в случае с begin .

Callback-функцию update мы использовали ещё в для обновления количества сканированных и заражённых файлов. В этой статье мы дополним пример со сканированием, и вы увидите, как работают все callback-функции.

Var filesScanned = { count: 0, infected: 0 }; var scanCount = document.querySelector(".scan-count"); var infected = document.querySelector(".infected-count"); var scanning = anime({ targets: filesScanned, autoplay: false, count: 100, infected: 8, delay: 1000, duration: 2000, easing: "linear", round: 1, update: function(anim) { if (anim.currentTime < 1000) { document.querySelector(".update-cb").innerHTML = "Creating an Index..."; } }, begin: function() { document.querySelector(".begin-cb").innerHTML = "Starting the Scan..."; }, run: function() { scanCount.innerHTML = filesScanned.count; infected.innerHTML = filesScanned.infected; }, complete: function() { document.querySelector(".complete-cb").innerHTML = "Scan Complete..."; } });

В примере выше намеренно была добавлена задержка анимации, чтобы можно было заметить разницу во времени выполнения разных функций обратного вызова. Callback-функция update начинает выполняться сразу после создания объекта анимации.

Сама анимация начинается с задержкой в 1000 миллисекунд, и именно в этот момент срабатывает функция begin , которая показывает пользователю сообщение «Starting the Scan…». В то же время run начинает выполняться и обновлять числовые значения объекта после каждого кадра. После окончания анимации функция обратного вызова complete отображает сообщение «Scan Complete…».

Функции плавности

Функции плавности используются для контроля перехода начального значения свойства в конечное. Эти функции можно определить с помощью параметра easing , который может принимать значения как в виде строк, так и в виде пользовательских координат кривых Безье (в виде массива).

Существует 31 встроенная функция плавности. Одна из них называется linear , остальные 30 состоят из разных вариаций easeIn , easeOut и easeInOut . Класc elastic определяет три функции плавности: easeInElastic , easeOutElastic и easeInOutElastic . Вы можете управлять ими с помощью параметра elasticity . Значение этого параметра может находиться только в диапазоне от 0 до 1000.

Использование easeIn ускоряет изменение значения, начиная с нуля. Это значит, что изменяться оно будет сначала медленно, а в конце - быстро. Скорость изменения в начале равна нулю, а в конце - 1000.

Функция easeOut замедляет изменение значения, начиная с максимальной скорости.

easeInOut увеличивает скорость смены значений в начале и замедляет в конце. Это значит, что в середине анимации скорость будет самой высокой. Следующая вставка показывает разницу между этими функциями плавности:

С помощью anime.easings можно создавать собственные функции плавности. Ниже приведён пример создания пользовательских функций плавности:

Anime.easings["tanCube"] = function(t) { return Math.pow(Math.tan(t * Math.PI / 4), 3); } anime.easings["tanSqr"] = function(t) { return Math.pow(Math.tan(t * Math.PI / 4), 2); } var tanCubeSequence = anime({ targets: ".tan-cube", translateX: "75vw", duration: 2000, easing: "tanCube", autoplay: false }); var tanSqrSequence = anime({ targets: ".tan-sqr", translateX: "75vw", duration: 2000, easing: "tanSqr", autoplay: false });

Анимации на основе SVG-файлов

Во всех связанных с движением анимациях, которые были созданы до этого момента, целевые элементы перемещались по прямой линии. В Anime.js можно перемещать элементы по сложным SVG-контурам с большим количеством кривых с возможностью контроля положения и угла анимируемых элементов на контуре. Чтобы переместить элемент по оси X на контуре, используйте path("x") . Подобным образом элементы можно перемещать по оси Y, используя path("y") .

Если контур не представлен в виде прямой линии, то он почти всегда будет формировать угол относительно основной горизонтальной линии. При вращении любого некруглого элемента анимации общая картинка будет выглядеть более естественно, если элемент будет перемещаться по углу контура. Это можно сделать, установив значение свойства rotate равным path("angle") . Ниже представлен пример кода, который анимирует четыре элемента с разными значениями плавности по SVG-контуру:

Var path = anime.path("path"); var easings = ["linear", "easeInCubic", "easeOutCubic", "easeInOutCubic"]; var motionPath = anime({ targets: ".square", translateX: path("x"), translateY: path("y"), rotate: path("angle"), easing: function (el, i) { return easings[i]; }, duration: 10000, loop: true });

Во вставке ниже видно, что красный квадрат с функцией плавности easeInCubic двигается медленнее всех в начале, но быстрее всех в конце. Похожая ситуация и в случае с оранжевым квадратом - быстрее всего он двигается в начале, но медленнее всех в конце.

Существует возможность анимирования преобразований разных SVG-форм из одной в другую с помощью Anime.js. Единственным условием для преобразования фигур является наличие равного количества опорных точек. Это значит, что треугольники можно преобразовать только в другие треугольники, четырёхугольники - в четырёхугольники и так далее. Попытка преобразования элементов с неравным количеством опорных точек приведёт к резкому изменению формы. Ниже представлен пример трансформаций треугольника:

Var morphing = anime({ targets: "polygon", points: [ { value: "143 31 21 196 286 223" }, { value: "243 31 21 196 286 223" }, { value: "243 31 121 196 286 223" }, { value: "243 31 121 196 386 223" }, { value: "543 31 121 196 386 223" } ], easing: "linear", duration: 4000, direction: "alternate", loop: true });

Одним из наиболее интересных эффектов Anime.js является возможность создания линейных рисунков. Всё, что нужно сделать - предоставить библиотеке контур, который вы хотите использовать для линейного рисунка; предоставить другие параметры, с помощью которых контролируется продолжительность, задержка и плавность. В примере ниже использовалась функция обратного вызова complete , чтобы сделать заливку рисунка якоря из Font Awesome жёлтым цветом.

Var lineDrawing = anime({ targets: "path", strokeDashoffset: , easing: "easeInOutCubic", duration: 4000, complete: function(anim) { document.querySelector("path").setAttribute("fill", "yellow"); } });

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

Var letterTime = 2000; var lineDrawing = anime({ targets: "path", strokeDashoffset: , easing: "easeInOutCubic", duration: letterTime, delay: function(el, i) { return letterTime * i; }, begin: function(anim) { var letters = document.querySelectorAll("path"), i; for (i = 0; i < letters.length; ++i) { letters[i].setAttribute("stroke", "black"); letters[i].setAttribute("fill", "none"); } }, update: function(anim) { if (anim.currentTime >= letterTime) { document.querySelector(".letter-m").setAttribute("fill", "#e91e63"); } if (anim.currentTime >= 2 * letterTime) { document.querySelector(".letter-o").setAttribute("fill", "#3F51B5"); } if (anim.currentTime >= 3 * letterTime) { document.querySelector(".letter-n").setAttribute("fill", "#8BC34A"); } if (anim.currentTime >= 4 * letterTime) { document.querySelector(".letter-t").setAttribute("fill", "#FF5722"); } if (anim.currentTime >= 5 * letterTime) { document.querySelector(".letter-y").setAttribute("fill", "#795548"); } }, autoplay: false });

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

И главное — это все на 100% бесплатные ресурсы с открытым исходным кодом, поэтому вы можете использовать их в любом из своих проектов.

1. Dyanamic.js

Просто включите dynamics.js на странице, и после этого вы сможете анимировать свойства CSS для любого элемента DOM . Вы также сможете анимировать свойства SVG .

Dynamics.js содержит собственное свойство setTimeout . Причина в том, что requestAnimationFrame и setTimeout характеризуются разным поведением. Свойство поддерживается всеми объектами JavaScript . Библиотека была протестирована на совместимость с Safari 7+ , Firefox , Chrome 35+ 34+ , IE10+ .

2. Animate Plus

Производительная JavaScript-библиотека , помогающая анимировать свойства CSS и атрибуты SVG .

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

3. Cta.js

Компактная производительная JavaScript-библиотека для анимирования любого элемента («действия «) внутри любого другого элемента («эффект «) на странице.

4. Beep.js

Beep.js представляет собой набор инструментов для создания браузерных JavaScript синтезаторов с использованием WebAudio API .

5. Iconate.js

Производительная JavaScript -библиотека анимации и трансформации кроссбраузерных иконок. iconate.js также поддерживает модульные шаблоны AMD и CommonJS .

6. Dom Animator

JavaScript-библиотека для вывода небольших элементов ASCII-анимации в комментариях DOM . Это самостоятельная библиотека, которая использует только JavaScript (анимация выполняется в узлах комментариев, только в DOM ).

7. Rainyday

Rainyday.js позволяет с помощью холстов HTML5 и JavaScript создавать реалистично выглядящие эффекты капель дождя на стекле. Библиотека включает в себя расширяемый API и встроенное средство обнаружения ошибок.

Rainyday.js использует возможности HTML5 , поэтому она поддерживается большинством современных браузеров.

8. Anima.js

Anima.js позволяет использовать задержки и продолжительности, даже для анимации на CSS . Библиотека использует для создания анимации CSS-преобразования и 3d-трансформацию с включением Javascript . Вы сможете запускать, останавливать, отменять анимацию и даже создавать зависимые от событий эффекты.

9. blinkTitle.js

blinkTitle.js может создавать мигающий HTML-заголовок , предупреждение или уведомление в заголовке.

10. Snabbt.js

Javascript-библиотека предназначена для перемещения элементов, смещения, вращения, масштабирования, наклона, а также изменения размера. Благодаря операциям умножения матриц, преобразования могут объединяться в любых комбинациях по вашему желанию. Затем конечный результат задается с помощью матриц преобразования CSS3 .

11. Vivus

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

12. Impulse

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

13. Ani.js

AniJS — это декларативная JavaScript-библиотека для обработки CSS-анимации . Она полностью задокументирована, проста в работе.

14. Bounce.js

Инструмент для создания красивых keyframes анимации на базе CSS3 . Добавьте компонент, выберите вариант и получите короткий URL-адрес или экспортируйте код в CSS .

15. Sticker.js

Sticker.js — это JavaScript-библиотека , которая позволяет создавать эффекты отклеивания стикеров. Библиотека работает в большинстве популярных браузеров, которые поддерживают CSS3 (в том числе IE10+ ). Распространяется под лицензией MIT License .

16. Wow.js

WOW.js выводит CSS-анимацию во время прокручивания страницы вниз. По умолчанию вы должны использовать это действие, чтобы запустить animate.css , но вы можете легко изменить эти настройки.

17. Parallax.js

Parallax.js — это компактное решение для создания эффектов параллакса. Библиотека также работает на смартфонах и планшетах (с гироскопом или аппаратным детектором движения ). Parallax.js имеет несколько параметров для настройки эффекта с помощью «атрибутов данных » или через JavaScript . Библиотека может работать автономно или как плагин JQuery и Zepto (существуют две версии ).

С появлением CSS3-анимаций, HTML-документы стали гораздо привлекательней, и разрабатывать их стало проще. Используя правило @keyframes, вы можете без труда определять различные параметры, включая расположение и размер HTML-элемента. Параметр animation, в свою очередь, отвечает за запуск и перемещение ключевых кадров в зависимости от определенных параметров. Без необходимости использовать javascript и плагины, мы можем без труда создавать даже самые сложные анимации, которые будут работать очень плавно во всех современных браузерах.

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

Комбинируем CSS и javascript при помощи нового метода animate()

Новый javascript-метод animate() позволяет нам управлять анимациями посредством скрипта. Конечно же, нам все равно нужно использовать целую пачку CSS-параметров для определения наших ключевых кадров.

{height: "0"},
{height: "100%"}
], {
duration: 3000,
iteration: 2,
delay: 1000
});
В вышеприведенном примере мы прикрепляем метод animate() к элементу. Внутри квадратных скобок определяется столько состояний заданного параметра, сколько нам требуется, и в нашем примере мы будем работать над height. Каждое значение записано в виде буквы объекта, а значения используются лишь для одного отдельного параметра. Комбинации вроде width и height недопустимы. Учтите, что сами значения должны быть обрамлены цитированием, и оформлены синтаксисом, отвечающим требованиям javascript, а это значит, что нужно использовать “backgroundColor” вместо “background-color”. В другой букве объекта, сразу после закрытия квадратных скобок, мы определяем дальнейшую анимацию. Мы хотим изменить длину анимацию посредством duration, частоту повторений посредством iteration и может на усмотрение определить задержку посредством параметра delay, - этот параметр определяет момент, когда должна быть запущена анимация. Все временные значения указываются в миллисекундах.

Управляем набором ключевых кадров и их продолжительностью

Нам нужно запустить метод animate() отдельно от каждого параметра, который нам нужно изменить. Это значит, что при желании изменить как height, так и width, нам нужно будет повторно запускать animate().

Document.getElementById("element").animate([
{width: "0", offset: 0},
{width: "10%", offset, 1/3},
{width: "100%", offset: 1}
], {
duration: 3000,
iteration: 2,
delay: 1000
});
Вы вышеприведенном примере мы изменяем ширину элемента. Ширина должна изменяться, начиная от 0, и поднимаясь до 10 процентов, а затем завершиться при достижении 100 процентов. Все это будет сопровождаться плавной анимацией, естественно. Дополнительный параметр offset определяет, что изменения от 0 до 10 процентов будут занимать 1/3 всего времени, а переход от 10 к 100 займет 2/3 всего времени анимации. И при этом всем, общая продолжительность анимации определяется параметром duration. В данном случае, первая часть будет происходит на протяжении одной секунды, а вторая – на протяжении 2.

Вместо того, чтобы определять значение в виде дробей, вы также можете воспользоваться десятичными числами. Нужно использовать цифры от 0 до 1. К примеру, вместо 1/3 вы можете использовать 0.33.

Больше опций для анимации

Если вы знакомы с CSS3-параметром animation, то наверняка знаете о том, что метод animate() позволяет управлять процессом анимации. Вы можете изменять направление, а также скорость анимации, и ее ускорение. Если вы хотите указать, что после окончания, анимация должна вернуться к началу, то можете сделать это.

Document.getElementById("element").animate([
…
], {
duration: 3000,
iteration: 2,
delay: 1000,
direction: "reverse",
easing: "ease-in",
fill: "forwards"
});
Значение direction содержит в себе информацию о направлении анимации. Если вы установите значение reverse, то анимация будет воспроизведена в обратном направлении. Значение же alternate позволит вам воспроизвести анимацию в стандартном направлении, а затем в обратном. А значение alternate-reverse комбинирует два последних значения.

Значение easing позволяет вам использовать самые распространенные функции модификаций, которые уже хорошо известны по CSS3, так как там можно встречать ease-in, ease-out и так далее. По умолчанию, каждая анимация настроена на линейный ход без ускорения или замедления. Значение fill определяет, что будет представлено после окончания анимации. По умолчанию, анимация должна вернуться к стартовой точке. При использовании значения forward, анимация остановится на последнем ключевом кадре.

Управление анимацией

Применение animate() к переменной позволяет нам управлять анимацией посредством javascript. Мы можем запускать и останавливать ее по собственному усмотрению.

Var animation = document.getElementById("element").animate([
{height: "0"},
{height: "100%"}
], {
duration: 3000,
iteration: 2,
delay: 1000
});

document.getElementById("animation_start").addEventListener("click", function() {
animation.play();
}, false);

document.getElementById("animation_pause").addEventListener("click", function() {
animation.pause();
}, false);
В нашем примере мы прикрепляем анимацию к переменной animation, как это ни странно. Затем мы прикрепляем 2 слушателя событий к элементам с id animation_start и animation_pause. Эти слушатели позаботятся о выполнении определенных функций при клике. Play запускает анимацию, pause уже понятно, что делает, а reverse немедленно перенесет вас к последнему ключевому кадру и полностью остановит анимацию.

Эй, ведь это javascript. Конечно же, у нас есть слушатель событий, который позволяет реагировать на окончание анимации. Мы можем реализовать это при помощи finish. Внутри finish нужно определить соответствующую функцию.

Animation.addEventListener("finish", function() {
alert("The animation has ended.");
}, false);
В вышеприведенном примере мы просто запускаем сообщение о том, что анимация завершена.

Браузерная поддержка

animate() сейчас находится на ранней стадии разработки и сейчас обременена ярлыком «experimental». Поддержка этого параметра появится в Chrome, начиная с 36 версии. Если вы хотите опробовать ее сейчас, то можете скачать и установить Chrome Canary.