До сих пор в этой серии вы узнали, как анимировать свойства CSS различных элементов, как создавать различные SVG-анимации и как анимировать текстовое содержимое разных элементов на веб-странице. Есть еще один способ, с помощью которого вы можете анимировать элементы на веб-странице, используя KUTE.js, а именно путем изменения значений различных атрибутов. Это требует, чтобы вы включили плагин атрибутов в ваш проект.
В этом руководстве вы узнаете, как использовать плагин атрибутов для анимации значений различных типов атрибутов в KUTE.js. Мы также обсудим различные функции замедления, которые можно использовать для управления темпом различных анимаций.
Функции ослабления
Объекты в реальной жизни очень редко движутся линейно. Они либо ускоряются, либо замедляются. Даже ускорение и замедление происходят в разных величинах. До этого момента все наши анимации развивались линейно. Это не кажется естественным вообще. В этом разделе вы узнаете обо всех функциях замедления, которые KUTE.js предоставляет для управления темпом различных анимаций.
Основные функции замедления в библиотеке включены в основной движок из коробки. Допустим, вы хотите применить смягчение QuadraticInOut к анимации. Это может быть достигнуто двумя способами:
|
1
2
3
|
easing: KUTE.Easing.easingQuadraticInOut
// OR
easing: ‘easingQuadraticInOut’
|
Каждая из функций замедления имеет уникальную кривую, которая определяет, как элементы будут ускоряться во время анимации. sinusoidal кривая подразумевает линейное ускорение. Имейте в виду, что это отличается от функции linear ослабления. linear функция подразумевает линейную скорость анимации, а синусоидальная кривая подразумевает линейную скорость ускорения анимации. Другими словами, скорость анимации будет увеличиваться или уменьшаться линейно. Точно так же quadratic означает ускорение со степенью двойки, cubic — со степенью три, quartic — со степенью четыре, а quintic — со степенью пять Есть также circular и exponential функции ослабления.
Вы можете добавить In , Out или InOut к любой из функций замедления. Значение In подразумевает, что анимация начнется очень медленно и будет ускоряться до конца. Значение Out подразумевает, что анимация начнется с максимальной скоростью, а затем будет медленно замедляться, пока в конце не остановится. Значение InOut означает, что анимация будет ускоряться в начале и замедляться в конце.
Вы также можете использовать функции bounce и elastic замедления в своих анимациях и добавлять In , Out или InOut к любой из них. В следующей демонстрации я применил все эти функции замедления к различным кругам, чтобы вы могли видеть, как они влияют на темп анимации.
Вполне возможно, что ни одна из основных функций замедления не обеспечит необходимый вам темп анимации. В таких случаях вы можете включить функции Cubic Bezier в свой проект из ветви экспериментов и начать использовать эти функции замедления.
Аналогично, KUTE.js также предоставляет некоторые физические функции замедления, импортированные из библиотеки Dynamics.js . Вы можете прочитать больше обо всех этих функциях замедления и о том, как правильно их использовать, на странице функций ослабления библиотеки.
Анимационные атрибуты
Атрибуты в SVG могут принимать числа и строки в качестве значения. Строки могут быть цветовыми значениями или числами с суффиксами, такими как px , em или % . Имена самих атрибутов также могут состоять из двух слов, соединенных дефисом. Помня об этих различиях, KUTE.js предоставляет нам различные методы, которые можно использовать для указания значений различных атрибутов.
|
1
2
3
4
5
|
var tween = KUTE.to(‘selector’, {attr: {‘r’: 100}});
var tween = KUTE.to(‘selector’, {attr: {‘r’: ‘10%’}});
var tween = KUTE.to(‘selector’, {attr: {‘stroke-width’: 10}});
var tween = KUTE.to(‘selector’, {attr: {strokeWidth: 10}});
|
Как видите, суффиксные значения должны быть заключены в кавычки. Точно так же атрибуты, которые содержат дефис в своем имени, должны быть заключены в кавычки или указаны в форме camelCase.
Атрибуты без единиц измерения
Многие атрибуты принимают значения без единиц измерения. Например, stroke-width хода пути может быть безразмерной. Точно так же вам не нужно указывать единицу измерения для атрибутов r , cx и cy элемента круга. Вы можете анимировать все эти атрибуты из одного значения в другое, используя плагин атрибутов.
Теперь, когда вы знаете, как использовать различные функции замедления, вы сможете анимировать различные атрибуты с разной скоростью. Вот пример:
|
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
|
var radiusAnimation = KUTE.allTo(
«circle»,
{
attr: { r: 75 }
},
{
repeat: 1,
yoyo: true,
offset: 1000,
easing: ‘easingCubicIn’
}
);
var centerxAnimationA = KUTE.to(
«#circle-a»,
{
attr: { cx: 500 }
},
{
repeat: 1,
yoyo: true,
easing: ‘easingCubicInOut’,
}
);
var centerxAnimationB = KUTE.to(
«#circle-b»,
{
attr: { cx: 100 }
},
{
repeat: 1,
yoyo: true,
easing: ‘easingCubicInOut’
}
);
var centeryAnimation = KUTE.allTo(
«circle»,
{
attr: { cy: 300 }
},
{
repeat: 1,
yoyo: true,
offset: 1000,
easing: ‘easingCubicOut’
}
);
|
Первая анимация анимирует радиус обеих окружностей одновременно, используя метод allTo() который мы обсуждали в первом уроке . Если установлено значение true , атрибут yoyo воспроизводит анимацию в обратном направлении.
Атрибут cx обоих кружков анимируется индивидуально. Тем не менее, они оба запускаются одним нажатием кнопки. Наконец, атрибут cy обоих кругов анимируется сразу со offset 1000 миллисекунд.
Атрибуты цвета
Начиная с версии 1.5.7, плагин атрибутов в KUTE.js также позволяет анимировать атрибуты fill , stroke и stopColor . Вы можете использовать действительные названия цветов или шестнадцатеричные значения для цветов. Вы также можете предоставить значения цвета в формате RGB или HSL.
Важно помнить, что анимация будет работать только в том случае, если вы не устанавливаете значение этих свойств в CSS. В следующей демонстрации цвет fill не будет анимирован, если бы я добавил следующий CSS в нашу демонстрацию.
|
1
2
3
|
rect {
fill: brown;
}
|
Демонстрация, которую я создал, очень проста, но вы можете сделать ее более интересной, применяя преобразования и используя больше цветов.
Суффиксированные атрибуты
Многие SVG-атрибуты, такие как r и stroke-width могут работать с суффиксами и без них. Например, вы можете установить значение r равным 10, например, в единицах em, например 10em. Есть некоторые атрибуты, такие как атрибут offset для цветовых остановок, которые всегда требуют добавления суффикса. Указывая значение для суффиксированных атрибутов в KUTE.js, всегда проверяйте, что вы заключаете это значение в кавычки.
В следующем примере я анимировал значение смещения первой остановки в градиенте и цвет второй остановки. Поскольку offset требует суффикса, я заключил значение в кавычки.
|
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
|
var offsetAnimation = KUTE.allTo(
«.stop1»,
{
attr: { offset: ‘90%’}
},
{
repeat: 1,
offset: 1000,
yoyo: true,
easing: ‘easingCubicIn’
}
);
var colorAnimation = KUTE.allTo(
«.stop2»,
{
attr: { stopColor: ‘black’}
},
{
repeat: 1,
offset: 1000,
yoyo: true,
easing: ‘easingCubicIn’
}
);
var scaleAnimation = KUTE.allTo(
«circle»,
{
svgTransform: { scale: 2}
},
{
repeat: 1,
offset: 1000,
yoyo: true,
easing: ‘easingCubicIn’
}
);
|
В демонстрации есть три разных градиента, и каждый из этих градиентов имеет две цветовые остановки с именами классов stop1 и stop2 . Я также применил масштабное преобразование, используя атрибут svgTransform , который мы обсуждали в третьем уроке серии.
Последние мысли
В этом уроке вы узнали о различных функциях замедления, доступных в KUTE.js, и о том, как вы можете использовать их для управления скоростью ваших собственных анимаций. Вы также узнали, как анимировать различные виды атрибутов.
Я постарался охватить все важные аспекты KUTE.js в этой серии. Этого должно быть достаточно, чтобы помочь вам уверенно использовать KUTE.js в ваших собственных проектах. Вы также можете прочитать документацию , чтобы узнать больше о библиотеке.
Я также рекомендовал бы вам просмотреть исходный код и посмотреть, как на самом деле работает библиотека. Если у вас есть какие-либо вопросы или советы, связанные с этим руководством, не стесняйтесь делиться ими в комментариях.