Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Создание интерактивных градиентных анимаций с использованием Granim.js

by
Difficulty:BeginnerLength:MediumLanguages:

Russian (Pусский) translation by Anna Goorikova (you can also view the original English article)

Градиенты могут мгновенно улучшить внешний вид веб-сайта, если его использовать с правильной цветовой комбинацией. CSS также прошел долгий путь, если дело касается применения градиента к любому элементу и его анимации. В этом уроке мы удалимся от CSS и создадим анимацию градиента, используя библиотеку JavaScript под названием Granim.js.

Эта библиотека рисует и анимирует градиенты на заданном холсте в соответствии с параметрами, заданными при создании экземпляра Granim. Существуют различные методы, которые можно использовать, чтобы ваш градиент реагировал на различные пользовательские события, например, на клик по кнопке. В этом уроке мы подробно изучим эту библиотеку и создадим несколько простых, но приятных эффектов анимации градиента.

Создание сплошной цветной градиентной анимации

Прежде чем мы начнем создавать какой-либо градиент, вам нужно будет включить библиотеку в свой проект. Для этого вы можете загрузить Granim.js из GitHub или напрямую связать CDN. Версия библиотеки, которую я использую в этом учебнике, - 1.1. Некоторые методы, которые мы обсудим здесь, были добавлены только в версии 1.1, поэтому использование более старой версии библиотеки, если следовать этому руководству, не всегда даст ожидаемый результат. Помня эти моменты, давайте создадим наш первый градиент, используя Granim.js.

Каждый раз, когда вы создаете новый экземпляр Granim, вы можете передать ему объект пар ключ-значение, где ключ - это имя определенного свойства, а значение - значение свойства. Свойство element используется для указания селектора CSS или узла DOM, который указывает на холст, на который вы хотите применить определенный градиент.

Когда вы создаете анимацию градиента, где цвета меняются от относительно светлого значения до более темного значения, может оказаться невозможным прочитать текст, который вы разместили на холсте. Например, начальный градиент, применяемый к элементу, может быть комбинацией желтого и светло-зеленого. В таких случаях текст холста должен быть темнее, чтобы пользователи могли его читать.

Аналогично, градиент может состоять из темно-красного и черного в какой-то другой точке, и в таких случаях темный текст будет непросто читать. Granim.js решает эту проблему для вас, разрешив вам указать элемент контейнера, на котором вы можете добавить темные и светлые классы, чтобы соответствующим образом подгонять текст или другие элементы. Значение свойства elToSetClassOn по умолчанию устанавливается в body, но вы также можете указать любой другой элемент контейнера. Имена темного и светлого классов обновляются автоматически, основываясь на среднем цвете градиента.

Свойство elToSetClassOn не работает само по себе. Вам также нужно будет указать имя экземпляра Granim, созданного с использованием свойства name. Если вы установите имя на что-то вроде first-gradient, имя классов, применяемых к элементу контейнера, станет first-gradient-light или first-gradient-dark, исходя из того, насколько светлый или темный градиент в настоящее время. Таким образом, любой элемент, который должен изменить свой цвет на основе светлости или темноты градиента, сможет сделать это с легкостью.

Направление, в котором должен быть нарисован градиент, может быть задано с использованием свойства direction. Он имеет четыре допустимых значения: diagonalleft-righttop-bottom и radial. Создаваемые вами градиенты не будут двигаться в этих конкретных направлениях - они будут просто нарисованы таким образом. Положение градиента не изменяется во время анимации; меняются только его цвета.

Существует также свойство states, которое принимает объект как его значение. Каждое состояние, указанное внутри объекта states, будет иметь имя и набор пар ключ-значение. Свойство gradients можно использовать для указания разных цветов, которые должны составлять определенный градиент. Вы можете установить значение этого свойства равным массиву градиентов.

Granim.js автоматически создаст анимацию, в которой цвета градиента меняются от одного набора к другому. Переход между разными градиентами по умолчанию составляет 5000 миллисекунд. Однако вы можете ускорить или замедлить анимацию, установив соответствующее значение для свойства transitionSpeed.

