Платформа анимации GreenSock (GSAP)

Платформа анимации GreenSock (GSAP)

GSAP — это простой способ создавать быстрые и оптимизированные анимации с помощью JavaScript. Его можно использовать для эффектов параллакса, хотя он не ограничивается такими.

Почему именно GSAP?

Потому что это стабильная библиотека. Компания, стоящая за его разработкой, существует на рынке еще до того, как вообще появилась CSS-анимация. Много лет назад Flash Player широко использовался для веб-анимации. GreenSock разрабатывает изначально разработанные библиотеки анимации для ActionScript (язык сценариев Flash Player).

Потому что ActionScript основан на черновике ECMAScript 4. Последний должен был стать JavaScript 4 примерно в 2009-2010 годах (когда черновик стал белым), но встретил сопротивление со стороны Microsoft и так и не увидел свет. Вместо этого мы получили JS5, который, хотя и был довольно инновационным, был ближе к JS3, чем к JS4..

Что означают все эти версии??

Это означает, что программисты, знакомые с ActionScript, находятся в небольшом шаге от JavaScript. Поэтому, когда рыночная доля Flash Player сократилась и браузеры уже были способны выполнять переходы, преобразования и анимацию CSS, GreenSock перенесла свою работу на JavaScrpt. А поскольку у них по определению много точек соприкосновения, они, как правило, опирались только друг на друга..

Итак, разве вы не готовы доверять компании, которая занимается этим более 10 лет? Я, и я думаю, что я один не смог бы достичь той скорости, которую они предлагают.

Как использовать GSAP?

Скажем свое слово. Платформа предлагает 4 библиотеки (на самом деле их 2, каждая с облегченной и полной версией):

  1. TweenLite
  2. TweenMax
  3. TimelineLite
  4. TimelineMax

Интересно именно то, что в нем содержится.

TimelineMax содержит TimelineLite и обновляет его. Звучит довольно естественно, не правда ли??

Однако TweenMax содержит не только TweenLite, но также TimelineMax (и, следовательно, TimelineLite). В дополнение к другим 3, он также содержит камеру плагинов. Другими словами, он содержит все.

Читать также:  Некоторые основные теги в HTML часть 2

Однако имейте в виду, что добавление TweenMax на ваши страницы не только даст вам гибкость во всем, но и будет загружаться немного медленнее..

TweenLite

В этом руководстве мы рассмотрим только некоторые основы GSAP, поэтому мы будем использовать только TweenLite. Итак, нам нужно будет включить один из плагинов: CSSPlugin, чтобы убедиться, что мы можем правильно анимировать значения CSS элементов..

Только TweenLite можно использовать для изменения любых произвольных атрибутов / свойств с одного значения на другое..

Вы можете просто иметь:

const person = {age: 10};

и используйте TweenLite, чтобы изменить значение возраста с 10 до 20 (например) в течение определенного периода времени..

Если это значение напрямую связано (привязано) к чему-то еще, что вы делаете на странице, это все равно может привести к анимации..

Однако, добавляя CSSPlugin, TweenLite позволяет легко анимировать любое свойство CSS элемента DOM. Он даже обнаруживает их самостоятельно через element.style.property..

