Во втором уроке этой серии вы узнали, как анимировать различные CSS-свойства элементов на веб-странице с помощью KUTE.js. Вы узнали, как анимировать все свойства преобразования, а также такие свойства, как border-radius и border-color . Вы также можете использовать плагин CSS для анимации свойств CSS, таких как font-size , line-height , letter-spacing и word-spacing .
KUTE.js также имеет плагин Text, который позволяет вам анимировать текст внутри различных элементов, увеличивая или уменьшая число, как при обратном отсчете, или записывая строковые символы за символами.
Из этого руководства вы узнаете, как анимировать текст внутри различных элементов на веб-странице с помощью плагинов CSS и Text в KUTE.js.
Анимация свойств текста CSS
Как я упоминал ранее, вы можете использовать CSS-плагин KUTE.js для анимации четырех различных текстовых CSS-свойств. Этими свойствами являются font-size , line-height , letter-spacing и word-spacing . Мы также будем использовать некоторые свойства из основного движка, описанного в первом уроке, для анимации отдельных букв. Давайте посмотрим, как мы можем использовать все эти концепции вместе, чтобы создать вибрирующий текст HELLO в следующей демонстрации.
Вот код, который был использован для создания вышеуказанной анимации:
|
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
68
69
70
71
|
var theLetters = document.querySelectorAll(«span»);
var h = document.querySelector(«.h»);
var e = document.querySelector(«.e»);
var la = document.querySelector(«.la»);
var lb = document.querySelector(«.lb»);
var o = document.querySelector(«.o»);
var startButton = document.querySelector(«.start»);
var animateColor = KUTE.allFromTo(
theLetters,
{ color: ‘white’ },
{ color: ‘red’ },
{ offset: 200, duration: 50}
);
var animateFontSize = KUTE.allFromTo(
theLetters,
{ fontSize: ‘2em’ },
{ fontSize: ‘4em’ },
{ offset: 100, duration: 200, repeat: 10, yoyo: true}
);
var animateSkewing = KUTE.allTo(
theLetters,
{ skewX: -15},
{ offset: 200, duration: 200 }
);
var animateH = KUTE.to(
h,
{ color: ‘#009688’ }
);
var animateE = KUTE.to(
e,
{ translateY: -40, color: ‘#E91E63’ }
);
var animateLA = KUTE.to(
la,
{ color: ‘#8BC34A’ }
);
var animateLB = KUTE.to(
lb,
{ translateY: 20, color: ‘#FFC107’ }
);
var animateO = KUTE.to(
o,
{ color: ‘#FF5722’ }
);
var lettersSqueezed = KUTE.allTo(
theLetters,
{ letterSpacing: ‘-15px’ },
{ offset: 0, duration: 200 }
);
animateColor.chain(animateFontSize);
animateFontSize.chain(animateSkewing);
animateSkewing.chain(animateH, animateE, animateLA, animateLB, animateO);
animateE.chain(lettersSqueezed);
startButton.addEventListener(
«click»,
function() {
animateColor.start();
},
false
);
|
Каждая буква слова заключена в тег span и имеет свой собственный уникальный класс. Первая анимация анимирует цвет всех букв от белого до красного со смещением 200 мс. Это также первая анимация, которая воспроизводится после нажатия кнопки « Запустить анимацию» . animateFontSize была прикована к animateColor . Таким образом, анимация font-size начинается, как только заканчивается цветная анимация.
Возможно, вы заметили, что я использовал два атрибута, называемых repeat и yoyo для управления поведением анимации. Атрибут yoyo используется для изменения анимации, которая воспроизводится в данный момент повторно. Это позволяет избежать резких скачков значений различных свойств во время анимации и сделать ее гладкой.
Анимация font-size была связана с animateSkewing , который наклоняет все буквы на -15 градусов. skewX и skewY доступны в самом ядре ядра.
Все анимации для анимации цвета различных букв были сразу прикованы к animateSkewing . Таким образом, вы можете быть уверены, что все анимации цепочки цветов начнут воспроизводиться, как только закончится анимация перекоса. Наконец, анимация lettersSqueezed уменьшает расстояние между разными буквами на 15 px.
Вы можете создавать более интересные эффекты, используя различные комбинации свойств.
Анимация чисел
Вы также можете анимировать номера в KUTE.js. Тем не менее, вам придется включить дополнительный текстовый плагин для создания анимации.
Процесс анимации чисел на самом деле очень прост. Вам просто нужно указать селектор, в котором должны отображаться числа анимации, а также окончательный номер, на котором анимация должна заканчиваться.
Вот базовый пример, который показывает общее количество аэропортов в США в 2016 году с использованием анимации.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
var usa = document.querySelector(«.usa»);
var startButton = document.querySelector(«.start»);
var animateUSA = KUTE.to(
usa,
{ number: 19536 }
);
startButton.addEventListener(
«click»,
function() {
animateUSA.start();
},
false
);
|
Вы также можете применить обычные параметры анимации, такие как duration , repeat и delay чтобы настроить поведение анимации. Код, который мы только что написали, приведет к следующей анимации:
Написание текста за символом
Это очень популярный эффект, который вы можете найти на многих сайтах. Текстовый плагин KUTE.js позволяет вам указать новое предложение, которое должно заменить оригинальное предложение по одному символу за раз.
Перед заменой начальных символов их конечным значением случайные символы анимируются, как в примере с цифрами, который вы только что видели. Встроенная демонстрация CodePen должна прояснить ситуацию:
Вот код, который вам нужно написать для создания анимации выше:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
var animateHeading = KUTE.to(
heading,
{ text: ‘70% Surface of Earth is Covered with Water.’
{ duration: 5000}
);
startButton.addEventListener(
«click»,
function() {
animateHeading.start();
},
false
);
|
Анимация персонажа для всего предложения заканчивается в течение 5 секунд. Как вы могли заметить, начальные и конечные предложения не должны иметь одинаковое количество символов. Это дает нам большую свободу при установке значения параметра text .
Вы также можете включить HTML-теги в значение параметра text а затем использовать CSS, чтобы изменить внешний вид текста, который вы только что анимировали.
|
1
2
3
4
5
|
var animateHeading = KUTE.to(
heading,
{ text: ‘70% SURFACE OF <span class=»earth»>EARTH
{ duration: 10000, textChars: ‘upper’ }
);
|
Появление Земли будет задержкой после того, как оно уже появилось. Это происходит потому, что плагин также пишет <span class="earth"> используя ту же анимацию персонажа, но ни один из этих символов на самом деле не виден пользователю. Задержка может быть или не быть желательной в зависимости от ваших предпочтений.
Промежуточные символы, которые отображаются во время анимации, являются строчными буквенными значениями по умолчанию. Это может быть проблемой, когда символы, которые вы хотите анимировать, представляют собой заглавные буквы или цифры. Какие промежуточные символы используются для анимации, определяется значением параметра textChars . Он принимает шесть разных значений:
-
alpha: в этом случае промежуточные символы будут строчными буквами. -
upper: в этом случае промежуточные символы будут заглавными буквами. -
numeric: в этом случае для анимации используются числовые символы. Это отличается от анимации числа, поскольку значения не будут увеличиваться последовательно. -
symbols: в этом случае плагин будет использовать символы, такие как #,% и $ для анимации. -
all: вы можете использовать это значение, если хотите, чтобы промежуточные символы представляли собой комбинацию букв, цифр и символов. - Если у вас больше ничего не работает, KUTE.js дает вам возможность указать свой собственный список символов, которые следует использовать во время анимации.
В следующем примере показано, как можно анимировать текст внутри заголовка, используя заглавные промежуточные символы.
Последние мысли
В этом руководстве вы узнали, как использовать плагины CSS и Text в KUTE.js для анимации текста внутри элемента. Если вы хотите анимировать внешний вид текста, вам нужно использовать плагин CSS. Это позволит вам использовать такие свойства, как font-size , letter-spacing и т. Д. Если вы хотите изменить фактические символы внутри любого элемента, вам нужно использовать текстовый плагин .
Если вы ищете дополнительные ресурсы JavaScript для изучения или использования в своей работе, посмотрите, что у нас есть на Envato Market .
Я надеюсь, что вы узнали что-то новое в этом уроке. Если у вас есть какие-либо вопросы, пожалуйста, дайте мне знать в комментариях.