Блог Андрея Юрченко

Авторский блог с полезными статьями по темам: создание сайта, заработок на сайте, заработок в интернете, работа на дому, работа в интернете, инфобизнес

Эффекты анимации иконок с помощью mo.js

В этой статье мы рассмотрим как можно преобразовать иконки на вашем ресурсе и добавить к ним эффект анимации при клике. В предыдущей статье мы уже разбирали, как можно создать красивые эффекты для иконок, которые были созданы на чистом CSS.

анимация, веб дизайн, эффекты css3

Возможно, вам уже приходилось сталкиваться с mo.js. Это довольно мощная библиотека графической анимации, с помощью которой можно делать множество различной анимации. Вот об этом мы поговорим сегодня.

Представьте, что вы умеете хорошо создавать различную анимацию, и ваш ресурс может круто преобразиться. Ниже мы рассмотрим пример, в котором совмещены mo.js и веб-шрифт Font Awesome.

Библиотека mo.js довольно проста в использовании и с ее помощью применить эффекты можно практически к любым иконкам. Она открывает множество возможностей и позволяет создавать довольно сложную, но очень реалистичную анимацию

Ну что, давайте рассмотрим пример. Для начала нужно подключить шрифт иконок 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(),

// 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);

В данном примере можно получить представление, как происходит контроль тайминг функции. Используются фиксированные размеры для эффекта, но в более гибком варианте можно задать размеры динамически.

Теперь вы можете сделать свою анимацию и возможно придумаете что-то свое и более интересное. Демо-пример можно посмотреть по ссылке ДЕМО. Скачать исходники можно там же, кликнув на уголке в правом верхнем углу страницы.

На этом все, надеюсь статья понравилась и Вы не забудите поделиться ею с друзьями в сети, понажимав на кнопочки ниже.

С уважением, Андрей Юрченко

Поделитесь статьей в социальных сетях!

Подпишись на RSS-рассылку и получай новые статьи на почту!

Введите свой e-mail:

МАГИЧЕСКИЙ ШАБЛОН ПОДПИСНОЙ СТРАНИЦЫ В ПОДАРОК, ЗАБИРАЙТЕ

Оставить комментарий:

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

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

Content Tab Three

Блог Андрея Юрченко © 2016

ВВЕРХ