強大的JavaScript動畫圖形庫mo.js

最近在學習前端動畫方面知識時發現了挺有趣的一個動畫的圖形庫mo.js，頁面效果真是酷炫，有興趣的同學可以研究下：）。

酷炫的效果：

以下是官方的demo效果，更多詳情請查看 mo.js
http://codepen.io/sol0mka/full/ogOYJj/
http://codepen.io/sol0mka/full/yNOage/
http://codepen.io/sol0mka/full/OyzBXR

一個簡單例子

現在我們使用mo.js來實現一個簡單的效果

HTML結構

    <div class="demo">一個簡單例子</div>

CSS

    body{
	   text-align: center;
            padding: 300px;
	}
	.demo{
	  width: 100px;
	  height: 100px;
          position:relative;
          margin: 0 auto;
          background: #ddd;
    }

JavaScript

    // 首先引入mo.js文件
    <script src="js/mo.min.js"></script>

    // 效果實現相關代碼
    <script>
    var molinkEl = document.querySelector('.demo'),
			moTimeline = new mojs.Timeline(),
			moburst1 = new mojs.Burst({
				parent: molinkEl,
				duration: 1300,
				shape : 'circle',
				fill : [ '#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE' ],
				x: '0%',
				y: '-50%',
				radius: {0:60},
				count: 6,
				isRunLess: true,
				easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
			}),
			moburst2 = new mojs.Burst({
				parent: molinkEl,
				duration: 1600,
				delay: 100,
				shape : 'circle',
				fill : [ '#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE' ],
				x: '-400%',
				y: '-420%',
				radius: {0:120},
				count: 14,
				isRunLess: true,
				easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
			}),
			moburst3 = new mojs.Burst({
				parent: molinkEl,
				duration: 1500,
				delay: 200,
				shape : 'circle',
				fill : [ '#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE' ],
				x: '130%',
				y: '-70%',
				radius: {0:90},
				count: 8,
				isRunLess: true,
				easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
			}),
			moburst4 = new mojs.Burst({
				parent: molinkEl,
				duration: 2000,
				delay: 300,
				shape : 'circle',
				fill : [ '#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE' ],
				x: '-20%',
				y: '-150%',
				radius: {0:60},
				count: 14,
				isRunLess: true,
				easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
			}),
			moburst5 = new mojs.Burst({
				parent: molinkEl,
				duration: 1400,
				delay: 400,
				shape : 'circle',
				fill : [ '#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE' ],
				x: '30%',
				y: '-100%',
				radius: {0:60},
				count: 12,
				isRunLess: true,
				easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
			});

		moTimeline.add(moburst1, moburst2, moburst3, moburst4, moburst5);
		molinkEl.addEventListener('mouseenter', function() {
			moTimeline.start();
		});
    </script>  

實現效果

查看DEMO

更多閱讀

• mojs官方網站：http://mojs.io/
• mojs官方API：http://mojs.io/tutorials/easing/path-easing/
• mojs的github: https://github.com/legomushroom/mojs
• 實現文本動畫效果的一個庫： textillate
• CSS 動畫庫Animate.css ：animate.css
• 月影大神寫的前端動畫啟蒙教程：http://matrix.h5jun.com/slide/show?id=117#/