GreenSock Animation Platform (GSAP)

Автор: Андрей Косяк Дата публикации: 29.10.2012

GSAP — это анимационная платформа, созданная в свое время для Action Script, теперь портирована и на JS.

Умеет анимировать свойства абсолютно любых объектов, удобный в использовании, легкий в весе и, что самое главное, очень шустрый. Тест скорости работы..

Так же нужно отметить кроссбраузерность ( работает во всех браузерах начиная от ИЕ6 ), абсолютную независимость от других фреймворков, возможность организации и управления timeline - компоновка анимаций в единное целое на усмотрение разработчика, небольшой вес ( к примеру, версия TweenLite.min весит на сегодняшний день 21kb ), удобный и интуитивно понятный API, отличная документация, подключаемые плагины ( изинг, кривые бизье, плагин для работы с Raphael, плагин cssRules ), а так же понятный и доступный туториал.

Небольшой промо-пример.

Проверено в:

  • IE 6-9
  • Chrome
  • Firefox
  • Opera
  • Safari

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

Подключаем библиотеку:

<script type="text/javascript" src="js/TweenLite.min.js"></script>

Подопытный элемент:

<img id="test" src="pic/img.jpg" width="250" height="320">

Простейший твин имеет такой вид:

TweenLite.to( element:object, time:int, params:object )

Где element – объект для манипуляций, time – длительность анимации, params – анимируемые параметры и установки.

По умолчанию GSAP оперирует с числовыми свойствами объектов. Попробуем изменить размеры изображения:

window.onload = function(){
    var element = document.getElementById( 'test' );
    TweenLite.to( element, 2, { width: 500 } );
}
Результат.

CSS анимация

Для анимации css-свойств, дополнительно подключаем CSSPlugin и EaselPlugin для easing-еффекта:

<script type="text/javascript" src="js/CSSPlugin.min.js"></script>
<script type="text/javascript" src="js/EaselPlugin.min.js"></script>

Теперь можем анимировать любой числовое css-свойство, подвинем картинку:

window.onload = function(){
    var element = document.getElementById( 'test' );
    TweenLite.to( element, 2, { css: { left: window.innerWidth * .5 - 125 }, ease: Power2.easeOut } );
}
Результат.

А можно тоже самое сделать так:

window.onload = function(){
    var element = document.getElementById( 'test' );
    TweenLite.to( element, 2, { css: { x: window.innerWidth * .5 - 125 }, ease: Power2.easeOut } );
}
Результат.

Разница в том, что в первом случае изменяется свойство left элемента, а во втором для перемещения применяется CSS3 транcформация.

Вот еще пример трансформаций:

window.onload = function(){
    var element = document.getElementById( 'test' );
    TweenLite.to( text, 2, { css: { skewX: 400, scaleX: .5, scaleY: .5, rotation: '180deg', transformOrigin: 'right center' }, ease: Power1.easeInOut } );
}
Результат.

Сложность анимации ограничена фантазией и креативностью разработчика.

GSAP и canvas

Анимация на канве при помощи GSAP не особо отличается от вышеописанных примеров:

window.onload = function(){
    var canvas = document.getElementById( 'canvas' ),
        ctx = canvas.getContext( '2d' ),
        // это объект, параметры которого будут изменяться
        square = {
            width: 100,
            height: 100,
            top: 100,
            left: 100
        };

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    ctx.fillStyle = '#ff0000';

    // функция отрисовки в канву
    function draw(){
        ctx.clearRect( 0, 0, canvas.width, canvas.height );
        ctx.save();
        // отрисовываем квадрат по параметрам из анимируемого объекта
        ctx.translate( square.left - square.width * .5, square.top - square.height * .5 );
        ctx.fillRect( 0, 0, square.width, square.height );
       ctx.restore();				
    };
    
    // начинаем анимировать объект
    TweenLite.to( square, 5, { left: canvas.width * .5, top: canvas.height * .5, width: 200, height: 200, onUpdate: draw } );

}
Результат.

Timeline

Ну и как же без него? Таймлайн позволяет объединить анимации в одно целое, и манипулировать им. Простыми словами выполняем монтаж фильма, а затем проигрываем его:

window.onload = function(){
	
    var canvas = document.getElementById( 'canvas' ),
    playBtn = document.getElementById( 'play' ),
    reverseBtn = document.getElementById( 'reverse' ),
    pauseBtn = document.getElementById( 'pause' ),
    ctx = canvas.getContext( '2d' ),
    // красный квадрат
    square = {
        width: 100,
        height: 100,
        top: 100,
        left: 100
    },
    // черный квадрат
    square2 = {
        width: 100,
        height: 100,
        top: 250,
        left: 100
    },
    // создаем timeline объект и ставим его на паузу
    timeline = new TimelineLite( { paused: true } );

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;


    function draw(){
        
        ctx.clearRect( 0, 0, canvas.width, canvas.height );

        // отрисовка красного квадрата
        ctx.fillStyle = '#ff0000';
        ctx.save();
        ctx.translate( square.left - square.width * .5, square.top - square.height * .5 );
        ctx.fillRect( 0, 0, square.width, square.height );
        ctx.restore();				

        // отрисовка черного квадрата
        ctx.fillStyle = '#000000';
        ctx.save();
        ctx.translate( square2.left - square2.width * .5, square2.top - square2.height * .5 );
        ctx.fillRect( 0, 0, square2.width, square2.height );
        ctx.restore();				

    };
    draw();
    
    // вставляем анимацию красного квадрата в начало timeline
    timeline.insert( TweenLite.to( square, 5, { left: canvas.width * .5, top: canvas.height * .5, width: 200, height: 200, onUpdate: draw } ) );
    // вставляем анимацию черного квадрата со сдвигом во времени равному 1 секунде, относительно начала timeline
    timeline.insert( TweenLite.to( square2, 5, { left: canvas.width * .5, top: canvas.height * .5, width: 200, height: 200, onUpdate: draw } ), 1 ); // последний параметр – сдвиг по таймлайну

    // обработчики для кнопок
    playBtn.onclick = function(){
        timeline.play();
    };

    pauseBtn.onclick = function(){
        timeline.pause();
    };

    reverseBtn.onclick = function(){
        timeline.reverse();
    };
	
}
Результат.

В примерах использована версия TweenLite, есть еще версия TweenMax, в нее уже вшиты некоторые плагины ( например CSSPlugin и EaselPlugin ), а так же несколько расширен функционал – доступны такие фишки как yo-yo ( анимация вперед и обратно ), timeScale(), repeat() и т.п

Все это малая доля того что умеет платформа. Кроме описанных плагинов на сегодняшний день еще существует плагины для работы с цветом, кривыми Бизье, библиотекой Raphael, css-правилами, плагин для округления просчитываемых параметров, scrollTo – аналог плагина для jQuery, а так же довольно обширное API для timeline. Помимо этого обладает еще массой свойств, параметров и настроек ( наприемр callback-функции ). Все это отлично описано в API

В версиях для AS есть еще очень много плюшек.. ну что ж, ждем портации этих плюшек на JS :)

Материалы