После того, как градиенты начнут анимацию, они должны будут прийти к концу в какой-то момент. Вы можете указать, должен ли тогда градиент просто остановиться или начать анимацию с самого начала с использованием свойства loop. По умолчанию это значение равно true, что означает, что градиент будет продолжать анимацию.

Каждый цвет в градиенте может иметь свою прозрачность, которая может быть указана с использованием свойства opacity. Это свойство принимает массив, чтобы определить, насколько прозрачным будет каждый цвет. Для двух цветов градиента значение может быть [0.1, 0.8]. Для трех цветов градиента значение может быть [1, 0.5, 0.75] и т. д.

У вас также есть возможность указать время, необходимое для перехода градиентной анимации из одного состояния в другое с помощью stateTransitionSpeed. Это отличается от свойства transitionSpeed, которое контролирует скорость анимации в одном и том же состоянии.

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

Анимация градиентов над изображением

Другим распространенным использованием библиотеки Granim.js было бы оживить градиент над изображением, нарисованным на холсте. Вы можете указать разные свойства, чтобы управлять тем, как изображение нарисовано на холсте, используя свойство image. Он принимает объект с парами ключ-значение в качестве его значения. Вы можете использовать свойство source, чтобы указать путь, из которого библиотека должна получить изображение, чтобы нарисовать его на холсте.

Любое изображение, которое вы рисуете на холсте, будет нарисовано так, чтобы его центр совпадал с центром холста. Однако вы можете использовать свойство position, чтобы указать другую позицию для рисования изображения. Это свойство принимает в качестве значения массив из двух элементов. Первый элемент может иметь значения leftcenter и right. Второй элемент может иметь значения topcenter и bottom.

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

Если изображения и холст имеют разные размеры, вы также можете растянуть изображение так, чтобы оно правильно помещалось внутри холста. Свойство stretchMode также принимает массив из двух элементов в качестве значения. Три допустимых значения для обоих этих элементов stretchstretch-if-smaller и stretch-if-larger.

Градиент с режимом смешивания, установленным в состояние normal, полностью скроет изображение под ним. Единственный способ показать изображение под градиентом сплошных цветов - это выбрать другой режим смешивания. Вы можете прочитать о всех возможных значениях режима смешивания для холста на MDN.

Я хотел бы отметить, что возможность анимации градиента над изображением была добавлена только в версию 1.1 библиотеки Granim.js. Поэтому вам нужно будет использовать любую версию выше, если вы хотите, чтобы эта функция работала правильно.

Способы управления воспроизведением градиентной анимации

До этого момента у нас не было никакого контроля над воспроизведением анимации градиента после его создания. Мы не могли приостановить/воспроизвести его или изменить его состояние, направление и т. д. Библиотека Granim.js имеет разные методы, которые позволяют легко выполнять все эти задачи.

Вы можете воспроизводить или приостанавливать анимацию с помощью методов play() и pause(). Аналогично, вы можете изменить состояние анимации градиента, используя метод changeState('state-name'). state-name здесь должно быть одним из имен состояний, которые вы определили при создании экземпляра Granim.

В версии 1.1 были добавлены дополнительные методы, которые позволяют вам изменять направление и режим смешивания анимации «на лету», используя методы changeDirection('direction-name') и changeBlendingMode('blending-mode-name').

В следующем фрагменте кода я использую событие нажатия кнопки для вызова всех этих методов, но вы можете использовать любое другое событие для их вызова.

Заключительные мысли

В этом уроке я рассмотрел основы библиотеки Granim.js, чтобы вы могли начать работать с ней как можно быстрее. Есть несколько других методов и свойств, которые могут оказаться полезными при создании этих градиентных анимаций. Вы должны прочитать официальную документацию, чтобы узнать о них все.

Если вы ищете дополнительные ресурсы JavaScript для изучения или использования в своей работе, ознакомьтесь с тем, что есть на Envato Market.

Если у вас есть какие-либо вопросы, связанные с этим руководством, не стесняйтесь, дайте мне знать в комментариях.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.