tweenmax js что это
Потрясающая анимация на лендинг с помощью плагина TweenMax
Как можно удержать человека на лендинге? Цепляющим заголовком? Но ведь они есть на многих сайтах. А если Вы не копирайтер, тогда что делать? Есть очень креативное решение — создать анимацию на лендинге, которая будет находится прямо в шапке. Я сейчас говорю не о Flash анимации, фоновом видео или GIF-ке. Речь идет о красиво появляющихся и исчезающих элементах страницы, то есть HTML-элементах.
Также рекомендую изучить другие статьи на тему анимации на лендинге:
Анимацию смотрите по ссылке ниже:
Посмотреть примерСкачать
В данном уроке Вы можете взять только шапку для своего лендинга и переделать ее под себя. А чтобы научиться создавать полноценный лендинг, советую изучить мой небольшой мини-курс: «Лендинг за 60 минут».
Как создавалась анимация? (ЭТАПЫ)
Я думаю они не будут для Вас сюрпризом, потому что в другом порядке будет сложновато создать полноценную анимацию. Итак, всего у меня получилось 6 этапов:
Практическая реализация
1 этап. Идея
Идея пришла после просмотра вводных роликов для видео. Они смотряться очень красиво и не раздражают, если анимация происходит плавно, без резких движений.
Я подумал почему бы что-нибудь похожее не сделать для одностраничного сайта. Ведь когда человек только попадает на страницу, он сразу будет видеть красивую анимацию и захочет досмотреть ее до конца. А если в процессе анимации еще встроить правильно маркетинговые фишки, то таких образом получится уменьшить показатель отказов.
2 этап. HTML структура
Первым этапом, как я писал выше, необходимо разместить все действующие элементы на странице:
3 этап. Начальный внешний вид
Идем дальше и задаем все необходимые стили для всех элементов. То есть сразу указываем им конечное состояние, в котором они будут находится:
Весь код, который я привел, без префиксов других браузеров. В исходных файлах CSS стили будут значительно больше по объему.
4 этап. CSS анимация
Далее необходимо написать анимацию для блоков «Рука», которые появляются в конце. Данный код я также привожу без посторонних префиксов, чтобы он не занимал 3 экрана:
Как Вы могли заметить, анимация очень похожа для разных блоков.
Если у Вас возникли проблемы и Вы не можете разобраться с анимацией, тогда рекомендую изучить данную статью — CSS3 анимация для начинающих.
Greensock: анимация на JavaScript
Недавно я писал, что Greensock, прекрасная библиотека для скриптовой анимации на Flash, теперь поддерживает и JavaScript. В этой статье я продемонстрирую основы работы с GSAP v12 (beta). Результат будет примерно таким: 
Скрипты
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 >
Анимация
В качестве объекта может выступать любой DOM-элемент. Самый простой способ — получить его через селектор JQuery. Время указывается в секундах. Значение указывается как объект, например
Анимация CSS-свойств происходит чуть сложнее (главное — не запутаться в фигурных скобках):
Можно указывать свойства по одному, а можно указать целый класс. Тогда GSAP сравнит оба класса (текущий и заданный), найдет отличающиеся свойства и проанимирует их все. Как обычно, цена удобства — скорость выполнения.
Дополнительно можно указать количество повторений анимации (-1 означает бесконечный повтор):
По умолчанию, все анимации происходят с красивым замедлением в конце. Если требуется другой эффект (или никакого), это нужно указать явным образом:
Воспользуемся полученными знаниями и сделаем бесконечно анимированный фон с блекджеком и параллаксом:
Спрайты
С помощью спрайтовой анимации включим габаритные огни на НЛО. Наш спрайт состоит из 4 кадров:
Специально для этой цели был придуман SteppedEase, анимирующий не плавно, а наоборот — рывками. Задав количество рывков, равное количеству кадров, мы получим красивую анимацию:
Таймлайн
О том, как соединять анимации в цепочки и управлять полученными последовательностями, я, пожалуй, расскажу во второй части статьи, а пока что попытаюсь ответить на вопросы присутствующих.
TweenMax
Like TweenLite, a TweenMax instance handles tweening one or more properties of any object (or array of objects) over time. TweenMax can be used on its own or in conjunction with advanced sequencing tools like TimelineLite or TimelineMax to make complex tasks much simpler. With scores of other animation frameworks to choose from, why consider the GreenSock Animation Platform?:
Getting started
Usage
The most common type of tween is a TweenMax.to() tween which allows you to define the destination values:
The above code will tween the width and height properties of the DOM element with an id of «photo» from whatever the current values are to 200 and 150 respectively over the course of 2 seconds. Notice the width and height values are defined inside a generic object (between curly braces). Put as many properties there as you want.
If you pass a string (text) into a tween as the target (like TweenMax.to(«#myID», 1,
So once TweenMax is loaded, you can easily animate things like this:
By default, tweens begin immediately, although you can delay them using the delay special property or pause them initially using the paused special property (see below).
The target can also be an array of objects. For example, the following tween will tween the opacity css property to 0.5 and the rotation transform property to 45 for obj1, obj2, and obj3:
You can also use a TweenMax.from() tween if you want to define the starting values instead of the ending values so that the target tweens from the defined values to wherever they currently are. Or a TweenMax.fromTo() lets you define both starting and ending values.
Special Properties, callbacks and eases
In addition to handling the destination values of a tween, the vars object allows you to configure your tween with a variety of options.
All TweenMax vars’ properties are described below.
Plugins
Think of plugins like special properties that are dynamically added, delivering extra abilities without forcing them to be baked into the core engine, keeping it relatively lean and mean. Each plugin is associated with a property name and it takes responsibility for handling that property. For example, the CSSPlugin is associated with the «css» property name so if it is activated it will intercept the «css» property in the following tween and manage it in a special way so that the tweens affect the element’s style object (for manipulating DOM elements):
But again, CSSPlugin is a special case where TweenMax (as of version 1.8.0) doesn’t require wrapping css-specific properties in a css object (although you can if you want maximum performance).
If the CSSPlugin wasn’t loaded, TweenMax would act as though you were trying to literally tween the element.css property (and there is no such thing).
The following plugins are automatically activated by TweenMax:
Function-based values
Instead of a number ( x:100 ) or string ( width:»300px» ) or relative value ( y:»+=50″ ), you can now define most values as a function that’ll get called once for each target the first time the tween renders, and whatever is returned by that function will be used as the value. This can be very useful for randomizing things or applying conditional logic. See it in action in the demos below.
Parameters: index, target
The function is passed two parameters:
Using the index parameter makes it easy to increment the value accordingly. There are lots of ways to get creative. The demo below uses the index parameter to tween each element’s x value in increments of 100.
Examples
Please see http://greensock.com/gsap-js/ for examples, tutorials, and interactive demos.
Official GreenSock Training (videos and eBook)
If you want to learn all of what GSAP can do check out our official video training Learn HTML5 Animation with GreenSock which includes over 5 hours of HD video created by our Geek Ambassador, Carl Schooff. This course is packed with real-world projects and detailed step-by-step instructions.
Русские Блоги
TweenMax достигает анимационных эффектов
TweenMax Это js Плагины замедленного действия могут обеспечить множество интересных эффектов.
официальный сайт tweenMaxhttp://greensock.com/tweenmaxЕсть много примеров для изучения.
адрес github:https://github.com/greensock/GreenSock-JS
Официальный сайт demo Смотрите демонстрационный пример. 
TweenMax разделен на несколько больших блоков для представления, а именно: атрибуты, специфичные для третьего параметра (29), плагин (17), открытые атрибуты (10), открытые методы (20).
1. Третий параметр-специфические атрибуты (29):
Эти 29 параметров могут быть непосредственно переданы в третий параметр OBJECT без увеличения размера файла.
delay : Number: Delay start, количество секунд до начала анимации TweenMax.
useFrames : Boolean: При значении True метод вычисления времени для этого объекта TweenMax основан на кадре.
ease : Функция: медленный режим. Вы можете использовать функцию замедления в пакете com.greensock.easing.
easeParams : Array: параметры функции ослабления. Некоторые функции замедления должны передавать некоторые параметры для дополнительного контроля.
onInit : Функция: Функция инициализации. Перед запуском TweenMax все параметры запускаются, когда они не передаются в объект TweenMax. Может использоваться для инициализации состояния движущихся объектов.
onInitParams : Array: параметры функции инициализации.
onStart : Функция: Функция запуска. В отличие от функции инициализации, функция запуска запускается после изменения значения объекта TweenMax и отличается от функции инициализации. Функция запуска может быть запущена несколько раз.
onStartParams : Array: Запустить параметры функции.
onUpdate : Функция: функция обновления. Запускается каждый раз, когда значение объекта TweenMax обновляется.
onUpdateParams : Array: Обновить параметры функции.
onComplete : Функция: завершить функцию. Срабатывает, когда объект TweenMax заканчивает ослабление.
onCompleteParams : Array: завершить параметры функции.
onReverseComplete : Функция: Функция завершения воспроизведения. Срабатывает, когда TweenMax Object находится в состоянии воспроизведения и возвращается в начальную точку.
onReverseCompleteParams : Array: Воспроизвести параметры функции завершения.
onRepeat : Функция: функция воспроизведения. Запускается каждый раз, когда TweenMax Object воспроизводится.
onRepeatParams : Array: Параметры функции воспроизведения.
immediateRender : Boolean: визуализируй сразу. Как правило, TweenMax Object будет отображаться на сцене в следующем цикле рендеринга (то есть в следующем кадре). Если вы хотите включить немедленный рендеринг, вы можете установить для этого параметра значение true. Кроме того, если вы хотите предотвратить рендеринг движущегося объекта с периодом движения 0, вы также можете установить для этого параметра значение false.
paused : Boolean: пауза. Это легко понять. Когда установлено значение true, TweenMax Object приостановит замедление.
reversed : Boolean: обратный. Я не знаю, почему это отличается от документации. Мое понимание состоит в том, чтобы обратить вспять ослабление объекта TweenMax.
overwrite : int: Обработка перезаписи. Определяет, как бороться с конфликтами при использовании TweenMax для одного и того же объекта. Есть 6 режимов.
Режим 0: НИКТО. Ничего не делать. Превосходное представление.
Режим 1: ALL_IMMEDIATE. Движение объекта TweenMax, установленное в этом режиме, имеет наивысший приоритет и будет перезаписывать любое замедление перед движущимся объектом. Новый объект TweenMax перезаписывается при создании нового объекта TweenMax. Превосходное представление.
Режим 3: CONCURRENT. Слово означает «одновременно». Очень похоже на режим 1. Разница лишь в том, что он перезаписывает только работающий объект TweenMax. И отпустите другие объекты TweenMax, которые не запущены. Производительность Очень Хорошо.
Режим 4: ALL_ONSTART. Это также очень похоже на режим 1. Два различия заключаются в том, что он перезаписывает все другие объекты TweenMax при первом отображении объекта TweenMax, и это также перезаписывает объекты TweenMax, созданные после него. Производительность Очень Хорошо.
Режим 5: ПРЕДЫДУЩАЯ. Это слово кажется запутанным, но на самом деле оно уже существующее, смущающее. Единственное отличие состоит в том, что он перезаписывает все другие объекты TweenMax при первом рендеринге объекта TweenMax. Производительность Очень Хорошо.
Если вы хотите изменить свойство перезаписи глобального объекта TweenMax по умолчанию, вы можете вызвать глобальный метод init () класса OverWriteManager, а именно: OverwriteManager.init (OverwriteManager.XXXX);
repeatDelay : Number: время задержки цикла.
yoyo : Boolean: YOYO ball. Еще один круговой путь. Как и мяч YOYO, который мы сыграли, движение туда и обратно от начала до конца, а затем от конца до конца. PS: установить одновременно с повтором.
onStartListener : Функция: Зарегистрировать прослушиватель TweenEvent и отправить его одновременно с функцией запуска.
onUpdateListener : Функция: Зарегистрировать прослушиватель TweenEvent и отправить его одновременно с функцией обновления.
onCompleteListener : Функция: Зарегистрировать прослушиватель TweenEvent и отправить его одновременно с функцией завершения.
onReverseCompleteListener : Функция: Зарегистрируйте монитор TweenEvent и отправьте его одновременно с функцией завершения воспроизведения.
onRepeatListener : Функция: Зарегистрировать монитор TweenEvent и отправить его одновременно с функцией воспроизведения.
startAt : Object: сбросить начальное значение. Обычно TweenMax Object использует текущее состояние движущегося объекта в качестве начального значения. Но вы можете использовать этот параметр для сброса начального состояния движущегося объекта.
2, подключаемый модуль (17)
autoAlpha : Number: Это почти то же самое, что и альфа, разница в том, что когда альфа == 0, он автоматически установит видимый на false, а когда альфа> 0, visible будет установлен в true.
visible : Boolean: установить свойство visible объекта в конце объекта TweenMax.
volume : Номер: медленный объем. Необходимо иметь атрибуты soundTransform для движущихся объектов, таких как MovieClip, SoundChannel NetStream и т. Д.
tint : Номер: цвет. Измените весь движущийся объект на соответствующий цвет. Можно использовать шестнадцатеричные значения.
removeTint : Boolean: При значении true удалите использованное свойство tint.
frame : Number: Если движущимся объектом является MovieClip, замедлите внутреннюю временную шкалу.
bezier : Array: Кривая Безье. Это немного неясно: кажется, что нечетные точки (Object
orientToBezier : Array (или Boolean): указывает на движение. Более часто используемая функция заключается в том, что при выполнении искривленного движения ориентация объекта обычно соответствует направлению движения (например, автомобиля или другого движения). Для 2D вы можете просто передать true. Для 3D или если вам нужна большая гибкость, вы можете передать 4 параметра массива: x, y, вращение, степень, которую нужно увеличить. Примечание: первые 3 параметра не являются конкретными значениями, но параметры, которые необходимо изменить, первые два Является атрибутом позиции, третий является параметром поворота, а четвертый параметр является необязательным.
shortRotation : Объект: Короткое вращение. Если вы используете это вместо вращения, TweenMax будет автоматически вращаться в кратчайшем направлении вращения вместо вращения против часовой стрелки в соответствии со значением по умолчанию AS3. Не забудьте пройти мимо объекта.
GreenSock для начинающих: учебник по веб-анимации (часть 1)
Вот что я освещал в прошлых выпусках:
GSAP имеет слишком много функций, чтобы поместиться в одной статье. Вот почему я выбрал статью из нескольких частей, посвященную различным областям библиотеки GreenSock.
Если вы уже являетесь ниндзя GSAP, ознакомьтесь с анимационными каруселями начальной загрузки с библиотекой анимации GSAP, где Джордж Марцукус иллюстрирует эффективное использование GreenSock для анимации пользовательского интерфейса.
Без лишних слов, приготовьтесь, путешествие вот-вот начнется!
Что такое GreenSock и для чего он нужен?
GreenSock — это де-факто стандартная платформа анимации JavaScript, доступная сегодня.
Это зрелая библиотека JavaScript, которая берет свое начало в Flash-анимации. Это означает, что парни из GreenSock знают веб-анимацию наизнанку, библиотека существует уже давно и никуда не денется в ближайшее время.
GSAP включает в себя полный набор инструментов, утилит и плагинов, которые вы можете использовать для решения любых задач веб-анимации, от которых вы сталкиваетесь: от последовательной анимации SVG в разных браузерах до кодирования сложных анимационных последовательностей, перетаскивания элементов по экрану, разделения и скремблирования текста, и многое другое.
Чтобы упомянуть только три вещи, которые я особенно люблю в GreenSock:
Основные инструменты GreenSock
Это основные модули GreenSock:
Вы можете включить TweenLite в свой проект, а затем добавлять другие модули по мере необходимости. В качестве альтернативы вы можете включить TweenMax (подход, который я собираюсь использовать в этой серии из нескольких частей), которая объединяет все основные модули в один оптимизированный файл.
Лицензия
GSAP не приняла бесплатную лицензию с открытым исходным кодом, такую как MIT, в основном по причинам, которые касаются поддержания высокого качества продукта и его финансовой устойчивости в долгосрочной перспективе.
GreenSock предоставляет две лицензии :
Несмотря на несоблюдение MIT и аналогичных лицензий на бесплатное использование, позволяя вам заглянуть в его сырой код как в репозитории GitHub проекта, так и в ваших загрузках, GreenSock рекомендует вам учиться на коде своих разработчиков и их мастерстве в JavaScript-анимации, которая является одной из лучших особенностей философии открытого исходного кода.
Твининг с GreenSock
Простая анимация состоит из каких-то изменений, которые происходят со временем от точки А к точке Б. Аниматоры имеют специальное имя для состояний между А и В, т. Е. Анимацию движения.
TweenLite и TweenMax — два мощных инструмента анимации движения, которые GreenSock предоставляет в ваше распоряжение. Как я уже говорил выше, я собираюсь сосредоточиться на TweenMax здесь, но помните, что основной синтаксис одинаков в обеих библиотеках.
Чтобы загрузить GSAP в свой проект, добавьте этот