强大的JavaScript动画图形库mo.js

时间：2023-03-08 21:32:56

最近在学习前端动画方面知识时发现了挺有趣的一个动画的图形库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

更多阅读

相关文章