От автора: Различная анимация для иконок с помощью библиотеки 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 и добавили иконку в кнопку:
1 2 3 |
<button class="icobutton icobutton--thumbs-up"> <span class="fa fa-thumbs-up"></span> </button> |
В стилях можно сбросить пару свойств и добавить размеры кнопки. А задать анимацию можно так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
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.
Автор: Mary Lou
Источник: //tympanus.net/
Редакция: Команда webformyself.
* Признана экстремистской организацией и запрещена в Российской Федерации.