Sumanai:и ужаснулся от количества совершенно не нужных анимаций
на сегодня есть масса нужной анимации. Почти все представлено в бустрапе:
Modal, Dropdown, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel. Если не считать индивидуальные потребности ресурсов, еще нужен
лайтбокс. Основная задача этих драйверов, использующих анимацию - расширение UI. UI мобильный устройств расширяет
свайп (листаем страниц/картинки/карусель). Из модных эффектов уже почти стандарт - параллакс.
если все собирать по-быстрому, то можно использовать готовые драйверы. в принципе ничего такого - подключили, настроили и наслаждаемся. в принципе, такие "кучи" можно встретить на очень многих ресурсах. проблемы - получить не "кучу", а правильную работу. понятие "правильно" требует небольшого пояснения:
наличие большого количества анимации предполагает дополнительную нагрузку на устройства в виде ресурсов на загрузку скриптов, компиляцию скриптов, динамическую работу с DOM и саму анимацию. Самыми ресурсоемкими для мобильных устройств будут операции загрузки и анимации. Если возможности позволяют уделить внимание этим вопросам, то становится очевидным, что готовые драйверы не подходят. Почему:
готовые драйверы очень часто используют не прогрессивные методы. Для примера можно разобрать очень популярную карусель
Слик. Для прокрутки слайдов используется блок, шириной в тысячи пикселей. Да и сама анимация оставляет желать лучшего. Неплохая нагрузка на мобильный браузер... Карусель Bootsrap уже более прогрессивная. Вывод слайдов организован схожим методом, описанным тут:
http://habrahabr.ru/company/mailru/blog/165213/Добавив свайп к Карусели от Бутсрап через соответствующий драйвер жестов, например, hammer.js - получаем довольно качественное решение, хотя еще несколько ограниченное по возможностям. Анимацию выводить через быстрый и гибкий
velocity.js. Разобравшись с каруселью, легко понять, что тот же phоtoswipe имеет собственный драйверы свайпа и анимации. Выпиливаем их, заменив на уже имеющиеся hammer.js и velocity.js. И так со всем остальным...
В итоге получаем качественное решение со всеми улучшайзерами, в котором максимум функционала получаем с минимальной ресурсосемкостью для пользователей (анимация с velocity более легкая, чем нативная CSS3; за счет выпиливания повторяющегося функционала сокращается объем кода => загрузка, исполнение).
Вот как то так накипело)