强大的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#/