簡要教程
這是一款基于mo.js制作的一組炫酷圖標動畫特效。這組圖標動畫共有17種效果，它們使用font-awesome作為圖標，采用SVG技術，在用戶點擊圖標時產生各種炫酷的圖標動畫特效。
mo.js是Oleg Solomka開發的一款圖形動畫javascript庫。通過它你可以制作出非常有趣的圖形動畫效果。
使用方法
HTML結構
圖標的HTML結構使用一個按鈕來包裹一個Font Awesome圖標。
制作圖標動畫
然后你就可以通過mo.js提供的方法來制作動畫特效。
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 = scaleCurve4(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();
}); 關于mo.js的詳細使用方法，你可以參考它的官方網站：mo.js。
來源http://www.htmleaf.com/html5/SVG/201602243142.html
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。