Dynamics.js — проста бібліотека для створення анімації

17

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

Dynamics.js — проста бібліотека для створення анімаціїDynamics.js — проста бібліотека для створення анімації

Установка бібліотеки

Для установки бібліотеки переходимо на офіційний сайт http://dynamicsjs.com/ і клікаєм по посиланню Download:

Dynamics.js — проста бібліотека для створення анімації

Далі нас перенаправляють на сервіс github, де можна завантажити актуальну версію бібліотеки.

Dynamics.js — проста бібліотека для створення анімації

Після скачування бібліотеки, яка являє собою файл dynamics.js, скопіюємо її в папку тестового сайту, де зберігаються скрипти JavaScript. Після цього підключаємо файл dynamics.js до сторінки, на якій буде відображатися анімація.

Так само підключаємо порожній файл script.js, в якому ми будемо вести кодування на мові javascript/

Для даного уроку ми використовуємо дуже просту сторінку з єдиною кнопкою, для якої ми і будемо створювати анімації.

Використання бібліотеки

Для початку роботи необхідно вибрати блок, для якого буде додаватися певний анімаційний ефект. Для цього в файл script.js додамо наступний код:

var el = document.querySelector(‘.button img’);

Тобто вибираємо кнопку на тестовій сторінці, використовуючи селектор ‘.button img’. При цьому вибраний елемент зберігається в зміною el. Основою бібліотеки dynamics.js є метод animate(el, properties, options), який визначає анімаційний ефект і запускає його в роботу. В якості параметрів при виклику цього методу необхідно передати наступне:

el – елемент для якого буде застосовано анімаційний ефект;

properties – об’єкт властивостей, які задають анімаційний ефект. В якості властивостей вказуються правила CSS і відповідно їх значення. При цьому у вибраного елемента, спочатку вже було визначено певний набір правил і, задаючи нові, ми формуємо анімацію, так як застосування нових правил буде виконано не миттєво, а з заданим темпом – тобто, з певною анімацією;

options — об’єкт параметрів анімації.

Тепер давайте звернемося до методу animate() і створимо першу анімацію:

dynamics.animate(el,
{
translateX:150,
translateY:150,
scale:2,
rotate:’60deg’,
skewX:10,
skewY:50
},
{
}
);

Dynamics.js — проста бібліотека для створення анімації

Як Ви бачите в якості другого параметра передається об’єкт, з правилами CSS, які в сукупності і визначають анімаційний ефект. Далі, на офіційному сайті є не велика презентація можливостей бібліотеки, яка наочно показує, як можна змінювати тип анімації, керуючи опціями третього параметра методу animate().

Dynamics.js — проста бібліотека для створення анімації

В бібліотеці визначені кілька стандартних типів анімації: dynamics.spring, dynamics.bounce, dynamics.gravity, dynamics.forceWithGravity, dynamics.bezier, dynamics.easeInOut, dynamics.easeIn, dynamics.easeOut, dynamics.linear

Наприклад, використовуємо тип анімації dynamics.bounce:

dynamics.animate(el,
{
translateX:150,
translateY:150,
scale:2,
rotate:’60deg’,
skewX:10,
skewY:50
},
{
type:dynamics.bounce
}
);

Також можна самостійно визначити тип анімації, використовуючи параметри:

dynamics.animate(el,
{
translateX:150,
translateY:150,
scale:2,
rotate:’60deg’,
skewX:10,
skewY:50
},
{
type:dynamics.spring,
frequency: 8000,
friction: 200,
duration:2000,
anticipationSize: 150,
anticipationStrength: 200,
}
);

При цьому:

frequency: частота коливань;

friction: амплітуда коливань;

duration: час виконання анімації;

anticipationSize: зсув початкової точки анімації;

anticipationStrength: амплітуда коливання перед початком анімації.

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

var el = document.querySelector(‘.button img’);
dynamics.animate(el,
{
translateX:150,
translateY:150,
scale:2,
rotate:’60deg’,
skewX:10,
skewY:50
},
{
type:dynamics.sprin,
frequency: 8000,
friction: 200,
duration:2000,
anticipationSize: 150,
anticipationStrength: 200,
complete:foo
}
);
function foo () {
dynamics.animate(el,{translateX:-150},{type:dynamics.linear,duration:2000,});
}

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