Анімація іконок з допомогою

Можливо, ви вже стикалися з mo.js. дуже потужною бібліотекою графічної анімації від Oleg Solomka. З її допомогою можна робити тонни дивовижною анімації, і сьогодні ми хотіли б поділитися з вами своєю анімацією іконок.

Було б дійсно добре вміти легко анімувати іконки на зразок лайка в Twitter, а після того, як ми побачили гібрид Dribbble shot від Daryl Ginn (так буде виглядати анімація лайка Twitter, якби вона була реалізована в facebook), ми захотіли спробувати поєднати mo.js з веб-шрифтом Font Awesome від Dave Gandy і подивитися, що з цього вийде.

Ми анімували іконки дій, там, де можна спостерігати активний стан. Наприклад, «улюблений», «лайк» або «плюс». Чисто теоретично ефекти можна застосувати до будь-яких іконка, але до іконок дій дана анімація підходить набагато краще.

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

Попередження: Ми створили божевільну, десь безглузду і через-чур складну анімацію! Використовуйте на свій страх і ризик

Розглянемо приклад. Ми підключили іконочние шрифт Font Awesome і додали іконку в кнопку:

У стилях можна скинути пару властивостей і додати розміри кнопки. А задати анімацію можна так:

Зверніть увагу, що ми використовуємо фіксовані розміри для ефекту. У більш гнучкому варіанті можна задавати розміри динамічно. А тепер зробіть свою анімацію; можливості безмежні! Сподіваємося, вам сподобалася анімація, і на її основі ви придумаєте щось своє! Проект на Github.

Редакція: Команда webformyself.

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі