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

В первом и втором уроках этой серии рассказывалось, как анимировать различные элементы HTML и формы SVG с помощью mojs. В этом уроке мы узнаем еще о двух модулях, которые могут сделать нашу анимацию более интересной. Модуль ShapeSwirl позволяет добавлять вихревое движение к любой фигуре, которую вы создаете. Модуль stagger , с другой стороны, позволяет создавать и анимировать сразу несколько фигур.

Использование модуля ShapeSwirl

Модуль ShapeSwirl в mojs имеет конструктор, который принимает все свойства модуля Shape . Он также принимает некоторые дополнительные свойства, которые позволяют ему создавать вихревое движение.

Вы можете указать амплитуду или размер вихря, используя свойство swirlSize . Частота колебаний во время вихревого движения определяется значением свойства swirlFrequency . Вы также можете уменьшить общую длину пути закрученной формы, используя свойство pathScale . Допустимые значения для этого свойства находятся в диапазоне от 0 до 1. Направление движения может быть указано с помощью свойства direction . Помните, что direction имеет только два допустимых значения: -1 и 1. По умолчанию фигуры в вихревом движении будут следовать по синусоидальной траектории. Однако вы можете анимировать их по прямым линиям, установив для свойства isSwirl значение false .

Помимо этих дополнительных свойств, модуль ShapeSwirl также изменяет значение по умолчанию для некоторых свойств из модуля Shape . radius любой вихревой формы по умолчанию равен 5. Точно так же свойство scale установлено анимированным от 1 до 0 в модуле ShapeSwirl .

В следующем фрагменте кода я использовал все эти свойства для анимации двух кругов в вихревом движении.

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

Использование модуля Stagger

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

После того, как вы обернули модуль Shape внутри функции stagger() , вы сможете указать количество элементов для анимации с помощью свойства quantifier . После этого вы можете указать значение всех других связанных с Shape свойств. Теперь для каждого свойства станет возможным принимать массив значений, которые будут последовательно применяться к отдельным фигурам. Если вы хотите, чтобы все фигуры имели одно и то же значение для определенного свойства, вы можете просто установить свойство равным этому конкретному значению вместо массива значений.

Следующий пример должен прояснить, как значения присваиваются различным фигурам:

Мы начнем с обертывания модуля Shape внутри функции stagger() . Это позволяет нам создавать несколько фигур одновременно. Мы установили значение свойства quantifier равным 5. Это создаст пять различных фигур, которые в нашем случае являются полигонами. Каждый многоугольник является треугольником, потому что значение по умолчанию для свойства points равно 3. Мы уже рассмотрели все эти свойства во втором уроке серии.

Существует только одно значение fill , stroke и strokeWidth . Это означает, что все треугольники будут заполнены желтым цветом и будут иметь черный штрих. Ширина обводки в каждом случае будет 5 пикселей. Значение свойства radius , с другой стороны, представляет собой массив из пяти целых чисел. Каждое целое число определяет радиус одного треугольника в группе. Значение 20 присваивается первому треугольнику, а значение 60 присваивается последнему треугольнику.

Все свойства до сих пор имели одинаковые начальные и конечные значения для отдельных треугольников. Это означает, что ни одно из свойств не будет анимированным. Однако значением свойства x является массив объектов, содержащий начальное и конечное значение горизонтальной позиции каждого треугольника. Первый треугольник изменится с x:0 на x:100 , а последний треугольник будет с x:0 на x:300 . Продолжительность анимации в каждом случае будет 2000 миллисекунд.

Если между различными значениями свойства есть фиксированный шаг, вы также можете использовать ступенчатые строки для указания начального значения и приращений. Ступенчатые строки принимают два параметра. Первым является start значение, которое назначается первому элементу в группе. Второе значение — это step , который определяет увеличение или уменьшение значения для каждой последующей фигуры. Когда в строку разброса передается только одно значение, оно считается step , а start значение в этом случае принимается равным нулю.

Приведенный выше пример треугольника можно переписать так:

Вы также можете назначать случайные значения различным фигурам в группе, используя строки rand. Вам просто нужно указать минимальное и максимальное значение для строки ранда, и mojs автоматически назначит значение между этими ограничениями отдельным фигурам в группе.

В следующем примере мы используем строки rand, чтобы случайным образом установить количество точек для каждого многоугольника. Возможно, вы заметили, что общее количество отображаемых полигонов составляет 25, но массив fill имеет только четыре цвета. Когда длина массива меньше значения quantifier , значения для разных фигур определяются путем непрерывного циклического перемещения по массиву до тех пор, пока всем фигурам не будет присвоено значение. Например, после назначения цвета первых четырех многоугольников цвет пятого многоугольника будет оранжевым, цвет шестого многоугольника будет желтым и т. Д.

Пошаговая строка устанавливает радиус первого многоугольника равным 10, а затем продолжает увеличивать радиус последующих многоугольников на 1. Горизонтальное положение каждого многоугольника аналогичным образом увеличивается на 20, а вертикальное положение определяется случайным образом. Конечное значение angle для каждого многоугольника произвольно устанавливается между -120 и 120. Таким образом, некоторые многоугольники вращаются по часовой стрелке, а другие вращаются против часовой стрелки. Анимация угла также имеет собственную функцию замедления, которая отличается от обычной анимации других свойств.

Последние мысли

В этом уроке мы рассмотрели еще два модуля mojs. Модуль ShapeSwirl позволяет нам анимировать различные формы в вихревом движении. Модуль stagger позволяет нам анимировать несколько элементов формы одновременно.

Каждая фигура в stagger группе может быть анимирована независимо без вмешательства других фигур. Это делает модуль stagger невероятно полезным. Мы также узнали, как использовать пошаговые строки для назначения значений с фиксированными шагами свойствам различных форм.

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

Для получения дополнительных ресурсов для изучения или использования в вашей работе, посмотрите, что у нас есть на Envato Market .