Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Code
  2. JavaScript

Начинаем работу с библиотекой анимации Mojs: модуль HTML

by
Read Time:10 minsLanguages:
This post is part of a series called Getting Started with Mojs Animation Library.
Getting Started With the Mojs Animation Library: The Shape Module

Russian (Pусский) translation by Anna k.Ivanova (you can also view the original English article)

Чтобы сделать свои целевые страницы более привлекательными, многие веб-сайты теперь используют какую-то анимацию. К счастью, существует множество библиотек, которые позволяют вам анимировать элементы на веб-странице. В этом уроке вы узнаете об одной такой библиотеке, называемой mojs.

Библиотека очень проста в использовании благодаря ее простому декларативному API. Анимации, которые вы можете создать с помощью mojs, будут гладкими и подходящими для экрана ретина так, чтобы все выглядело профессионально.

Установка Mojs

Есть много способов включить mojs в ваши проекты. Вы можете скачать библиотеку из ее репозитория GitHub. Кроме того, вы можете напрямую включить ссылку на последнюю версию библиотеки из разных CDN в вашем проекте.

Разработчики также могут устанавливать mojs с помощью менеджеров пакетов, таких как npm и bower, выполнив следующую команду:

После того, как вы включили библиотеку в свой проект, вы можете начать использовать разные модули для создания интересных анимаций.

Модуль HTML в Mojs

В этом уроке основное внимание будет уделено модулю HTML в библиотеке mojs. Этот модуль можно использовать для анимации различных HTML-элементов на веб-странице.

Первое, что вам нужно сделать, чтобы анимировать элемент DOM, - создать объект Html. Вы можете указать селектор элемента и его свойства, которые вы хотите оживить внутри этого объекта.

Установка значения для 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. Подобно durationdelay также ожидает, что его значение будет числом.

Анимации можно повторять несколько раз с помощью свойства repeat. Его значение по умолчанию равно нулю, что означает, что анимация будет воспроизводиться только один раз. Установка его на 1 будет воспроизводить анимацию дважды, а установка ее на 2 будет воспроизводить анимацию три раза. После того, как анимация завершит свою первую итерацию, элемент вернется в исходное состояние и снова запустит анимацию (если вы установили значение свойства repeat). Этот внезапный скачок от конечного состояния до исходного состояния может быть нежелательным.

Если вы хотите, чтобы анимация воспроизводилась назад, как только она достигла конечного состояния, вы можете установить значение свойства isYoyo равным true. По умолчанию установлено значение false. Наконец, вы можете установить скорость, с которой анимация должна воспроизводиться с использованием свойства speed. Его значением по умолчанию является 1. Установка его на 2 будет воспроизводить анимацию в два раза быстрее. Точно так же, установив его на 0,5, будет воспроизводиться анимация на половине скорости.

Созданные вами объекты mojs Html не будут анимировать соответствующие элементы сами по себе. Вам нужно будет вызвать метод play() для каждой анимации Html mojs, которую вы хотите воспроизвести. Вот пример, который анимирует три разных блока, используя все свойства, которые мы только что обсуждали:

Вы не ограничены просто анимацией свойств преобразования элемента. Библиотека анимации mojs позволяет вам анимировать все другие анимационные свойства CSS. Вам просто нужно убедиться, что вы предоставили для них действительные начальные и конечные значения. Например, вы можете анимировать фоновый цвет элемента, указав допустимые значения для background.

Если свойство CSS, которое вы хотите оживить, содержит дефис, вы можете удалить дефис и преобразовать имя свойства в camelCase при установке начального и конечного значений внутри объекта mojs Html. Это означает, что вы можете анимировать border-radius, установив допустимое значение для свойства borderRadius. Следующий пример это продемонстрирует:

В приведенном выше примере цвет границы изменяется от черного до красного, а радиус границы - от 0 до 50%. Следует отметить, что единичное число будет считаться значением пикселя, а число с единицами должно быть указано как строка, например, «50%».

