Многие веб-сайты теперь используют какую-то анимацию, чтобы сделать свои целевые страницы более привлекательными. К счастью, есть много библиотек, которые позволяют анимировать элементы на веб-странице, не делая все с нуля. В этом уроке вы узнаете об одной такой библиотеке, которая называется mojs .
Библиотека очень проста в использовании благодаря простому декларативному API. Анимации, которые вы можете создать с помощью mojs, будут плавными и готовыми к сетчатке, чтобы все выглядело профессионально.
Установка Mojs
Есть много способов включить mojs в свои проекты. Вы можете получить библиотеку из ее репозитория GitHub . Кроме того, вы можете напрямую включить в свой проект ссылку на последнюю версию библиотеки из разных CDN .
|
1
|
<script src=»//cdn.jsdelivr.net/mojs/latest/mo.min.js»></script>
|
Разработчики также могут установить mojs с помощью менеджеров пакетов, таких как npm и bower, выполнив следующую команду:
|
1
2
3
|
npm install mo-js
bower install mojs
|
После того, как вы включили библиотеку в свой проект, вы можете начать использовать различные модули для создания интересных анимаций.
Модуль HTML в Мойс
Этот урок будет посвящен модулю HTML в библиотеке mojs. Этот модуль можно использовать для анимации различных элементов HTML на веб-странице.
Первое, что вам нужно сделать, чтобы анимировать элемент DOM, — это создать объект hjml mojs. Вы можете указать селектор элемента и его свойств, которые вы хотите анимировать внутри этого объекта.
Установка значения для el позволит вам определить элемент, который вы хотите анимировать, используя mojs. Вы можете установить его значение в качестве селектора или узла DOM.
Модуль HTML имеет некоторые предопределенные атрибуты, которые можно использовать для анимации различных связанных с преобразованием свойств элемента DOM. Например, вы можете управлять анимацией перемещения элемента по осям x, y и z, указав начальные и конечные значения для свойств x , y и z . Вы также можете вращать любой элемент по разным осям, используя angleX , angleY и angleZ . Это похоже на соответствующие rotateX() , rotateY() и rotateZ() в CSS. Вы также можете наклонить элемент вдоль оси X или Y с помощью свойств skewX и skewY .
Применение анимации масштабирования к различным элементам так же просто. Если вы хотите масштабировать элемент в обоих направлениях, просто установите значение для свойства scale . Аналогично, вы можете анимировать масштабирование элементов по разным осям, устанавливая соответствующие значения для свойств scaleX и scaleY .
Помимо всех этих свойств, которые позволяют вам установить начальные и конечные значения анимации, есть некоторые другие свойства, которые управляют воспроизведением анимации. Вы можете указать продолжительность анимации, используя свойство duration . Предоставленное значение нуждается в числе, и оно будет устанавливать продолжительность анимации в миллисекундах. Если вы хотите запустить анимацию после некоторой задержки, вы можете установить значение задержки, используя свойство delay . Как и duration , delay также ожидает, что ее значение будет числом.
Анимации могут повторяться более одного раза с помощью свойства repeat . Его значение по умолчанию равно нулю, что означает, что анимация будет воспроизводиться только один раз. Установка в 1 будет воспроизводить анимацию дважды, а установка в 2 будет воспроизводить анимацию три раза. Когда анимация завершит свою первую итерацию, элемент вернется в исходное состояние и снова начнет анимацию (если вы установили значение для свойства repeat ). Этот внезапный переход из конечного состояния в исходное состояние может быть нежелательным во всех случаях.
Если вы хотите, чтобы анимация воспроизводилась в обратном направлении после достижения конечного состояния, вы можете установить значение свойства isYoyo в значение true . По умолчанию установлено значение false . Наконец, вы можете установить скорость воспроизведения анимации с помощью свойства speed . Значение по умолчанию равно 1. Если установить значение 2, анимация будет воспроизводиться в два раза быстрее. Точно так же, установив его на 0,5, анимация будет проигрываться на половине скорости.
Html объекты mojs, которые вы создали, не будут сами анимировать соответствующие элементы. Вам нужно будет вызывать метод play() для каждого анимационного файла mojs, который вы хотите воспроизвести. Вот пример, который анимирует три разных блока, используя все свойства, которые мы только что обсуждали:
|
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
|
var htmlA = new mojs.Html({
el: «.a»,
x: {
0: 400
},
angleZ: {
0: 720
},
duration: 1000,
repeat: 4,
isYoyo: true
});
var htmlB = new mojs.Html({
el: «.b»,
x: {
400: 0
},
angleY: {
0: 360
},
angleZ: {
0: 720
},
duration: 1000,
repeat: 4
});
var htmlC = new mojs.Html({
el: «.c»,
x: {
0: 400
},
angleY: {
0: 360
},
scaleZ: {
1: 2
},
skewX: {
0: 30
},
duration: 1000,
repeat: 4,
isYoyo: true
});
document.querySelector(«.play»).addEventListener(«click», function() {
htmlA.play();
htmlB.play();
htmlC.play();
});
|
Вы не ограничены только анимацией свойств преобразования элемента. Библиотека анимации mojs позволяет вам анимировать все другие анимируемые свойства CSS. Вам просто нужно убедиться, что вы указали действительные начальные и конечные значения для них. Например, вы можете анимировать цвет фона элемента, указав допустимые значения для background .
Если свойство CSS, которое вы хотите анимировать, содержит дефис, вы можете удалить дефис и преобразовать имя свойства в camelCase при установке начальных и конечных значений внутри объекта mojs Html . Это означает, что вы можете анимировать border-radius , установив допустимое значение для свойства borderRadius . Следующий пример должен прояснить все:
|
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
|
var htmlA = new mojs.Html({
el: «.a»,
x: {
0: 400
},
angleZ: {
0: 360
},
background: {
red: ‘black’
},
borderWidth: {
10: 20
},
borderColor: {
‘black’: ‘red’
},
borderRadius: {
0: ‘50%’
},
duration: 2000,
repeat: 4,
isYoyo: true
});
document.querySelector(«.play»).addEventListener(«click», function() {
htmlA.play();
});
|
В приведенном выше примере цвет границы изменяется с черного на красный, а радиус границы составляет от 0 до 50%. Следует отметить, что число без единиц измерения будет считаться значением в пикселях, а число с единицами измерения должно быть указано в виде строки, например «50%».
До сих пор мы использовали один набор свойств анимации для управления воспроизведением различных анимаций. Это означало, что для перехода элемента с x:0 на x:200 элементу потребуется то же время, что и для масштабирования от scale:1 до scale:2 .
Это может быть нежелательным поведением, так как вы можете delay анимацию некоторых свойств и также контролировать их duration . В таких случаях вы можете указать параметры воспроизведения анимации каждого свойства внутри самого объекта свойства.
|
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
|
var htmlA = new mojs.Html({
el: «.a»,
x: {
0: 400,
duration: 1000,
repeat: 8,
isYoyo: true
},
angleY: {
0: 360,
delay: 500,
duration: 1000,
repeat: 4,
isYoyo: true
},
angleZ: {
0: 720,
delay: 1000,
duration: 1000,
repeat: 4,
isYoyo: true
}
});
document.querySelector(«.play»).addEventListener(«click», function() {
htmlA.play();
});
|
Функции ослабления, доступные в Mojs
К каждой анимации, которую вы создаете, будет sin.out смягчение sin.out по умолчанию. Если вы хотите, чтобы воспроизведение анимации осуществлялось с использованием другой функции замедления, вы можете указать ее значение с помощью свойства easing . По умолчанию значение, указанное для easing , также используется при воспроизведении анимации в обратном направлении. Если вы хотите применить другое замедление для обратных анимаций, вы можете установить значение для свойства backwardEasing .
Библиотека mojs имеет 11 различных встроенных функций замедления. Это linear , ease , sin , quad , cubic , quart , quint , expo , circ , back и elastic . Линейное ослабление имеет только один вариант с именем linear.none . Это имеет смысл, потому что анимация будет развиваться с одинаковой скоростью на разных этапах. Все остальные функции замедления имеют три различных варианта с добавлением in , out и inout в конце.
Есть два способа указать функцию замедления для анимации. Вы можете использовать строку, напримерastic.in, или напрямую получить доступ к функциям замедления, используя объект mojs.easing.elastic.inout например mojs.easing.elastic.inout . Во встроенной демонстрации CodePen я применил различные функции замедления к каждой панели, поэтому ее ширина будет меняться с разной скоростью. Это даст вам представление о том, как скорость анимации отличается с каждым замедлением.
|
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 allBoxes = document.querySelectorAll(«.box»);
var animations = new Array();
var easings = [‘ease.in’, ‘sin.in’, ‘quad.in’, ‘cubic.in’, ‘quart.in’, ‘quint.in’, ‘expo.in’, ‘circ.in’, ‘back.in’, ‘elastic.in’];
allBoxes.forEach(function(box, index) {
var animation = new mojs.Html({
el: box,
width: {
0: 550,
duration: 4000,
repeat: 8,
isYoyo: true,
easing: easings[index]
}
});
animations.push(animation);
});
document.querySelector(«.play»).addEventListener(«click», function() {
animations.forEach(function(anim) {
anim.play();
});
});
|
Поскольку мы хотим изменить только функцию замедления, применяемую к каждому блоку, я создал цикл для их итерации, а затем применил функцию easings массива easings . Это предотвращает ненужное дублирование кода. Вы можете использовать ту же технику для анимации нескольких элементов, где значения свойств меняются в зависимости от шаблона.
Управление воспроизведением анимации
Mojs предоставляет множество методов, которые позволяют нам управлять воспроизведением анимации для разных элементов, как только она уже началась. Вы можете приостановить анимацию в любое время, вызвав метод pause() . Точно так же вы можете возобновить любую приостановленную анимацию, вызвав метод resume() .
Анимации, которые были приостановлены с помощью pause() , всегда возобновляются с точки, в которой вы вызвали pause() . Если вы хотите, чтобы анимация начиналась с начала после того, как она была приостановлена, вы должны использовать вместо этого метод stop() .
Вы также можете воспроизводить анимацию в обратном направлении, используя метод playBackward() . Ранее мы использовали свойство speed для управления скоростью, с которой mojs проигрывали анимацию. У Mojs также есть метод setSpeed() который может устанавливать скорость анимации, пока она еще выполняется. В следующем примере я использовал все эти методы для управления воспроизведением анимации на основе нажатий кнопок.
|
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
|
var speed = 1;
var htmlA = new mojs.Html({
el: «.a»,
angleZ: {
0: 720
},
borderRadius: {
0: ‘50%’
},
borderWidth: {
10: 100
},
duration: 2000,
repeat: 9999,
isYoyo: true
});
document.querySelector(«.play»).addEventListener(«click», function() {
htmlA.play();
});
document.querySelector(«.pause»).addEventListener(«click», function() {
htmlA.pause();
});
document.querySelector(«.stop»).addEventListener(«click», function() {
htmlA.stop();
});
document.querySelector(«.faster»).addEventListener(«click», function() {
speed = speed + 1;
htmlA.setSpeed(speed);
document.querySelector(«.data»).innerHTML = «Speed: » + speed;
});
document.querySelector(«.slower»).addEventListener(«click», function() {
speed = speed/2;
htmlA.setSpeed(speed);
document.querySelector(«.data»).innerHTML = «Speed: » + speed;
});
|
В следующей демонстрации текущая скорость воспроизведения анимации показана в черном поле в левом нижнем углу. Нажатие на Faster увеличит текущую скорость на 1, а нажатие на Slower уменьшит вдвое текущую скорость.
Последние мысли
В этом уроке мы узнали, как анимировать различные элементы DOM на веб-странице с помощью модуля HTML в mojs . Мы можем указать элемент, который мы хотим анимировать, используя селектор или узел DOM. Библиотека позволяет анимировать различные свойства преобразования и непрозрачность любого элемента, используя встроенные свойства объекта hjml mojs. Однако вы также можете анимировать другие свойства CSS, указав имя с camelCase нотации camelCase .
JavaScript не лишен своих кривых обучения, и есть множество фреймворков и библиотек, которые также могут вас занять. Если вы ищете дополнительные ресурсы для обучения или использования в своей работе, посмотрите, что у нас есть на Envato Market .
Дайте мне знать, если есть что-то, что вы хотели бы, чтобы я разъяснил в этом уроке. Мы рассмотрим модуль Shape из библиотеки mojs в следующем уроке.