Greensock: анимация на JavaScript

Недавно я писал, что Greensock, прекрасная библиотека для скриптовой анимации на Flash, теперь поддерживает и JavaScript ^[1]. В этой статье я продемонстрирую основы работы с GSAP v12 (beta). Результат будет примерно таким:

Сразу оговорюсь, что графику и идею для примера я взял из документации $fx() ^[2], ведь кто из нас откажется проанимировать НЛО? :)

Скрипты

Сначала подключим необходимые скрипты:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/TweenMax.min.js"></script>
<script type="text/javascript" src="js/TimelineMax.min.js"></script>
<script type="text/javascript" src="js/easing/EasePack.min.js"></script>
<script type="text/javascript" src="js/plugins/CSSPlugin.min.js"></script>

Зачем столько?

• JQuery нам нужен для того, чтобы выбирать элементы. Можно, конечно, и без него.
• TweenMax (60 Kb) — это основная библиотека анимации. Есть ещё TweenLite (21 Kb), включающий только базовые возможности.
• TimelineMax (16 Kb) — это основаная библиотека таймлайна. TimelineLite весит 9 Kb.
• EasePack (5 Kb) — это набор эффектов анимации, контролирующих её характер, например, плавное замедление или «эластичное» подрагивание.
• CSSPlugin (14 Kb) — позволяет анимировать CSS-свойства HTML-объектов, как по одному, так и целыми пачками классами.

Анимация

Можем начинать анимировать. Базовый синтаксис такой:

• TweenMax.from(объект, длительность, значение) — от заданного значения к текущему
• TweenMax.to(объект, длительность, значение) — от текущего значения к заданному
• TweenMax.fromTo(объект, длительность, значение1, значение2) — от заданного значения к заданному (чтобы точно не ошибиться :)

В качестве объекта может выступать любой DOM-элемент. Самый простой способ — получить его через селектор JQuery. Время указывается в секундах. Значение указывается как объект, например {value: 500} или {width: 300px}. Удобная фишка: если взять значение в кавычки, изменение будет относительным, а не абсолютным. Наглядно:

TweenMax.to( $('#sample'), 1, {value: 300} ); // за 2 секунды значение станет равно 300 единицам
TweenMax.to( $('#sample'), 1, {value: '300'} ); // за 2 секунды значение увеличится на 300 единиц

Сравнить оба варианта в демо 1 ^[3]

Анимация CSS-свойств происходит чуть сложнее (главное — не запутаться в фигурных скобках):

TweenMax.to( $('#bg1'), 2, {css: {background-position: '-300px'}} );

Можно указывать свойства по одному, а можно указать целый класс. Тогда GSAP сравнит оба класса (текущий и заданный), найдет отличающиеся свойства и проанимирует их все. Как обычно, цена удобства — скорость выполнения.

Дополнительно можно указать количество повторений анимации (-1 означает бесконечный повтор):

TweenMax.to($('#bg1'), 2, {css: {background-position: '-300px'}}, repeat: -1)

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

TweenMax.to($('#ufo'), 2, {width: 300px}, ease: Linear.easeNone)

Воспользуемся полученными знаниями и сделаем бесконечно анимированный фон с блекджеком и параллаксом:

TweenMax.to($('#bg1'), 9, {css:{backgroundPosition: "-314 0px"}, repeat:-1, ease:Linear.easeNone});
TweenMax.to($('#bg2'), 18, {css:{backgroundPosition: "-269 30px"}, repeat:-1, ease:Linear.easeNone});

Посмотреть демо 2 ^[4]

Спрайты

С помощью спрайтовой анимации включим габаритные огни на НЛО. Наш спрайт состоит из 4 кадров:

Специально для этой цели был придуман SteppedEase, анимирующий не плавно, а наоборот — рывками. Задав количество рывков, равное количеству кадров, мы получим красивую анимацию:

TweenMax.to($('#ufo'), 0.2, {css:{backgroundPosition :"340 0px"}, ease:SteppedEase.config(4), repeat:-1});

Посмотреть демо 3 ^[5]

Таймлайн

О том, как соединять анимации в цепочки и управлять полученными последовательностями, я, пожалуй, расскажу во второй части статьи, а пока что попытаюсь ответить на вопросы присутствующих.

* Все примеры кода подсвечены с помощью Source Code Highlighter ^[6].

Автор: ssneg