Скрипт анимации. Сравнение анимации средствами CSS и JavaScript. Оптимизация производительности анимации
Иногда очень сильно не хватает какого-то хорошего редактора для PHP именно с точки зрения комфортной работы с кодом, что-то посерьезней, чем простая подсветка синтаксиса. При этом обычных редакторов пруд пруди, в которых, к сожалению, та же подсветка синтаксиса далеко не всегда корректно работает.
Хочется иметь нормальную реализацию IntelliSense, а не «деревянную» пародию на него в виде заранее определенного списка методов и констант языка, «вываливающегося» во время работы по поводу и без повода в виде полного списка. IntelliSense обязательно должен «знать» о всех используемыми вами классах, о их методах и переменных, то есть подключил через #include файл с определением своего класса, и редактор сразу же его подхватывает, подсказывая информацию о всех «внутренностях» объектов этого класса.
Не помешали бы так же подсказки во время набора названия функции в виде краткого описания функции (принимаемые параметры, есть ли перегруженные функции и т.п.). Особенно этого не хватает для самописных функций, в некоторых типичных редакторах я видел такие подсказки, но только для родных функций PHP. Ах да, еще очень удобно быстро переходить к определению функции из места ее вызова. Вообще, много чего еще хочется, причем все эти возможности считаю лишь толикой самых необходимых вещей в процессе кодинга и никак не излишеством…
Можно сказать, что в этом смысле моим идеалом является связка MS Visual Studio + Visual Assist , которую я использую при работе с C# и C++ (Visual Assist в этой связке просто как спасательный круг). Когда лишний раз не лезешь в другие файлы, чтобы посмотреть принимаемые параметры функции или названия тех или иных членов класса, это в любом случае способствует производительности и «приятности» процесса. Отсутствие среди своего инструментария такого редактора очень удручает, учитывая все большую (от версии к версии) объектно-ориентированность PHP.
И вот оно!
Все же нашел для себя достаточно неплохой редактор — . Если вы, как я, пользовались обычными редакторами, заменяющими стандартный «блокнот» и тоже жаждали человеческого IntelliSense, советую обязательно попробовать его. Он ко всему еще и бесплатный (о платной версии ниже) и работает на базе мозиловского фреймворка (XPFE), что делает его так же мультиплатформенным.
Этот редактор не идеал, в нем много хорошего, при этом, конечно же, ему есть куда еще развиваться. Но, в целом, в первые дни знакомства с ним у меня не было предела радости 🙂
Стоит так же отметить поддержку и других языков (Perl, Python, Ruby, Tcl), а так же JavaScript, CSS, HTML, XML и много другого (судя по списку файлов, которые он может открыть, он знает еще много языков и технологий, но не уверен насчет работы IntelliSense для них всех). Приятно удивила поддержка многих популярных фрейворков для JavaScript (для это было кстати).
Я наверняка еще не успел изучить весь функционал Komodo Edit, но некоторые моменты хотел бы описать.
Первым делом я настроил под себя цветовую схему подсветки кода для PHP (Edit -> Preferences… -> Fonts and Colors ), так как привык уже к цветам из .
Так же полезным дополнением оказался плагин , который находит все TODO в открытом проекте или файле и выводит их в один список (на подобие того, как это реализовано в VS). И плагин, позволяющий видеть в виде одного списка все классы и методы, определенные в открытом файле () для быстрой навигации по ним.
Вообще перед использованием Komodo имеет смысл изучить его настройки, изменив те или иные параметры под себя. Я, к примеру, еще переопределил горячую клавишу для перехода к определению функций (сделал F12, как в Visual Studio 🙂).
В целом все работает достаточно хорошо, «земля и небо» по сравнению с кодингом в обычном редакторе.
Немного неудобно, что для полноценной поддержки IntelliSense обязательно нужно создавать файл проекта (его нужно просто сохранить в корневой каталог сайта). То есть если открыть один файл вне рамок проекта Komodo, все инклуды, прописанные в нем, не будут обрабатываться как-либо, и, соответственно, Komodo не будет ничего знать о функциях и классах, определенных в подключаемых файлах. Но, в целом, это маленькое неудобство пережить можно 🙂
С другой стороны, создание файла проекта дает возможность выполнить более тонкие настройки проекта, которые сохраняются и при каждом открытии проекта, Komodo будет помнить о них. Через него, к примеру, можно указать дополнительные директории для того, чтобы Komodo при работе с вашим проектом все время имел ввиду структуру классов и методов (для IntelliSense и различных подсказок), реализованных в файлах, которые лежат в подключаемой директории, даже если эти файлы ни как фактически не подключены (через include или require) к редактируемому файлу. Еще можно производить поиск или замену текста во всех файлах проекта. Так же, Komodo запоминает сделанные вами закладки внутри кода (Ctrl+F2 ) для каждого файла, это очень удобно.
Немного неприятно удивило, что Komodo Edit ничего не знает о встроенных в PHP классах (может, я делаю что-то не так?). К примеру, если нужно использовать класс mysqli:
$mysqli = new mysqli(HOST, USER, PASS, MBASE); if (mysqli_connect_errno()) { print "Connect failed: ".mysqli_connect_error(); exit(); } $mysqli->query("INSERT......."); $mysqli->close();
Когда после написания слова «$mysqli» я начинаю обращаться к методам этого объекта (пишу знак «->»), Komodo Edit не хочет подсказывать ничего о методах query, close и т.д., а в строке состояния ругается, что, мол, в глаза не видел определения этого класса… При этом со встроенными в PHP функциями проблем нет, к примеру, о семействе функций mysqli_* (оберткой над которыми и является класс mysqli) Komodo прекрасно знает. Но, надеюсь, эту недоработку когда-нибудь поправят. Если же вы, к примеру, работаете с базой через свой класс — обертку (или через что-то вроде PEAR), то проблем с IntelliSense не должно возникать.
Один раз у меня случилось так, что при редактировании js файла Komodo не понял, какой Java Script фреймворк я использую. Но это, к счастью, всегда можно поправить в его настройках (Edit -> Preferences… -> Code Intelligence ).
Существует платная версия Komodo, называемая Komodo IDE . Как я понял, основное отличие от Komodo Edit в функциях, свойственных многим IDE . Комодо IDE имеет встроенные инструменты для работы с системой управления версиями (SVN) и отладчик кода.
Кстати, в Komodo Edit все же есть примитивный отладчик, который на ходу уведомляет о таких мелких ошибках, как забытая точка с запятой в конце строки, незакрытая скобка и т.п. Такие ошибки он подчеркивает красной волнистой линией. Для того, чтобы такая отладка работала, нужно в настройках программы указать путь к исполняемому файлу PHP и php.ini (Edit -> Preferences… -> Languages -> PHP ).
Как видно, подобные настройки можно проделать и для всех остальных языков.
Послесловие
Komodo Edit теперь мой повседневный инструмент 🙂 Плюс, для коротких правок каких-то мелочей в эпизодических случаях я продолжаю использовать аналог продвинутого блокнота — Notepad++, то есть использую его по своему настоящему назначению.
До Komodo Edit я еще пробовал интересный плагин к Visual Studio, который называется VS.Php . Он встраивается в Visual Studio и позволяет работать с PHP так же, как, к примеру, с C# (можно отлаживать код, работает IntelliSense и т.п.). Но как-то он не особо впечатлил, особенно на фоне своей платности. К тому же, как я понял, работая в нем можно полностью забыть про поддержку Java Script и т.п. Интересно еще то, что в нем точно так же, как в Komodo, не работает IntelliSense для классов, встроенных в PHP. Так же этот VS.Php конфликтует с Visual Assist.
Есть еще два подобных редактора, о которых я слышал, но как-то не случилось их попробовать (дальше лишь ИМХО и догадки на основе «слухов»):
- Zend Studio – платный, по отзывам сложилось впечатление, что это нечто громоздкое и применимо в первую очередь ну в очень больших и сложных проектах, особенно он уместен, возможно, если проект создается на основе Zend Framework.
- Eclipse – бесплатный, но отпугнул, скорее всего, своей «накрученностью». Как я понял, его еще нужно уметь собрать под себя из различных модулей. В общем, как-то не возникло желания разбираться с тем, как его установить и настроить (но в свое время я все же пытался немного 😉), хотя, несомненно, кому-то он может очень нравиться.
***
Если кто-то посоветует какие-нибудь еще редакторы с оглядкой на мои «придирчивые» вкусы, буду очень благодарен. Так же было бы интересно услышать о каких-то дополнительных интересных особенностях Komodo от тех, кто им уже пользуется.
В общем, долой примитивную подсветку кода с вагоном ненужных функций! Это «наболевший» камень в огород постоянно появляющихся простых редакторов кода, выставляющих на передний план среди своих «достоинств» встроенный проводник по файловой системе или что-то вроде мини редактора/вьювера базы данных (ну зачем это нужно, если нет самых важных вещей именно для того, для чего изначально предполагается использовать редактор кода) и т.п. и т.д.. Почему-то почти каждый начинающий (хотя, может, не всегда начинающий) программист хочет «быстренько» сделать свой «мега» редактор, который часто вырождается в «опять что-то до боли знакомое»… очевидно, это традиция из серии «Hellow World!» 😉
Мы с Вами уже . И теперь я решил затронуть тему работы с каталогами в PHP . В этой статье Вы научитесь создавать каталоги в PHP , удалять их и считывать из них файлы и подкаталоги.
Начнём с самого простого: создание каталога в PHP :
mkdir("new_dir");
?>
После запуска этого скрипта у Вас будет создан пустой каталог "new_dir ".
Удалить пустой каталог очень просто. Для этого используется функция rmdir() .
rmdir("new_dir");
?>
А вот теперь перейдём к работе с содержимым каталогов через PHP . Здесь есть очень простые правила, которые необходимо соблюдать. Все эти правила очень логичны, и Вы их применяете, когда вручную просматриваете содержимое каталогов:
- Открыть каталог.
- Считать содержимое.
- Закрыть каталог.
Чтобы не мучить Вас в ожиданиях, сразу приведу код, который выводит имена файлов и категорий внутри заданного каталога:
$dir = opendir("images");
while (($f = readdir($dir)) !== false)
echo $f."
";
closedir($dir);
?>
В результате Вы увидите список всех файлов и каталогов внутри каталога "images ". Также Вы увидите два интересных имени ". " и ".. ". Первый означает "текущий каталог ", а ".. " - родительский.
Теперь подробно о функциях, используемых в этом примере:
- Функция opendir(string $path) - открывает каталог, находящийся по пути $path , а также возвращает дескриптор, необходимый для работы с этим каталогом.
- Функция readdir(resource $dir) - считывает текущий элемент в каталоге dir . Текущий элемент задаётся указателем, который сдвигается при каждом вызове. Поэтому получается, что каждый раз эта функция возвращает новый элемент из каталога. Когда все элементы закончились, то функция readdir() возвращает false .
- Функция closedir(resource $dir) - закрывает каталог dir .
Это все самые важные функции для работы с каталогами в PHP . Однако, хочется добавить ещё одну очень важную деталь по поводу функции rmdir() , которая удаляет каталог. Если Вы внимательно читали, то я написал, что эта функция удаляет "пустой каталог ", то есть в котором нет ни одного файла и каталога (кроме ". " и ".. "). Другими словами, если в каталоге будет хотя бы один файл, то функция rmdir() не сработает . Вот как решить эту проблему Вы узнаете в следующей статье, поэтому подписывайтесь на обновления, чтобы не пропустить её появление.
Этот материал посвящён анимации на HTML страницах, о производительности анимации, перспективности использования, а так же анимации в HTML5 мобильных приложениях и играх.
Javascript анимация
Первым делом начнём с рассмотрения JS анимации на HTML странице. Анимация на яваскрипте может проводиться либо с setInterval, с помощью которой можно задать статично кадры в секунду, либо с помощью обычной функции которая в конце вызывает саму себя ну или с window.requestAnimationFrame.
Вот простейшая логика работы анимации в JS:
var el=document.getElementById("elem");
mar=10; //статичные начальные данные
//цикл начинается
mar=mar+1;
el.style.marginLeft=mar+"px";
//цикл заканчивается
Прелесть JS в том что можно удобным способом расширить нативный инструментарий и использовать например анимацию на jQuery или использовать Velocity . Это существенно ускоряет производительность. Однако в частности Velocity использует JS не совсем для анимации, так ака само анимирование производиться там в CSS о котором речь пойдёт ниже.
SVG анимация
Нельзя не упомянуть о SVG анимации. Сама она очень хороша, но в мобильных браузерах она не работает. Вернее работает только SMIL на Андроид 3.0-выше. Как бы неприятно было это говорить сам SVG работает в методе WebView, но всё что связано с анимацией в этом тэге увы...
Везде где она работает - она показывает хорошую производительность. Убедитесь сами.
Отличительной особенностью является то что внутри SVG нет пикселей, а есть некие абстрактные величины. После того как вы укажите высоту и ширину svg элемента, вы можете указать аттрибут viewbox, с помощью которого вы можете настроить положение внутренних элементов и их относительную величину. SVG можно сделать любой длинны и ширины и он подстроит внутренние объекты под с вой размер с viewbox.
Canvas анимация
Этот вид анимации очень распространён в браузерах обычных компьютеров в частности при создании игр. Минусами являются:
1. Отсутствие идентификации DOM у элементов.
2. Чем выше разрешение-тем меньще производительность.
В мобильных браузерах canvas анимация работает негладко.
CSS Анимация
Давайте рассмотрим анимацию с помощью CSS3. Как известно в CSS3 к нам пришло удивительное свойство animation с помощью которого можно полноценно делать анимацию тех или иных объектов.
Как это происходит? Например мы хотим передвинуть элемент #obj в право на 300 пикселей и вернуть обратно, при чём зациклив анимацию до бесконечности. С CSS3 это стало очень легко исполнимой операцией.
Объекту присваеваем помимо стандартных ширины и высоты, свойства:
Webkit-animation: 3s moving linear infinite;
animation: 3s moving linear infinite;
Для большей кроссбраузерности мы задали объекту два свойства, в которых 3s - з секунды на выполнение всей анимации, moving - название анимации, которая применяется к объекту(Ниже-подробнее), linear - флаг, который заставляет двигаться объект с одинаковой скоростью на всех участках, infinite - флаг делающий анимацию бесконечной.
Что ж, теперь коснёмся самой анимации moving. Её нужно будет прописать в том же CSS файле где вы её применяете. Раньше да и сейчас некоторые используют для передвижения объекта по экрану параметры left/right/top/bottom или margin. На самом деле это весьма плохая практика и делать так не стоит, так как это несколько неоптимизированный способ - можно обеспечить более плавное движение другими CSS3 свойствами Этими свойствами являются translatex и translatey.
/*Плохая анимация*/
@-webkit-keyframes moving {
from {margin-left: 0;}
50% {margin-left: 300px;}
to {margin-left: 0;}
}
/*Хорошая анимация*/
@-webkit-keyframes moving {
from {transform: translatex(0);}
50% {transform: translatex(300px);}
to {transform: translatex(0);}
}
Так же следует отметить что transition в таких событиях как hover ведёт себя также очень достойно и на мобильных устройствах. Ну а вообще тот же самый transition или CSS3 animation вы можете повесить на любой элемент с помощью JS. В таком случае вы получите лучший вариант (JS указывает что анимировать, CSS анимирует).
Раз такое дело, то при создании игр обычно используют фреймворки и пр интсрументарий облегчающий разработку. Одним и таких является Sencha Animator , позволяющий на CSS делать разные штуки и имеющий удобный интерфейс.
Что лучше и быстрее CSS анимация или JS анимация?
Для начала можно немного углубиться в вычислительную часть чтобы немного прояснить ситуацию. Javascript является интерпретированным языком и чтобы его выполнять JS движку браузера прихродиться постоянно парсить инструкцию (код) во время выполнения и далее конвертировать её в уже понятный для машины код. С CSS несколько другая ситуация. Дело в том что он сразу компилируется в машинный язык и тем самым показывает лучшую производительность в анимации.
CSS анимация дефолтно на порядок производительнее Javascript"овой, однако существуют некоторые ньюансы когда использование JS даёт болльшее преимущество в производительности.
Как было сказано в последних предложениях о CSS анимации - лучше использовать CSS для обработки анимации, а JS для того чтобы указывать что обрабатывать (просто повесив например на элемент class с нужными прописанными анимациями).
Это был вопрос производительности, следующий вопрос - уместность. Несмотря на все казалось бы выигрышные стороны CSS, возникают ситуации что лучше использовать JS. Такое бывает.
Оптимизация производительности анимации
Если вы делаете HTML 5 приложение на Android, можно попробовать сделать следующее:
В параметры вашего активити допишите android:hardwareAccelerated="true"
Это даст акселерацию на железе, GPU при включённой опции усиленно ворвётся в работу и наряду с CPU будут полностью заняты обработкой вашего приложения. Из минусов только то, что батарейка кушаться будет слегка повеселее.
Так же не используйте событие onclick (хоть оно и работает на тачскрине). Дело в том что это событие делает задержку примерно в треть секунды и чтобы этого не было лучше используйте ontouchstart и ontouchend.
Обязательно дополняйте и пишите в комментарии то чего в статье не было упомянуто. Вместе мы сделаем качественный материал на русском.
С появлением 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.
Под термином «анимация» мы чаще всего понимаем мультипликационные фильмы - с детства любимые нами «мультики». Но если заглянуть в толковый словарь, то мы узнаем, что в переводе с французского оно означает «оживление», «одушевление». И вот тут-то оказывается, что это значение удивительно точно подходит не только к киноиндустрии, но и к веб-технологиям.
Использование различных анимационных эффектов (переходов, движений, трансформаций и т.п.) значительно «оживляют» веб-сайт, позволяют управлять вниманием пользователя, переключая его на требуемый элемент и давая определенные визуальные подсказки.
Говоря об анимации нельзя не упомянуть известные 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.js
Dom-Animator.js - это так называемое «пасхальное яйцо» (easter egg). Производимый ею эффект не виден «невооруженным» глазом, т.е. тем кто просматривает страницу в обычном окне браузера. Но те, кто будет разбирать ваш код, увидят ее в консоли (если вы все еще не поняли о чем речь, то здесь есть видеоролик, из которого все станет понятно).
Famous
Famous - событийно-ориентированная JS-библиотека для создания современной анимации . Имеет мощное геометрическое ядро, позволяющее манипулировать различными 3D объектами - точечными и объемными - прикладывать к ним силы и ускорения, накладывать ограничения и контролировать соударения.
Bounce.js
Неплохая JavaScript библиотека для создания впечатляющей анимации с использованием CSS. Позволяет применять к объектам различные виды движения, вращения, масштабирования и преобразования.
Snabbt.js
Легкая и быстрая библиотека, выдающая, по заверениям разработчиков, 60 fps даже на мобильных устройствах. При помощи матриц трансформирования CSS позволяет перемещать, вращать, масштабировать и производить другие манипуляции с объектами. Позволяет также применять к объектам специальные эффекты, привлекающие внимание, которые можно использовать при заполнении форм.
Rekapi
Rekapi позволяет использовать как CSS анимацию ключевых кадров (правило @keyframes), так и DOM анимацию при помощи JavaScript. Эта библиотека позволяет создавать довольно сложные динамические объекты, например круговые и линейные диаграммы, временные шкалы и другие элементы пользовательского интерфейса.
Shifty
Shifty - библиотека, содержащая все необходимое для полноценной анимации по ключевым кадрам (так называемый «твиннинг»), причем количество объектов может быть просто огромным. Это низкоуровневая библиотека, которую можно использовать как ядро для более высокоуровневых платформ или библиотек. Собственно, в качестве ядра вышеупомянутой Rekapi, используется как раз Shifty.
