Создание CSS-анимации при помощи Move.js

На сегодняшний день CSS3 является предпочтительным методом создания легковесной анимации и переходных эффектов на веб-сайтах.

К сожалению, многие разработчики считают синтаксис CSS3 -эффектов сложным и запутанным. Если вы тоже так думаете, Move.js может стать для вас идеальным решением.

Move.js – это простая JavaScript-библиотека, которая поможет вам создать CSS3 -анимацию путём вызова функций.

В нашей статье мы дадим обзор основ Move.js и приведём примеры кода, показывающего эту библиотеку в действии.

Основы

Move.js предоставляет простой программный интерфейс для создания CSS3 -анимации. Допустим, у нас есть элемент <div>, помеченный классом « box ».

Мы хотим, чтобы элемент сдвигался вправо на 100 пикселей при наведении на него курсора. В нашем случае CSS код может выглядеть так:

Чтобы получить тот же результат с Move.js , мы просто применим метод set() :

Для начала зайдите в репозиторий Move.js на GitHub и загрузите последнюю версию пакета. Распакуйте файл Move.js в свой рабочий каталог. Теперь включите этот файл в свою HTML-страницу.

Это может выглядеть примерно так:

Мы определили элемент <div> с классом « box » и ссылку с ID=playButton , которая пригодится для нашей демонстрации.

Обратите внимание на то, что использование именно этих стилей и ID никак не связано с Move.js :

Наша страница теперь должна выглядеть так:

Теперь давайте напишем первый сниппет. Мы зададим обработчик события onclick для ссылки playButton , который сдвинет наш прямоугольник вправо.

Код на JavaScript приведён ниже. Фактически, этот код добавляет к CSS -свойствам нашего блока <div> свойство « transform: translateX(300px); »

Полный код нашего примера выглядит так:

В вышеизложенном примере мы увидели метод x() в действии. Теперь давайте познакомимся с другими методами.

Метод set() используется для присваивания CSS -свойству соответствующего значения. Он требует два аргумента: имя свойства и его значение.

add() используется, чтобы увеличить значение свойства. Разумеется, свойство должно принимать числовые значения.

Этот метод требует два аргумента: имя свойства и значение инкремента:

Этот вызов добавит 200 пикселей к предыдущему значению свойства « margin-left ».

Метод sub() является противоположностью add() . Он также принимает два аргумента, только второй аргумент вычитается из текущего числового значения свойства:

Как вы можете предположить, этот метод вращает элемент на количество градусов, переданное ему параметром deg .

Метод использует CSS -свойство « transform ». Например, следующий код повернёт блок на 90 градусов:

Фактически, этот код добавит нашему элементу свойство:

При помощи этого метода вы можете задать время, которое займёт эффект анимации.

Например, этот код прикажет Move.js отодвинуть блок на 200 пикселей вправо за 2 секунды:

Рассмотрим другой пример. Move.js поменяет значение отступа, установит цвет фона и повернёт элемент на 90 градусов за 2 секунды:

Используйте метод translate() , чтобы изменить позицию элемента относительно его текущей позиции, используя координаты, передаваемые в параметрах.

Если передаётся единственный параметр, он используется как координата по оси X . Второй параметр, будучи передан методу, откладывается по оси Y :

Используя метод x() , вы можете задать расположение элемента по оси X . Аналогично, метод y() позволит вам перемещать элемент вертикально.

Оба метода могут принимать как положительные, так и отрицательные значения аргументов:

Этот метод задаст искривление вашего элемента относительно обеих осей координат. Метод может быть разбит на два независимых метода: skewX(x) и skewY(y) :

Этот метод растянет или сожмёт ваш HTML-элемент согласно значению аргумента. Он использует CSS3 -метод scale() свойства transform :

Приведенный выше код увеличит высоту и ширину HTML-элемента в 3 раза.

Если вы знакомы со свойством CSS3 transition , вы наверняка знаете и о функциях семейства ease, которые определяют прорисовку элемента в процессе трансформации.

К ease -функциям относятся in, out, in-out, snap, cubic-bezeir и другие. Эти функции могут быть использованы при помощи Move.js -метода ease() , например:

Этот метод всегда добавляется в конец сниппета с использованием Move.js . Технически этот метод представляет собой триггер, запускающий анимацию.

Метод принимает необязательный аргумент, представляющий собой callback -функцию. Эта функция будет вызвана, когда анимация завершится.

Как можно догадаться по названию, этот метод используется, чтобы задержать запуск анимации на n миллисекунд:

Это – один из важнейших методов Move.js . Он позволяет разделить анимацию на произвольное количество последовательно выполняемых шагов.

Следующий код показывает пример анимации, состоящей из двух шагов, разделённых вызовом then() :

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