KUTE.js — это движок анимации на основе JavaScript, который фокусируется на производительности и эффективности памяти при анимации различных элементов на веб-странице. Я уже написал серию об использовании Anime.js для создания анимаций на основе JavaScript . На этот раз мы узнаем о KUTE.js и о том, как мы можем использовать его, среди прочего, для анимации свойств CSS, SVG и текстовых элементов.
Установка
Прежде чем мы углубимся в некоторые примеры, давайте сначала установим библиотеку. KUTE.js имеет основной движок, а также есть плагины для анимации значений различных свойств CSS, атрибутов SVG или текста. Вы можете напрямую ссылаться на библиотеку из популярных CDN, таких как cdnjs и jsDelivr .
|
1
2
|
<script src=»https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute.min.js»></script>
<script src=»https://cdn.jsdelivr.net/kute.js/1.6.2/kute.min.js»></script>
|
Вы также можете установить KUTE.js, используя NPM или Bower, с помощью следующих команд:
|
1
2
|
npm install —save kute.js
bower install —save kute.js
|
После того, как вы включили библиотеку в свои проекты, вы можете начать создавать свои собственные последовательности анимации.
Твин объекты
При создании анимации с использованием KUTE.js вам необходимо определить объекты анимации. Эти объекты анимации предоставляют всю связанную с анимацией информацию для данного элемента или элементов. Это включает в себя сам элемент, свойства, которые вы хотите анимировать, продолжительность анимации и другие атрибуты, такие как счетчик повторений, задержка или смещение.
Вы можете использовать метод .to() или метод .fromTo() , чтобы анимировать набор свойств CSS из одного значения в другое. Метод .to() анимирует свойства от их значения по умолчанию или их вычисленного / текущего значения до конечного предоставленного значения. В случае метода .fromTo() вы должны .fromTo() начальные и конечные значения анимации.
Метод .to() полезен, когда вы не знаете текущего значения или значения по умолчанию для свойства, которое хотите анимировать. Одним из основных недостатков этого метода является то, что библиотека сама должна вычислять текущее значение всех свойств. Это приводит к задержке в несколько миллисекунд после вызова .start() для запуска анимации.
Метод .fromTo() позволяет вам указать начальные и конечные значения анимации самостоятельно. Это может незначительно улучшить производительность анимации. Теперь вы также можете указать единицы измерения для начальных и конечных значений самостоятельно и избежать каких-либо неожиданностей во время анимации. Один недостаток использования. fromTo() заключается в том, что вы не сможете размещать несколько свойств преобразования в цепочечных анимациях. В таких случаях вам придется использовать метод .to() .
Помните, что .fromTo() и .to() предназначены для использования при анимации отдельных элементов. Если вы хотите анимировать несколько элементов одновременно, вам придется использовать либо .allTo() либо .allFromTo() . Эти методы работают так же, как их одноэлементные аналоги и наследуют все их атрибуты. Они также получают дополнительный атрибут offset который определяет задержку между началом анимации для разных элементов. Это смещение определяется в миллисекундах.
Вот пример, который анимирует непрозрачность трех различных блоков в последовательности.
Следующий JavaScript используется для создания вышеуказанной последовательности анимации:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
var theBoxes = document.querySelectorAll(«.box»);
var startButton = document.querySelector(«.start»);
var animateOpacity = KUTE.allFromTo(
theBoxes,
{ opacity: 1 },
{ opacity: 0.1 },
{ offset: 700 }
);
startButton.addEventListener(
«click»,
function() {
animateOpacity.start();
},
false
);
|
Все вышеперечисленные блоки имеют класс box который использовался для их выбора с помощью метода querySelectorAll() . Метод allFromTo() в KUTE.js используется для анимации непрозрачности этих блоков от 1 до 0,1 со смещением 700 миллисекунд. Как видите, объект анимации не запускает анимацию сам по себе. Вы должны вызвать метод start() , чтобы запустить анимацию.
Управление воспроизведением анимации
В предыдущем разделе мы использовали метод start() для запуска нашей анимации. Библиотека KUTE.js также предоставляет несколько других методов, которые можно использовать для управления воспроизведением анимации.
Например, вы можете остановить любую анимацию, которая выполняется в данный момент, с помощью метода stop() . Помните, что вы можете использовать этот метод, чтобы остановить анимацию только тех объектов анимации, которые были сохранены в переменной. Анимация для любого объекта анимации, созданного на лету, не может быть остановлена этим методом.
У вас также есть возможность просто приостановить анимацию с помощью метода pause() . Это полезно, если вы хотите возобновить анимацию позже. Вы можете использовать resume() или play() для возобновления приостановленной анимации.
В следующем примере представлена обновленная версия предыдущей демонстрации со всеми четырьмя добавленными в нее методами.
Вот код JavaScript, необходимый для добавления функций запуска, остановки, воспроизведения и приостановки.
|
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
|
var theBoxes = document.querySelectorAll(«.box»);
var startButton = document.querySelector(«.start»);
var stopButton = document.querySelector(«.stop»);
var pauseButton = document.querySelector(«.pause»);
var resumeButton = document.querySelector(«.resume»);
var animateOpacity = KUTE.allFromTo(
theBoxes,
{ opacity: 1 },
{ opacity: 0.1 },
{ offset: 700, duration: 2000 }
);
startButton.addEventListener(
«click»,
function() {
animateOpacity.start();
},
false
);
stopButton.addEventListener(
«click»,
function() {
animateOpacity.stop();
},
false
);
pauseButton.addEventListener(
«click»,
function() {
animateOpacity.pause();
},
false
);
resumeButton.addEventListener(
«click»,
function() {
animateOpacity.resume();
},
false
);
|
Я изменил продолжительность анимации до 2000 миллисекунд. Это дает нам достаточно времени, чтобы нажимать разные кнопки и видеть, как они влияют на воспроизведение анимации.
Цепные твины вместе
Вы можете использовать метод chain() для объединения различных анимаций вместе. После объединения различных анимаций они вызывают метод start() для других анимаций после завершения анимации.
Таким образом, вы можете воспроизводить различные анимации в последовательности. Вы можете связать разные анимации друг с другом, чтобы воспроизвести их в цикле. Следующий пример должен прояснить это:
|
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
|
var animateOpacity = KUTE.allFromTo(
theBoxes,
{ opacity: 1 },
{ opacity: 0.1 },
{ offset: 100, duration: 800 }
);
var animateRotation = KUTE.allFromTo(
theBoxes,
{ rotate: 0 },
{ rotate: 360 },
{ offset: 250, duration: 800 }
);
opacityButton.addEventListener(
«click»,
function() {
animateOpacity.start();
},
false
);
rotateButton.addEventListener(
«click»,
function() {
animateRotation.start();
},
false
);
chainButton.addEventListener(
«click»,
function() {
animateOpacity.chain(animateRotation);
animateOpacity.start();
},
false
);
loopButton.addEventListener(
«click»,
function() {
animateOpacity.chain(animateRotation);
animateRotation.chain(animateOpacity);
animateOpacity.start();
},
false
);
|
У нас уже был один подросток, чтобы оживить непрозрачность. Теперь мы добавили еще один, который анимирует вращение наших коробок. Первые две кнопки анимируют непрозрачность и поворот по одному. Третья кнопка запускает сцепление animateOpacity с animateRotation .
Сама цепочка не запускает анимацию, поэтому мы также используем метод start() для запуска анимации непрозрачности. Последняя кнопка используется, чтобы связать обе анимации друг с другом. На этот раз анимации продолжают проигрываться бесконечно после запуска. Вот демонстрация CodePen, которая показывает весь приведенный выше код в действии:
Чтобы полностью понять, как работает цепочка, вам нужно нажимать кнопки в определенной последовательности. Сначала нажмите кнопку Animate Opacity , и вы увидите, что анимация непрозрачности воспроизводится только один раз, а затем больше ничего не происходит. Теперь нажмите кнопку « Поворот анимации» , и вы увидите, что ящики вращаются один раз, и больше ничего не происходит.
После этого нажмите кнопку « Цепные анимации» , и вы увидите, что анимация непрозрачности воспроизводится первой, и после завершения итерации анимация вращения начинает воспроизводиться сама по себе. Это произошло потому, что анимация вращения теперь связана с анимацией непрозрачности.
Теперь снова нажмите кнопку Animate Opacity , и вы увидите, что и непрозрачность, и вращение анимированы последовательно. Это потому, что они уже были прикованы цепью после того, как мы нажали на Цепную анимацию .
В этот момент нажатие кнопки « Поворот анимации» приведет только к анимации вращения. Причина такого поведения в том, что мы только приковали анимацию вращения к анимации непрозрачности. Это означает, что блоки будут вращаться каждый раз, когда прозрачность анимирована, но анимация вращения не означает, что прозрачность также будет анимирована.
Наконец, вы можете нажать на кнопку « Воспроизвести в цикле» . Это будет связывать обе анимации друг с другом, и как только это произойдет, анимация будет продолжать воспроизводиться в неопределенном цикле. Это потому, что конец одной анимации запускает начало другой анимации.
Последние мысли
В этом вводном руководстве по KUTE.js вы узнали об основах библиотеки. Мы начали с установки, а затем перешли к различным методам, которые можно использовать для создания объектов анимации.
Вы также узнали, как управлять воспроизведением анимации и как связывать разные анимации вместе. Как только вы полностью разберетесь в цепочках, вы сможете создавать интересные анимации с помощью этой библиотеки.
В следующем уроке из этой серии вы узнаете, как анимировать различные виды свойств CSS с помощью KUTE.js.