Від автора: Різна анімація для іконок з допомогою бібліотеки mo.js дуже потужної бібліотеки анімації від Oleg Solomka. Oleg надихався Dribbble шотом «Like Animation» від Daryl Ginn.
Можливо, ви вже стикалися з mo.js дуже потужною графічною бібліотекою анімації від Oleg Solomka. З її допомогою можна робити тонни дивовижною анімації, і сьогодні ми хотіли б поділитися з вами своєю анімацією іконок.
Було б дійсно добре вміти легко анімувати іконки на зразок лайки в Twitter, а після того, як ми побачили гібрид Dribbble shot від Daryl Ginn (так буде виглядати анімація лайка Twitter, якщо б вона була реалізована в facebook), ми захотіли спробувати поєднати mo.js з веб-шрифтом Font Awesome від Dave Gandy і подивитися, що з цього вийде.
Ми перевели на мову анімації іконки дій, там, де можна спостерігати активний стан. Приміром, «улюблений», «лайк» або «плюс». Чисто теоретично ефекти можна застосувати до будь іконок, але до іконок дій дана анімація підходить набагато краще.
Бібліотека mo.js дійсно дуже проста у використанні. Поки доступний всього один урок, але ви вже можете отримати уявлення про те, як контролювати таймінг функції на елементах. Бібліотека відкриває безліч можливостей і дозволяє створювати складну, реалістичну анімацію. В репозиторії GitHub ви зможете знайти більше інформації, а також допомогти в роботі.
Попередження: Ми створили божевільну, десь безглузду і через-чур складну анімацію! Використовуйте на свій страх і ризик 
Розглянемо приклад. Ми підключили иконочный шрифт Font Awesome і додали іконку кнопку:
В стилях можна скинути пару властивостей і додати розміри кнопки. А анімацію можна задати так:
var scaleCurve = mojs.easing.path(‘M0,100 L25,99.9999983 C26.2328835,75.0708847 19.7847843,0 100,0’);
var el = document.querySelector(‘.icobutton’),
elSpan = el.querySelector(‘span’),
// mo.js timeline obj
timeline = new mojs.Timeline(),
// tweens for the animation:
// burst animation
tween1 = new mojs.Burst({
parent: el,
duration: 1500,
shape : ‘circle’,
fill : [ ‘#988ADE’, ‘#DE8AA0’, ‘#8AAEDE’, ‘#8ADEAD’, ‘#DEC58A’, ‘#8AD1DE’ ],
x: ‘50%’,
y: ‘50%’,
opacity: 0.6,
childOptions: { radius: {20:0} },
radius: {40:120},
count: 6,
isSwirl: true,
isRunLess: true,
easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
}),
// ring animation
tween2 = new mojs.Transit({
parent: el,
duration: 750,
type: ‘circle’,
radius: {0: 50},
fill: ‘transparent’,
stroke: ‘#988ADE’,
strokeWidth: {15:0},
opacity: 0.6,
x: ‘50%’,
y: ‘50%’,
isRunLess: true,
easing: mojs.easing.bezier(0, 1, 0.5, 1)
}),
// icon scale animation
tween3 = new mojs.Tween({
duration : 900,
onUpdate: function(progress) {
var scaleProgress = scaleCurve(progress);
elSpan.style.WebkitTransform = elSpan.style.transform = ‘scale3d(‘ + scaleProgress + ‘,’ + scaleProgress + ‘,1)’;
}
});
// add tweens to timeline:
timeline.add(tween1, tween2, tween3);
// when clicking the button start the timeline/animation:
el.addEventListener. (‘mouseenter’, function() {
timeline.start();
});
Зверніть увагу, що ми використовуємо фіксовані розміри для ефекту. У більш гнучкому варіанті можна задавати розміри динамічно. А тепер зробіть свою анімацію; можливості безмежні! Сподіваємося, вам сподобалася анімація, і на її основі ви придумаєте щось своє! Проект на Github.
