Анимация иконок при помощи скрипта Mo.js

Возможно вы слышали о 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 = new mojs.Timeline(), 

// -- Анимация -- //

// “взрыв” 
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) 
}),

// “кольцо”
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)
}),

// масштабирование 
tween3 = new mojs.Tween({
    duration : 900, 
    onUpdate: function(progress) { 
        var scaleProgress = scaleCurve(progress);
        elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(' + scaleProgress + ',' + scaleProgress + ',1)'; 
    }
});

// -- Добавляем эффекты: -- // 
timeline.add(tween1, tween2, tween3);

// -- При клике по кнопке активируем анимацию: -- //
el.addEventListener('mouseenter', function() {
    timeline.start();
});

Надеемся, данный пост будет вам полезен.

Источник урока: http://tympanus.net/codrops/2016/02/23/icon-animations-powered-by-mo-js/
Перевел: Станислав Протасевич, Источник
Исходники, демо

 

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


Защитный код
Обновить