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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 var firstGranim = new Granim ({
  элемент: «# first»,
  имя: «первый градиент»,
  направление: «диагональ»,
  непрозрачность: [1, 1],
  состояния: {
    "default-state": {
      градиенты: [["#8BC34A", "#FF9800"]]
    }
  }
});

var secondGranim = новый Граним ({
  элемент: "# second",
  имя: «второй градиент»,
  elToSetClassOn: ".wrapper",
  направление: «верхний дно»,
  непрозрачность: [1, 1],
  состояния: {
    "default-state": {
      градиенты: [["#9C27B0", "#E91E63"]["#009688", "#8BC34A"]],
      transitionSpeed: 2000
    }
  }
});

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

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

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

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

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

 var firstGranim = new Granim ({
  элемент: «# first»,
  имя: «первый градиент»,
  направление: «диагональ»,
  непрозрачность: [1, 1],
  image: {
    источник: «путь / to / rose_image.jpg»,
    позиция: ["center", "center"],
    blendingMode: "lighten"
  },
  состояния: {
    "default-state": {
      градиенты: [["#8BC34A", "#FF9800"]["#FF0000", "#000000"]]
    }
  }
});

var secondGranim = новый Граним ({
  элемент: "# second",
  имя: «второй градиент»,
  elToSetClassOn: ".wrapper",
  направление: «верхний дно»,
  непрозрачность: [1, 1],
  image: {
    источник: «путь / to / landscape.jpg»,
    stretchMode: ["stretch", "stretch"],
    blendingMode: "overlay"
  },
  состояния: {
    "default-state": {
      градиенты: [["#9C27B0", "#E91E63"]["#009688", "#8BC34A"]],
      transitionSpeed: 2000
    }
  }
});

 var firstGranim = new Granim ({
  элемент: «# first»,
  имя: «первый градиент»,
  elToSetClassOn: ".wrapper",
  направление: «верхний дно»,
  непрозрачность: [1, 1],
  isPausedWhenNotInView: true,
  image: {
        source: 'path / to / landscape.jpg',
        stretchMode: ["stretch", "stretch"],
        blendingMode: 'overlay'
  },
  состояния: {
    "default-state": {
      градиенты: [["#9C27B0", "#E91E63"]["#009688", "#8BC34A"]],
      transitionSpeed: 2000
    },
    "green-state": {
      градиенты: [["#4CAF50", "#CDDC39"]["#FFEB3B", "#8BC34A"]],
      transitionSpeed: 2000
    },
    «red-state»: {
      градиенты: [["#E91E63", "#FF5722"]["#F44336", "#FF9800"]],
      transitionSpeed: 2000
    }
  }
});

$ (". play"). on ("click", function () {
  firstGranim.play ();
});

$ (". pause"). on ("click", function () {
  firstGranim.pause ();
});

$ (". diagonal"). on ("click", function () {
  firstGranim.changeDirection ( 'диагонали');
});

$ (". radial"). on ("click", function () {
  firstGranim.changeDirection ( 'радиальной');
});

$ (". red-state"). on ("click", function () {
  firstGranim.changeState ( 'красный-состояние');
});

$ (". green-state"). on ("click", function () {
  firstGranim.changeState ( 'зеленый-состояние');
});

$ (". color-dodge"). on ("click", function () {
  firstGranim.changeBlendingMode ( 'цветной уворачивания');
});

$ (". color-burn"). on ("click", function () {
  firstGranim.changeBlendingMode ( 'цвет Ожог');
});

$ (". lighten"). on ("click", function () {
  firstGranim.changeBlendingMode ( 'осветлить');
});

$ (". darken"). on ("click", function () {
  firstGranim.changeBlendingMode ( 'затемнить');
}