Greensock v12 анимация на JS

Тема в разделе "JavaScript", создана пользователем warez4to, 22 май 2012.

Модераторы: ZiX
  1. warez4to

    warez4to Создатель

    Регистр.:
    22 ноя 2008
    Сообщения:
    42
    Симпатии:
    20
    [​IMG]
    На этой неделезарелизили Greensock 12, анимация на js и при этом всего 7kb.
    http://www.greensock.com/v12/

    Greensock платформа оригинально заточенная под AS2 и AS3; несколько примеров использования фреймворка:
    http://www.motorola.com/Consumers/US-EN/Home
    http://www.dow.com/hu/
    http://www.virginmobileusa.com/


    Теперь же функционал api доступен для JavaScript, разработчики позиционируют Greensock как быстрый и оптимизированный продукт. http://www.greensock.com/js/speed.html


    Основные фишки:

    — широкий функционал (easing типа yo-yo с настраиваемыми кривыми — это ещё цветочки. У GSAP есть, например, физический 2D-движок. Или возможность трансформировать объект вокруг заданной точки. Которую тоже можно анимировать)
    — совместимость от IE6 и выше
    — независимость от других плагинов (и при этом отличная совместимость с jQuery в качестве селектора)
    — практически единый синтаксис для JS, AS2 и AS3
    — вес 7Kb (речь идёт о TweenLite, для маньяков есть и TweenNano, но пока только для Flash)
    — работа с таймлайном — анимации соединяются в цепочки или составляются в любом другом порядке; закончившиеся анимации запускают друг друга или сторонние функции; таймлайны можно ускорять и замедлять, ставить на паузу, проигрывать в обратном направлении.
    — анимировать можно фактически любое свойство любого объекта
    — мощные настройки управления конфликтующими анимациями (например, одновременно запускаются «подвинуть влево» и «подвинуть вправо», а через секунду — опять «подвинуть влево, но с другой скоростью» — что должен делать движок?)
    — полная документация с примерами и песочницей
    — поддержка
    — бесплатно (кроме использования в продуктах, предназначенных для многоразовой коммерческой продажи)


    Интересно если кто-то исползовал greensock в разработке на AS2/AS3?
     
  2. Leony

    Leony

    Регистр.:
    18 мар 2008
    Сообщения:
    153
    Симпатии:
    25
    Я активно использовал для создания баннеров.
    платные классы выцеплял из кэшей гугля.

    Есть ньюансы: TimelineLite & TimelineMax не могут оперировать пользовательскими функциями – только своими TweenLite/TweenMax
    они их могут только вызывать по событиям Start/Complete

    addChild тоже должны быть определены вне команд TimelineLite/TimelineMax
    т.е. изначально добавляем их либо видимыми вне сцены,
    либо невидимыми (alpha=0) на сцене

    когда объект не двигается – это не должно учитываться в Timeline –
    в Timeline должна учитываться только его трансформация.

    Короче стучитесь – подскажу, что знаю.
     
  3. Leony

    Leony

    Регистр.:
    18 мар 2008
    Сообщения:
    153
    Симпатии:
    25
    Чё-то никому этот класс не интересен.
    Мне лично никогда не было интересно тупо рисовать человечков на таймлайне.

    Подитожу эффекты, может, кто заинтересуется:
    autoAlpha
    blurFilter
    glowFilter
    dropShadowFilter
    bevelFilter
    motionBlur
    bezier
    colorTransform
    setSize
    rotation
    Circle2DPlugin
    physics2D (частицы)
    updateTo изменение св-в
    colorMatrixFilter (цвет, контраст, яркость, насыщенность, hue, threshold (контрастный ч/б постер))
    tint/removeTint
    применение св-в к множеству .appendMultiple
    roundProps (округляет цифры, напр., координаты X/Y)
    замедление/ускорение движения .timescale
    transformAroundCenter (scale, rotation)
    transformMatrix(skewX/skewY)
     
  4. zsaz

    zsaz

    Регистр.:
    6 авг 2007
    Сообщения:
    251
    Симпатии:
    11
    А есть примеры на русском? А то что-то только все на буржуйском, где ничего не понятно. А то нужно сделать анимацию текста, а не могу понять как это сделать с помощью данной библиотеки.
     
  5. Leony

    Leony

    Регистр.:
    18 мар 2008
    Сообщения:
    153
    Симпатии:
    25
    На форуме куча примеров, но на английском.
    Сначала импортишь нужные классы

    определяешь переменные, и создаёшь экземпляр:

    Затем на сцену добавляешь экземпляр того объекта, который уже есть у тебя в либе:

    В нужном нам объекте можем сделать чистый кадр – для зачистки от него сцены по надобности

    Эту функцию можем вызвать так:
     
    Alex755 нравится это.
  6. Leony

    Leony

    Регистр.:
    18 мар 2008
    Сообщения:
    153
    Симпатии:
    25
    > есть у кого-то гринсоковские коммерческие плагины на JS? Хотелось бы найти рабочий ThrowPropsPlugin.js
    Здесь
     
  7. Sei4

    Sei4 Писатель

    Регистр.:
    28 ноя 2007
    Сообщения:
    7
    Симпатии:
    1
    Leony, спасибо, но там плаги старенькие... ThrowPropsPlugin.js версии 0.5.0 и там нет поддержки инерционного скролла аля iOS, который есть в 0.9.0 и выше.
    Может есть где-то поновее? Заранее спасибо.