这是一款基于mo.js制作的一组炫酷图标动画特效。这组图标动画共有17种效果，它们使用font-awesome作为图标，采用SVG技术，在用户点击图标时产生各种炫酷的图标动画特效。
mo.js是Oleg Solomka开发的一款图形动画javascript库。通过它你可以制作出非常有趣的图形动画效果。
使用方法
HTML结构
图标的HTML结构使用一个按钮来包裹一个Font Awesome图标。
<button class="icobutton icobutton--thumbs-up"> <span class="fa fa-thumbs-up"></span></button> |
制作图标动画
然后你就可以通过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。
网盘下载密码：vacp