До сих пор мы использовали один набор свойств твинов для управления воспроизведением различных анимаций. Это означало, что для перехода от x:0 до x:200 потребуется один и тот же момент, поскольку он будет масштабироваться по scale:1 до scale:2.

Это может быть нежелательным поведением, так как вам может потребоваться delay анимацию некоторых свойств и контролировать их duration. В таких случаях вы можете указать параметры воспроизведения анимации для каждого свойства внутри самого объекта свойства.

Ослабляющие функции, доступные в Mojs

У каждой анимации, которую вы создадите, будет применена функция sin.out, применяемая по умолчанию. Если вы хотите, чтобы воспроизведение анимации продолжалось с использованием другой функции ослабления, вы можете указать его значение, используя свойство easing. По умолчанию значение, указанное для easing, также используется, когда анимация воспроизводится в обратном направлении. Если вы хотите применить другое облегчение для обратных анимаций, вы можете установить значение свойства backwardEasing.

Библиотека mojs имеет 11 различных встроенных функций ослабления. Они linearease, sin quadcubicquartquintexpocircback и elastic. Линейное ослабление имеет только одну вариацию с именем linear.none. Это имеет смысл, потому что анимация будет прогрессировать с одинаковой скоростью на разных этапах. Все остальные функции ослабления имеют три разных варианта: in, out и inout добавляются в конце.

Существует два способа указать функцию ослабления анимации. Вы можете использовать строку типа elastic.in, или вы можете получить доступ к функциям ослабления напрямую, используя объект mojs.easing, например mojs.easing.elastic.inout. Во встроенной демо-версии CodePen я применил различные функции ослабления на каждом баре, чтобы его ширина изменилась в разном темпе. Это даст вам представление о том, как скорость анимации отличается с каждым ослаблением.

Поскольку мы хотим только изменить функцию ослабления, применяемую к каждому ящику, я создал цикл для итерации по ним, а затем применил функцию ослабления, выбранную из массива easions. Это предотвращает ненужное дублирование кода. Вы можете использовать один и тот же метод для анимации нескольких элементов, где значения свойств изменяются в зависимости от шаблона.

Управление воспроизведением анимации

Mojs предоставляет множество методов, которые позволяют нам управлять воспроизведением анимации для разных элементов. Вы можете приостановить анимацию в любое время, вызвав метод pause(). Аналогично, вы можете возобновить любую приостановленную анимацию, вызвав метод resume().

Анимации, которые были приостановлены с помощью функции pause(), всегда будут возобновляться с точки, в которой вы вызывали pause(). Если вы хотите, чтобы анимация начиналась с самого начала после ее приостановки, вы должны использовать метод stop().

Вы также можете воспроизвести анимацию назад, используя метод playBackward(). Раньше мы использовали свойство speed для управления скоростью, с которой mojs воспроизводили анимацию. Mojs также имеет метод setSpeed(), который может установить скорость анимации, пока он все еще продолжается. В следующем примере я использовал все эти методы для управления воспроизведением анимации на основе щелчков кнопок.

В следующей демонстрации текущая скорость воспроизведения анимации отображается в черном поле в нижнем левом углу. Нажатие на Faster увеличит текущую скорость на 1, а нажатие на Slower уменьшит вдвое текущую скорость.

Заключение

В этом уроке мы узнали, как анимировать различные элементы DOM на веб-странице, используя модуль HTML в mojs. Мы можем указать элемент, который мы хотим оживить, используя либо селектор, либо элемент DOM. Библиотека позволяет анимировать различные свойства преобразования и прозрачность любого элемента, используя встроенные свойства объекта mojs Html. Однако вы также можете анимировать другие свойства CSS, указав имя, используя нотацию camelCase.

JavaScript не лишен кривых обучения, и есть много фреймворков и библиотек, которые также будут вам интересны. Если вы ищете дополнительные ресурсы для изучения или использования в своей работе, посмотрите, что у нас есть на рынке Envato.

Дайте мне знать, если вы хотите, чтобы я более подробно расписал этот учебник. Мы рассмотрим модуль Shape из библиотеки mojs в следующем учебнике.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.