Анимация иконок с помощью mo.js

Анимация иконок с помощью mo.js

От автора: Различная анимация для иконок с помощью библиотеки 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 и добавили иконку в кнопку:

<button class="icobutton icobutton--thumbs-up">
	<span class="fa fa-thumbs-up"></span>
</button>

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

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

Источник: http://tympanus.net/

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree