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

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

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

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

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

Основы

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

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

.box {
  -webkit-transition: margin 1s;
  -moz-transition: margin 1s;
  -o-transition: margin 1s;
  transition: margin 1s;
}
.box:hover {
  margin-left: 100px;
}

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

move('.box')
  .set('margin-left', 100)
  .end();

Приступим

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Move.js Demo</title>
    <link rel="stylesheet" type="text/css" href="styles.css"> 
  </head>
  <body>
    <a href="#" id="playButton">Play</a>
    <div class="box"></div>
    <script type="text/javascript" src="js/move.js"></script>
  </body>
</html>

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

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

.box {
  margin: 10px;
  width: 100px;
  height: 100px;
  background: #7C9DD4;
  box-shadow: 5px 5px 0px #D1D1D1;
}
#playButton {
  display: block;
  font-size: 20px;
  margin: 20px 10px;
  font-weight: bold;
  color: #222;
  text-decoration: none;
}

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

страница

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

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

document.getElementById('playButton').onclick = function(e) {
  move('.box')
    .x(300)
    .end();
};

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

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Move.js Demo</title>
    <link rel="stylesheet" type="text/css" href="styles.css"> 
  </head>
  <body>
    <a href="#" id="playButton">Play</a>
    <div class="box"></div>
    <script type="text/javascript" src="js/move.js"></script>
    <script type="text/javascript">
      document.getElementById('playButton').onclick = function(e){
        move('.box')
          .x(300)
          .end();
      };
    </script>
  </body>
</html>

CSS:

.box {
  margin-left: 10px;
  width: 100px;
  height: 100px;
  background: #7C9DD4;
  box-shadow: 5px 5px 0px #D1D1D1;
}
#playButton {
  display: block;
  font-size: 20px;
  margin: 20px 10px;
  font-weight: bold;
  color: #222;
  text-decoration: none;
}

Методы Move.js

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

set(prop, val)

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

Примеры использования:

.set('background-color', '#CCC')
.set('margin-left', 500)
.set('color', '#222')

add(prop, val)

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

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

.add('margin-left', 200)

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

sub(prop, val)

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

.sub('margin-left', 200)

rotate(deg)

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

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

.rotate(90)

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

transform: rotate(90deg);

duration(n)

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

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

.set('margin-left', 200)
.duration('2s')

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

.set('margin-left', 200)
.set('background-color', '#CCC')
.rotate(90)
.duration('2s')

translate(x[, y])

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

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

.translate(200, 400)

x() и y()

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

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

.x(300)
.y(-20)

skew(x, y)

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

.skew(30, 40

scale(x, y)

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

.scale(3, 3)

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

ease(fn)

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

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

.ease('in').x(400)
.ease('cubic-bezier(0,1,1,0)').x(400)

end([callback])

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

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

Пример использования:

move('.box')
  .set('background-color', 'red')
  .duration(1000)
  .end(function() {
    alert("Animation Over!");
  });

delay(n)

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

move('.box')
  .set('background-color', 'red')
  .delay(1000)
  .end();

then()

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

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

move('.box')
  .set('background-color', 'red')
  .x(500)
  .then()
  .y(400)
  .set('background-color', 'green')
  .end();

Создание сложной анимации с использованием Move.js

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

Следующий код прояснит основные концепции Move.js. Полностью эта анимация представлена на демо-странице.

Код приведён ниже:

move('.square')
  .to(500, 200)
  .rotate(180)
  .scale(.5)
  .set('background-color', '#FF0551')
  .set('border-color', 'black')
  .duration('3s')
  .skew(50, -10)
  .then()
  .set('opacity', 0)
  .duration('0.3s')
  .scale(0.1)
  .pop()
  .end();

Заключение

Мы надеемся, что эта статья объяснила вам, что такое Move.js и каким образом данная библиотека создаёт CSS3-анимацию.

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

Перевод статьи «Creating CSS Animations Using Move.js» был подготовлен дружной командой проекта Сайтостроение от А до Я.