Статьи

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

Сентябрь 21, 2018

CSS3 переходы и анимация в настоящее время являются предпочтительным методом для создания облегченной анимации на веб-сайтах. К сожалению, многие разработчики считают их синтаксис сложным и запутанным. Если это звучит как вы, Move.js может быть идеальным решением для вас. Move.js — это простая библиотека JavaScript, которая создает CSS3-анимацию с использованием простых функций. В этом руководстве рассматриваются основы Move.js и представлена ​​живая демонстрация Move in action.

Основы

Move.js предоставляет упрощенный JavaScript API для создания CSS3-анимации. Давайте предположим, что у нас есть элемент divbox Мы хотим переместить его на 100px слева, когда оно наведено. В этом случае наш код 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-страницу. Пример HTML-файла с включенным Move.js должен выглядеть примерно так: 

 <!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>

Мы определили элемент divboxplayButton Давайте создадим новый файл styles.css Обратите внимание, что эти стили не нужны 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;
}

Наша HTML-страница должна теперь выглядеть следующим образом.

введите описание изображения здесь

Теперь давайте напишем наш первый фрагмент Move.js. Нам нужно прикрепить обработчик onclick Код JavaScript для этого устройства показан ниже. Этот код добавляет transform: translateX(300px); к элементу box 

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

Полный код после добавления кода 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>
    <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() Теперь давайте узнаем о некоторых других методах Move.js.

set(prop, val)

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

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

add(prop, val)

add() Свойство должно принимать числовые значения, чтобы его можно было увеличивать. Этот метод принимает два аргумента: свойство CSS и сумму приращения. 

 .add('margin-left', 200)

Когда предыдущий фрагмент вызывается, он добавляет 200px к существующему значению.

sub(prop, val)

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

 .sub('margin-left', 200)

rotate(deg)

Как следует из названия, этот метод вращает элемент на сумму, указанную в качестве аргумента. Этот метод присоединяет свойство CSS transform Например, следующий код поворачивает элемент на 90 градусов. 

 .rotate(90)

Этот код добавит следующий элемент CSS к элементу HTML. 

 transform: rotate(90deg);

duration(n)

Используя этот метод, вы можете указать, сколько времени должна занять анимация. Например, следующий код указывает Move.js переместить поле на 200 пикселей слева в течение двух секунд. 

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

Давайте посмотрим на другой пример. В следующем коде Move.js изменит поле, установит цвет фона и повернет элемент на 90 градусов в течение двух секунд. 

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

translate(x[, y])

translate() Если указан только один аргумент, он будет использоваться как x-координата. Если указан второй аргумент, он используется как координата y. 

 .translate(200, 400)

x()y()

Используя x() Точно так же y() Оба метода принимают положительные и отрицательные значения. 

 .x(300)
.y(-20)

skew(x, y)

skew() Этот метод может быть разделен на skewX(deg)skewY(deg) 

 .skew(30, 40)

scale(x, y)

Этот метод увеличивает или сжимает размер HTML-элемента в соответствии с предоставленным ему значением. Он использует метод scale 

 .scale(3, 3)

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

ease(fn)

Если вы использовали переходы CSS3, вы знаете о функции easetransition Это определяет поведение перехода. Различные функции easeinoutin-outsnapcubic-bezeirease() Например: 

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

end()

Этот метод используется в конце фрагмента Move.js. Это отмечает конец анимации. Технически, этот метод запускает анимацию для воспроизведения. Метод end() Пример показан ниже. 

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

delay(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.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 также может помочь вам правильно организовать весь анимационный код в одном месте. Каждый раз, когда вы хотите исправить анимацию, вы знаете, где она находится!

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

Если у вас есть предложения или вопросы, связанные с этой статьей, пожалуйста, оставьте комментарий ниже. Мы будем рады услышать от вас. Удачного кодирования!

45
Share: