Градиенты могут мгновенно улучшить внешний вид веб-сайта, если использовать его с правильной комбинацией цветов. 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 . Он имеет четыре допустимых значения: diagonal , left-right , top-bottom и radial . Созданные вами градиенты не будут двигаться в этих конкретных направлениях — они будут нарисованы именно таким образом. Положение градиента не меняется во время анимации; только его цвета.
Существует также свойство states , которое принимает объект в качестве значения. Каждое состояние, указанное в объекте states будет иметь имя и набор пар ключ-значение. Вы можете использовать свойство gradients чтобы указать разные цвета, которые должны составлять определенный градиент. Вы можете установить значение этого свойства равным массиву градиентов.
Granim.js автоматически создаст анимацию, в которой цвета градиента меняются от одного набора к другому. Переход между разными градиентами по умолчанию занимает 5000 миллисекунд. Однако вы можете ускорить или замедлить анимацию, установив соответствующее значение для свойства transitionSpeed .
После того, как градиенты начнут анимироваться, они должны будут заканчиваться в той или иной точке. Вы можете указать, должен ли градиент затем просто останавливаться на достигнутом или начинать анимацию снова с самого начала, используя свойство loop . По умолчанию установлено значение true , что означает, что градиент будет продолжать анимацию.
Каждый цвет в градиенте может иметь различную непрозрачность, которую можно указать с помощью свойства opacity . Это свойство принимает массив для определения непрозрачности каждого цвета. Для двух градиентных цветов значение может быть [0,1, 0,8]. Для трех градиентных цветов значение может быть [1, 0,5, 0,75] и т. Д.
У вас также есть возможность указать время, необходимое для перехода градиентной анимации из одного состояния в другое, используя stateTransitionSpeed . Это отличается от свойства transitionSpeed , которое управляет скоростью анимации в том же состоянии.
В следующем фрагменте кода я создал два разных экземпляра Granim для рисования разных градиентов. В первом случае мы указали только один градиент, поэтому никакой анимации нет, а цвета не меняются вообще.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
var firstGranim = new Granim({
element: «#first»,
name: «first-gradient»,
direction: «diagonal»,
opacity: [1, 1],
states: {
«default-state»: {
gradients: [[«#8BC34A», «#FF9800»]]
}
}
});
var secondGranim = new Granim({
element: «#second»,
name: «second-gradient»,
elToSetClassOn: «.wrapper»,
direction: «top-bottom»,
opacity: [1, 1],
states: {
«default-state»: {
gradients: [[«#9C27B0», «#E91E63»], [«#009688», «#8BC34A»]],
transitionSpeed: 2000
}
}
});
|
Анимированные градиенты над изображением
Другое распространенное использование библиотеки Granim.js — анимация градиента изображения, нарисованного на холсте. Вы можете указать различные свойства, чтобы управлять тем, как изображение рисуется на холсте, используя свойство image . Он принимает объект с парами ключ-значение в качестве значения. Вы можете использовать свойство source чтобы указать путь, по которому библиотека должна получить изображение, чтобы нарисовать его на холсте.
Любое изображение, которое вы рисуете на холсте, будет нарисовано так, чтобы его центр совпадал с центром холста. Однако вы можете использовать свойство position чтобы указать другую позицию для рисования изображения. Это свойство принимает массив из двух элементов в качестве значения. Первый элемент может иметь значения left , center и right . Второй элемент может иметь значения top , center и bottom .
Эти свойства обычно полезны, когда вы знаете, что размер холста и изображения не будут совпадать. В этих ситуациях вы можете использовать это свойство, чтобы указать часть изображения, которая должна появиться на холсте.
Если изображения и холст имеют разные размеры, вы также можете растянуть изображение так, чтобы оно правильно помещалось внутри холста. Свойство stretchMode также принимает массив из двух элементов в качестве значения. Три допустимых значения для обоих этих элементов: stretch , stretch-if-smaller , и stretch-if-larger .
Градиент с режимом наложения, установленным в normal режим, полностью скрывает изображение под ним. Единственный способ показать изображение ниже градиента сплошных цветов — это выбрать другой режим наложения. Вы можете прочитать обо всех возможных значениях режима наложения для холста в MDN .
Я хотел бы отметить, что возможность анимировать градиент над изображением была добавлена только в версии 1.1 библиотеки Granim.js. Поэтому вам нужно будет использовать любую версию выше этой, если вы хотите, чтобы эта функция работала правильно.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
var firstGranim = new Granim({
element: «#first»,
name: «first-gradient»,
direction: «diagonal»,
opacity: [1, 1],
image: {
source: «path/to/rose_image.jpg»,
position: [«center», «center»],
blendingMode: «lighten»
},
states: {
«default-state»: {
gradients: [[«#8BC34A», «#FF9800»], [«#FF0000», «#000000»]]
}
}
});
var secondGranim = new Granim({
element: «#second»,
name: «second-gradient»,
elToSetClassOn: «.wrapper»,
direction: «top-bottom»,
opacity: [1, 1],
image: {
source: «path/to/landscape.jpg»,
stretchMode: [«stretch», «stretch»],
blendingMode: «overlay»
},
states: {
«default-state»: {
gradients: [[«#9C27B0», «#E91E63»], [«#009688», «#8BC34A»]],
transitionSpeed: 2000
}
}
});
|
Методы управления градиентным воспроизведением анимации
До этого момента мы не имели никакого контроля над воспроизведением градиентной анимации после ее создания. Мы не могли приостановить / воспроизвести его или изменить его состояние, направление и т. Д. Библиотека Granim.js имеет различные методы, которые позволяют легко выполнять все эти задачи.
Вы можете воспроизводить или приостанавливать любую анимацию, используя методы play() и pause() . Точно так же вы можете изменить состояние анимации градиента, используя метод changeState('state-name') . Здесь state-name должно быть одним из имен состояний, которые вы определили при Granim экземпляра Granim .
В версии 1.1 было добавлено больше методов, которые позволяют вам изменять направление и режим changeDirection('direction-name') анимации на лету, используя changeDirection('direction-name') и changeBlendingMode('blending-mode-name') .
В следующем фрагменте кода я использую событие нажатия кнопки для вызова всех этих методов, но вы можете использовать любое другое событие для их вызова.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
var firstGranim = new Granim({
element: «#first»,
name: «first-gradient»,
elToSetClassOn: «.wrapper»,
direction: «top-bottom»,
opacity: [1, 1],
isPausedWhenNotInView: true,
image : {
source: ‘path/to/landscape.jpg’,
stretchMode: [«stretch», «stretch»],
blendingMode: ‘overlay’
},
states: {
«default-state»: {
gradients: [[«#9C27B0», «#E91E63»], [«#009688», «#8BC34A»]],
transitionSpeed: 2000
},
«green-state»: {
gradients: [[«#4CAF50», «#CDDC39»], [«#FFEB3B», «#8BC34A»]],
transitionSpeed: 2000
},
«red-state»: {
gradients: [[«#E91E63», «#FF5722»], [«#F44336», «#FF9800»]],
transitionSpeed: 2000
}
}
});
$(«.play»).on(«click», function(){
firstGranim.play();
});
$(«.pause»).on(«click», function(){
firstGranim.pause();
});
$(«.diagonal»).on(«click», function(){
firstGranim.changeDirection(‘diagonal’);
});
$(«.radial»).on(«click», function(){
firstGranim.changeDirection(‘radial’);
});
$(«.red-state»).on(«click», function(){
firstGranim.changeState(‘red-state’);
});
$(«.green-state»).on(«click», function(){
firstGranim.changeState(‘green-state’);
});
$(«.color-dodge»).on(«click», function(){
firstGranim.changeBlendingMode(‘color-dodge’);
});
$(«.color-burn»).on(«click», function(){
firstGranim.changeBlendingMode(‘color-burn’);
});
$(«.lighten»).on(«click», function(){
firstGranim.changeBlendingMode(‘lighten’);
});
$(«.darken»).on(«click», function(){
firstGranim.changeBlendingMode(‘darken’);
});
|
Последние мысли
В этом уроке я рассмотрел основы библиотеки Granim.js, чтобы вы могли начать работу с ней как можно быстрее. Есть несколько других методов и свойств, которые могут оказаться полезными при создании этих градиентных анимаций. Вы должны прочитать официальную документацию , чтобы прочитать о них всех.
Если вы ищете дополнительные ресурсы JavaScript для изучения или использования в своей работе, посмотрите, что у нас есть на рынке Envato .
Если у вас есть какие-либо вопросы, связанные с этим учебником, не стесняйтесь сообщать мне в комментариях.