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

warez4to

Создатель
Регистрация
22 Ноя 2008
Сообщения
43
Реакции
20
logo.png
На этой неделезарелизили Greensock 12, анимация на js и при этом всего 7kb.
Для просмотра ссылки Войди или Зарегистрируйся

Greensock платформа оригинально заточенная под AS2 и AS3; несколько примеров использования фреймворка:
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся


Теперь же функционал api доступен для JavaScript, разработчики позиционируют Greensock как быстрый и оптимизированный продукт. Для просмотра ссылки Войди или Зарегистрируйся


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

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


Интересно если кто-то исползовал greensock в разработке на AS2/AS3?
 
Я активно использовал для создания баннеров.
платные классы выцеплял из кэшей гугля.

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

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

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

Короче стучитесь – подскажу, что знаю.
 
Чё-то никому этот класс не интересен.
Мне лично никогда не было интересно тупо рисовать человечков на таймлайне.

Подитожу эффекты, может, кто заинтересуется:
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)
 
А есть примеры на русском? А то что-то только все на буржуйском, где ничего не понятно. А то нужно сделать анимацию текста, а не могу понять как это сделать с помощью данной библиотеки.
 
На Для просмотра ссылки Войди или Зарегистрируйся куча примеров, но на английском.
Сначала импортишь нужные классы

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

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

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

Эту функцию можем вызвать так:
 
> есть у кого-то гринсоковские коммерческие плагины на JS? Хотелось бы найти рабочий ThrowPropsPlugin.js
Для просмотра ссылки Войди или Зарегистрируйся
 
Leony, спасибо, но там плаги старенькие... ThrowPropsPlugin.js версии 0.5.0 и там нет поддержки инерционного скролла аля iOS, который есть в 0.9.0 и выше.
Может есть где-то поновее? Заранее спасибо.
 
Назад
Сверху