Он добавляет еще несколько вариантов:

  • это заботиться о функциях в некоторых браузерах
  • исправляет префиксы вендоров (при необходимости)
  • оптимизация скорости
  • автоматическое определение и пересчет единиц измерения (px, em,% и все остальное)
  • возможность анимировать сложные значения, такие как background-position: 0 0, border-radius: 5px 5px 0 0, box-shadow: 5px 5px 0 10px rgba (0, 0, 0, 0.2) и другие
  • цветная анимация (rgb, rgba, hsl, hsla, hex

Код

Однако вы, вероятно, читаете эту статью не только об упомянутых выше историях. Вы также хотите узнать, как использовать GSAP в реальном коде..

Я приготовил простой пример.

HTML

Сначала добавим почти пустую страницу с кнопкой, которую мы будем анимировать:

Читать также:  Пользовательский параллакс без какихлибо библиотек

!DOCTYPE html>
html>
голова>
title> GSAP Test / title>
/ голова>
тело>
кнопка> Изменить размер / кнопка>
/ body>
/ html>

CSS

Под тегом заголовка мы можем встроить (чтобы не иметь дело с большим количеством файлов в этом простом примере) добавить немного базового CSS (сброс + простые стили центрирования кнопок):

* {маржа: 0; отступ: 0; } html, body {width: 100%; высота: 100%; }
body {display: flex; justify-content: center; align-items: center; фон: # E0E0E0; цвет: # 333; шрифт: обычный 14px / 1.35 Arial, Helvetica, без засечек; }
кнопка {padding: 3px 8px; ширина: 100 пикселей; высота: 30 пикселей; }

JavaScript

Пришло время добавить JavaScript.

Сначала мы должны добавить саму библиотеку.

Вы можете загрузить файлы с GitHub: https://github.com/greensock/GreenSock-JS/ или получить ссылки на CDN с https://greensock.com/?download=GSAP-JS..

Последний позволяет вам точно настроить, что загружать, с помощью параметра Настроить:

Платформа анимации GreenSock (GSAP)

Итак, вы можете просто вставить:

script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"> / script>
script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js"> / script>

Тогда возьмем ссылку на кнопку:

const btn = document.querySelector (‘кнопка’);

И когда вы щелкаете, сделайте его анимированным на 0,5 секунды, чтобы удвоить значение:

btn.addEventListener (‘click’, e => {TweenLite.to (btn, 0,5, {ширина: 200, высота: 60});});

Ослабление

Однако давайте добавим функцию замедления, чтобы сделать анимацию более естественной, а не чисто линейной:

btn.addEventListener (‘click’, e => {TweenLite.to (btn, 0,5, {ширина: 200, высота: 60, легкость: Power3.easeInOut});});

GSAP имеет встроенные параметры ослабления. Основные из них — это степени от 0 (линейная анимация) до 4, а кроме них есть другие, такие как эластичность, прыжки, забавный кадр, экспонента, синусоида и другие..

Вы можете увидеть интерактивный пример всех из них на их веб-сайте: https://greensock.com/docs/Easing.

В нашем случае мы используем Power3 для ярко выраженного эффекта. Каждая функция замедления фактически представлена ​​как объект, который имеет свойства для easyIn, easyOut и easyInOut..

Читать также:  DISC категоризация людей в зависимости от того как они работают

Динамические значения

Значения, которые мы анимируем, могут быть установлены не только как константы, но и напрямую с помощью функции обратного вызова. А теперь по результату функции анимировать другое значение.

Давайте заставим кнопку каждый раз анимировать свои размеры на любое значение. Однако пусть он не будет полностью произвольным, а будет ограничен минимум 100 пикселей в ширину и 30 пикселей в высоту (как изначально в CSS). И пусть его максимальные размеры будут 300 пикселей в ширину и 90 пикселей в высоту:

btn.addEventListener (‘click’, e => {TweenLite.to (btn, 0.5, {width: () => 100 + Math.random () * 200, height: () => 30 + Math.random () * 60, легкость: Power3.easeInOut});});

Таким образом, каждый раз, когда вы нажимаете на кнопку, она меняет свой размер..

TweenLite.from

Помимо анимации значения «до», мы также можем анимировать значение «от». Это удобно, когда, например, мы хотим показать что-то с анимацией от заставки до конечного состояния..

В настоящее время у нас есть стили кнопки запуска (до ее нажатия). Давайте сделаем его анимированным рядом с ними, сделав его прозрачным и немного выше на экране. Он как будто падает и становится видно:

TweenLite.from (btn, 0,5, {непрозрачность: 0, легкость: Power2.easeIn}); TweenLite.from (btn, 0.5, {y: -100, easy: Power1.easeOut});

Я использую 2 анимации, потому что хочу иметь разные функции плавности. Набирать известность начинается плавно, а к концу уже спешит проявить себя. И «падение» начинается быстро, постепенно замедляясь, так что оно не «ударяется» о землю, а вместо этого слегка «приземляется»..

Пример

Наконец, конечно, давайте посмотрим на пример всего этого на https://magadanski.com/demo/parallax-GSAP/.

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?