<img class="alignnone wp-image-9031" src="//s3.tproger.ru/uploads/2015/10/gsap_logo.jpg" alt="gsap_logo" width="383" height="243" />
GreenSock Animation Platform или GSAP — это, пожалуй, одна из самых функциональных javascript-библиотек для анимирования. Как говорят её создатели, это «новый стандарт для HTML5 анимации». Она имеет низкий порог вхождения, подробную документацию, высокую производительность, гибкость и совместимость со старыми браузерами. Важным преимуществом GSAP является также то, что библиотека умеет «анимировать» не только CSS или Canvas, но и любую числовую переменную любого javascript-объекта.
Пример кода на GSAP:
// увеличивает высоту и ширину картинки (html элемента)
TweenLite.fromTo(photo, 1.5, {width:0, height:0}, {width:100, height:200};
С другой стороны, GSAP является относительно тяжелой, поэтому для создания небольшой анимации HTML элементов (исчезание, появление, переворот и т.д.) лучше воспользоваться более легковесными аналогами.
Tween.js
<img class="alignnone size-full wp-image-9027" src="//s3.tproger.ru/uploads/2015/10/Снимок-экрана-2406.png" alt="Снимок экрана (2406)" width="467" height="159" srcset="https://s3.tproger.ru/uploads/2015/10/Снимок-экрана-2406.png 467w, https://s3.tproger.ru/uploads/2015/10/Снимок-экрана-2406-300x102.png 300w" sizes="(max-width: 467px) 100vw, 467px" />
Tween.js является дополнением к easel.js — одному из самых популярных javascript-фреймворков для удобной и легкой работы с canvas. Тем не менее, tween не имеет никаких зависимостей и может использоваться как вместе, так и отдельно от easel.
Веб-разработчик (Junior, PHP/JS)
«НаПоправку.ру», Санкт-Петербург, от 35 000 до 70 000 ₽
tproger.ru
Вакансии на tproger.ru
Как вы, наверное, уже догадались, основная задача библиотеки tween.js — это анимация в Canvas. И она отлично с ней справляется, делая за вас и упрощая многие вещи. Вот, например, код, который «гоняет» по экрану круг, меняя при этом его прозрачность:
createjs.Tween.get(circle, { loop: true })
.to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
.to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
.to({ alpha: 0, y: 225 }, 100)
.to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
.to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));
<img class=" wp-image-9022 aligncenter" src="//s3.tproger.ru/uploads/2015/10/file4_1.gif" alt="file4_1" width="649" height="234" />
Но при этом для анимации HTML элементов tween.js совершенно не подходит — с этим справляются следующие два инструмента.
Move.js
Move.js — javascript-библиотека, позволяющая делать всё то же, что и tween.js, только с использованием CSS3 и HTML5 вместо Canvas. Она является не самой легкой (как для JS), но одной из самых популярных. Набор заранее заготовленных видов анимации (поворот, наклон, ротация и тд.) делает её также одной из самых легких в использовании.
Пример кода c использованием Move.js:
move('#example-4.box')
.rotate(140)
.end();
<img class="alignnone size-full wp-image-9021" src="//s3.tproger.ru/uploads/2015/10/rect1_1.gif" alt="rect1_1" width="120" height="107" />
Ознакомиться с демонстрацией работы и документацией можно на этой странице.
WOW.js + Animate.css
<img class="alignnone wp-image-9048" src="//s3.tproger.ru/uploads/2015/10/wow-logo.jpg" alt="wow-logo" width="428" height="141" />
На самом деле это не настоящие библиотеки или фреймворки для анимации, по крайней мере в привычном понимании.
Animate.css — всего лишь CSS файл, в котором собраны несколько десятков правил, связанных с анимаций, а WOW.js — всего лишь маленький скрипт, запускающий эти анимации по мере прокрутки страницы.
Тем не менее, вместе эти два скрипта являются, пожалуй, лучшим способом заставить HTML элементы двигаться, или, говоря другими словами, анимировать их.
Во-первых, решает легковесность. Всего 2 КБ и никаких зависимостей!
Во-вторых, wow.js и animate.css являются крайне простыми в использовании. Скорее всего, вам не придется написать ни строчки лишнего JS кода. Достаточно подключить эти два скрипта к странице и добавить к элементу, который нужно анимировать, пару css классов: класс wow и класс нужной нам анимации.
Пример:
<img class=”wow rotateIn” src=”dog.jpg” alt=””>
Теперь при загрузке страницы вместо статического отображения этот элемент будет красиво крутиться:
<img class="alignnone size-full wp-image-9045" src="//s3.tproger.ru/uploads/2015/10/dog3.gif" alt="dog" width="229" height="222" />
Для настройки анимации используются специальные data-атрибуты, например, data-wow-duration=”2s” задаст продолжительность кручения в 2 секунды.
Демо, более подробную документацию и полный список data-атрибутов можно найти на официальном сайте WOW.js, полный список классов анимации — на официальном сайте Animate.js.