Бібліотека Move.js — зручний інструмент CSS анімацій

11.02.2020

Від автора: досить часто при розробці веб-додатків необхідно використовувати різні анімаційні ефекти для відображення певних блоків. Тому в даному уроці я хотів би розповісти Вам про одну дуже цікавою бібліотеці, завдяки якій можна швидко і легко створювати CSS-анімації, назва цієї бібліотеки MOVE.js.

Установка

Move.js — це невелика бібліотека, написана на мові JavaScript, використовуючи функції якої, можна дуже швидко і просто створювати різні анімаційні ефекти. При цьому використовується анімації мови каскадних таблиць стилів CSS3. Для установки бібліотеки, необхідно перейти за посиланням https://github.com/visionmedia/move.js/ і клікнути по посиланню Download ZIP.

Після розпакування скачаного архіву Ви отримаєте папку move.js-master, в якій міститься файл move.js – це і є, що цікавить нас бібліотека (або файл move.min.js – стисла версія бібліотеки). Також зверніть увагу, що на даній сторінці є посилання на документацію по даній бібліотеці — http://visionmedia.github.io/move.js/:

Далі підключаємо файл до певної сторінці можна використовувати функціонал бібліотеки.

Зверніть увагу, що розробники рекомендують підключати дану бібліотеку перед закриваючим тегом . Також для роботи бібліотеки необхідна бібліотека jQuery, яку можна завантажити з офіційного сайту http://jquery.com.

Початок роботи з бібліотекою

Для сьогоднішнього уроку я створив просту html сторінку з наступним кодом:

Move.js

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset containing sheets Lorem

jQuery(«document»).ready(function($) {
$(‘.button’).click(function() {
});
})

Блок з класом content – буде використовуватися для тестування анімації. Кнопка з класом button , необхідна для запуску анімації. Зверніть увагу, що викликаючи метод click, я описав анонімну функцію, яка буде викликатися при спрацьовуванні події click по кнопці, у тілі даної функції, і ми будемо вести подальше кодування. Отже, для початку, необхідно вибрати блок, з яким ми будемо працювати:

move(‘.content’)
.end();

Вибір блоку здійснюється стандартними селекторами CSS. Метод end(), викликається в кінці ланцюжка методів формують анімаційний ефект, так як запускає анімацію в роботу. Так само в якості параметра, при виклику методу end(), можна передати анонімну функцію, яка виконає певні дії по завершенню анімаційних ефектів.

Методи бібліотеки

Метод set(‘param’,’val’) – встановлює значення — val правила CSS — param. Наприклад, для вибраного блоку, встановимо зелений колір фону, і покажемо його на екран (так як спочатку він був прихований правилом ‘непрозорість’ була передана 1).

move(‘.content’)
.set(‘background-color’,’green’)
.set(‘непрозорість’,1)
.end();

Метод add(prop, val) – додає (инкрементирует) значення – val у правилі – prop. При цьому значення повинно бути цілочисельного типу (при цьому даний метод можна використовувати багаторазово).

move(‘.content’)
.add(‘margin-left’,200)
.end();

Метод sub(prop, val) – зменшує (декрементирует) значення – val у правилі – prop. При цьому значення повинно бути цілочисельного типу (при цьому даний метод можна використовувати багато кратно).

move(‘.content’)
. sub(‘margin-left’,200)
.end();

Метод rotate(deg) – повертає обраний блок, на значення – deg (дане значення у градусах). Наприклад, поворот блоку на один оборот

move(‘.content’)
. rotate(360)
.end();

Метод duration(n) – задає час виконання анімаційних ефектів. При цьому передавати в якості параметра, можна кількість мілісекунд – виконання анімації, а також рядок виду – ‘5s’, тобто 5 секунд.

move(‘.content’)
.duration(‘5s’)
.end();

Метод translate(x[, y]) – переміщує обраний блок на певну кількість пікселів по осі абсцис – x, і, якщо необхідно, на визначену кількість пікселів по осі ординат – y.

move(‘.content’)
.translate(200,100)
.end();

Методи x(n) / y(n) – переміщують обраний блок на певну кількість пікселів по осі абсцис, і по осі ординат відповідно.

move(‘.content’)
.x(200)
.y(10)
.end();

Метод skew(x[, y]) – нахиляє обраний блок на певний кут по осі абсцис – x, і, якщо потрібно, на певний кут по осі ординат – y.

move(‘.content’)
.skew(10,30)
.end();

Метод scale(x[, y]) – масштабує обраний блок з коефіцієнтом – х, по осі абсцис, і, якщо необхідно, з коефіцієнтом – y, на осі ординат.

move(‘.content’)
.scale(.5)
.end();

Метод delay(n) – задає час затримки – n перед початком виконання анімації.

move(‘.content’)
.delay(‘2s’)
.end();

Метод then() – дозволяє розбити анімацію на кілька кроків, таким чином можна поетапно маніпулювати обраним блоком. Але якщо Ви створюєте покрокову анімацію з використанням методу then(), і при цьому на різних кроках використовуються методи, що впливають на одні і ті ж правила CSS – необхідно використовувати метод pop(), який застосовується для повернення батька поточного об’єкта Move в ланцюжку викликаються методів. При цьому метод pop(), можна використовувати кілька разів, але не більше, ніж кількість викликаються методів than().

Наприклад, можна створити анімацію, що складається з трьох кроків:

move(‘.content’)
.set(‘background-color’,’green’)
.set(‘непрозорість’,1)
.x(500)
.rotate(360)
.scale(.5)
.duration(‘2s’)
.ease(‘ease-in-out-back’)
.then()
.delay(‘2s’)
.rotate(270)
.scale(3.5)
.set(‘background-color’,’white’)
.then()
.set(‘непрозорість’,0)
.pop()
.pop()
.end();