Від автора: досить часто при розробці веб-додатків необхідно використовувати різні анімаційні ефекти для відображення певних блоків. Тому в даному уроці я хотів би розповісти Вам про одну дуже цікавою бібліотеці, завдяки якій можна швидко і легко створювати 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

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();

На цьому даний урок завершено. Всього Вам доброго і вдалого кодування!!!