Velocity.js – новый аннимационный плагин javascript

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

Совместимость

Velocity работает и в Internet Explorer 8 и в Android 2.3. Velocity использует функцию $.queue() из jQuery, и таким образом легко взаимодействует с функциями jQuery – $.animate(), $.fade(), и $.delay(). Поскольку синтаксис Velocity похож с $.animate(), то ни один участок вашего когда не нуждается в изменении.

Быстрый старт

Скачайте Velocity и подключите ее к вашей странице и замените все $.animate() на $.velocity(). И вы сразу заметите прирост скорости во всех браузерах и на всех устройствах – особенно на смартфоне.

Особенности

8кб кода включает в себя все возможности $.animate() – анимация, трансформация, увеличение, вращение, прокрутка. Velocity лучше, чем jQuery, Query UI, и CSS переходов.

Почему так?

Javascript и jQuery ложно объединены. Javascript анимация, которую использует Velocity, быстрее, а анимация в jQuery – очень медленная. Хотя Velocity – это jQuery плагин, он использует свой стек, который обеспечивает его работу благодаря двум основным принципам: 1) синхронизации DOM; 2) кеширование значений, чтобы свести к минимуму запросы к DOM

Демо

10 минутное видео как сделать 3D демонстрашку.

Также можно посмотреть данную демо на http://jsfiddle.net/x404/EjXFY/.

Также можете почитать дополнительную информацию про производительность Velocity.

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

Преимущества velocity анимации

Нет задержки между переключением в режим анимации и ее началом;
Нет пропусков кадров при старте анимации или при пересечении параллельных анимаций;
Высокая частота кадров;
Сложные анимации обрабатываются корректно без подтормаживаний.

Советы по повышению производительности

Никогда при верстке сайтов не используйте функции $.animate() и $.fade() – они очень медленные. Используйте встроенные решения Velocity вместо своих собственных или аналогов на jQuery: приближение, реверсирование, задержки, скрытие/показ элементов, математические операции (+, -, /, *) и аппаратное ускорение – все это может быть сделано на jQuery.

Источник – http://julian.com/research/velocity/. Также тут можно посмотреть различные демо примеров с исходными кодами.