Motio：简单但功能强大的的 jQuery 精灵动画插件-摩杜云开发者社区

Motio 是一个简单但功能强大的的实现精灵动画和平移的 jQuery 插件。Motio 要求元素在动画容器内，在 CSS 背景图像中实现动画效果。在基于精灵的动画中，容器应该和一帧精灵的尺寸一样。例如，如果你有10帧水平方向的精灵，总共 1000 x 100 像素，那么动画容器应为 100×100 像素大。

Motio：简单但功能强大的的 jQuery 精灵动画插件_前端

实现一个简单的游戏

Motio 原本设计是用来实现简单的精灵动画和平移效果的，不过也可以综合起来制作一款简单的游戏。

操作：←左移 →右移 Space跳跃 B踢

<script type="text/javascript" src="http://darsa.in/motio/js/vendor/jquery-1.7.2.min.js"></script><script type="text/javascript" src="http://darsa.in/motio/jquery.motio.js"></script><script type="text/javascript" src="http://darsa.in/motio/js/main.js"></script><script type="text/javascript" src="http://darsa.in/motio/js/vendor/plugins.js"></script><script type="text/javascript">// <![CDATA[ var $game = $('#game'), pos = 400, $char = $game.find('.char').css({ left: pos + 'px' }), posMax = $game.innerWidth() - $char.innerWidth(), facing = 'right', moveSpeed = 300, moveFps = 30, pressed = [], inAction = 0, inRunning = 0, mIndex, listenOn = [37, 39, 32, 66], $mations = $char.children().hide(), mations = { right: { stand: $mations.filter('.stand').motio({ frames: 8, paused: 1, fps: 10 }), run: $mations.filter('.run').motio({ frames: 6, paused: 1, fps: 10 }), jump: $mations.filter('.jump').motio({ frames: 10, paused: 1, fps: 15 }), kick: $mations.filter('.kick').motio({ frames: 9, paused: 1, fps: 15 }) }, left: { stand: $mations.filter('.stand_left').motio({ frames: 8, paused: 1, fps: 10 }), run: $mations.filter('.run_left').motio({ frames: 6, paused: 1, fps: 10 }), jump: $mations.filter('.jump_left').motio({ frames: 10, paused: 1, fps: 15 }), kick: $mations.filter('.kick_left').motio({ frames: 9, paused: 1, fps: 15 }) } }; // Start with standing animation mations[facing].stand.show().motio('play'); // On actions end $mations.not('.stand,.stand_left,.run,.run_left').motio('on', 'end', function() { inAction = 0; $(this).hide(); mations[facing][inRunning ? 'run' : 'stand'].show().motio('play'); }); // Keydown handlers $(document).on('keydown', function(event) { if($.inArray(event.which, listenOn) === -1 || pressed[event.which]) { return; } pressed[event.which] = true; var request; switch(event.which) { // Left arrow case 37: request = 'run'; facing = 'left'; break; // Right arrow case 39: request = 'run'; facing = 'right'; break; // Spacebar case 32: request = 'jump'; break; // B case 66: request = 'kick'; break; } if(request === 'run') { inAction = 0; mIndex = clearTimeout(mIndex); inRunning = 1; move(); } else { inAction = 1; } $mations.hide().motio('toStart', true); mations[facing][request].show().motio(request === 'run' ? 'play' : 'toEnd'); return false; }); // Keyup handlers $(document).on('keyup', function(event) { if($.inArray(event.which, listenOn) === -1) { return; } pressed[event.which] = false; var released; switch(event.which) { // Left & arrow case 37: released = 'left'; break; // Right arrow case 39: released = 'right'; break; } if(inRunning && facing === released) { mations[released].run.hide().motio('toStart', true); inRunning = 0; mIndex = clearTimeout(mIndex); if(!inAction) { mations['left'].stand.add(mations['right'].stand).motio('toStart', true); mations[facing].stand.show().motio('play'); } } return false; }); // Move function function move() { if(pos === 0 && facing === 'left' || pos === posMax && facing === 'right') { return; } pos += (facing === 'right' ? moveSpeed : -moveSpeed) / moveFps; if(pos < 0) { pos = 0; } if(pos > posMax) { pos = posMax; } $char[0].style.left = pos + 'px '; mIndex = setTimeout(move, 1000 / moveFps); } // ]]></script>

HTML 代码如下：

<div >
<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
<div ></div>
</div>

CSS 代码如下：

#game {
position: relative;
clear: both;
margin: 10px 0;
width: 100%;
height: 240px;
background: url('../img/minigame_bg.png') no-repeat center 0;
}
#game div {
position: absolute;
}
#game .char {
width: 120px;
height: 150px;
left: 410px;
bottom: 0;
}
#game .char div {
width: 100%;
height: 100%;
background: url('../img/sailormars.gif') no-repeat left top;
}
#game .char .stand {
background-position: 0 0;
}
#game .char .stand_left {
background-position: 0 -150px;
}
#game .char .run {
background-position: 0 -300px;
}
#game .char .run_left {
background-position: 0 -450px;
}
#game .char .jump {
background-position: 0 -600px;
}
#game .char .jump_left {
background-position: 0 -750px;
}
#game .char .kick {
background-position: 0 -900px;
}
#game .char .kick_left {
background-position: 0 -1050px;
}
#game .overlay {
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 2;
background: url('../img/minigame_bg.png') no-repeat center -240px;
}

JavaScript 代码如下：

var $game = $('#game'),
pos = 400,
$char = $game.find('.char').css({
left: pos + 'px'
}),
posMax = $game.innerWidth() - $char.innerWidth(),
facing = 'right',
moveSpeed = 300,
moveFps = 30,
pressed = [],
inAction = 0,
inRunning = 0,
mIndex, listenOn = [37, 39, 32, 66],
$mations = $char.children().hide(),
mations = {
right: {
stand: $mations.filter('.stand').motio({
frames: 8,
paused: 1,
fps: 10
}),
run: $mations.filter('.run').motio({
frames: 6,
paused: 1,
fps: 10
}),
jump: $mations.filter('.jump').motio({
frames: 10,
paused: 1,
fps: 15
}),
kick: $mations.filter('.kick').motio({
frames: 9,
paused: 1,
fps: 15
})
},
left: {
stand: $mations.filter('.stand_left').motio({
frames: 8,
paused: 1,
fps: 10
}),
run: $mations.filter('.run_left').motio({
frames: 6,
paused: 1,
fps: 10
}),
jump: $mations.filter('.jump_left').motio({
frames: 10,
paused: 1,
fps: 15
}),
kick: $mations.filter('.kick_left').motio({
frames: 9,
paused: 1,
fps: 15
})
}
};
// Start with standing animation
mations[facing].stand.show().motio('play');
// On actions end
$mations.not('.stand,.stand_left,.run,.run_left').motio('on', 'end', function() {
inAction = 0;
$(this).hide();
mations[facing][inRunning ? 'run' : 'stand'].show().motio('play');
});
// Keydown handlers
$(document).on('keydown', function(event) {
if($.inArray(event.which, listenOn) === -1 || pressed[event.which]) {
return;
}
pressed[event.which] = true;
var request;
switch(event.which) {
// Left arrow
case 37:
request = 'run';
facing = 'left';
break;
// Right arrow
case 39:
request = 'run';
facing = 'right';
break;
// Spacebar
case 32:
request = 'jump';
break;
// B
case 66:
request = 'kick';
break;
}
if(request === 'run') {
inAction = 0;
mIndex = clearTimeout(mIndex);
inRunning = 1;
move();
} else {
inAction = 1;
}
$mations.hide().motio('toStart', true);
mations[facing][request].show().motio(request === 'run' ? 'play' : 'toEnd');
return false;
});
// Keyup handlers
$(document).on('keyup', function(event) {
if($.inArray(event.which, listenOn) === -1) {
return;
}
pressed[event.which] = false;
var released;
switch(event.which) {
// Left & arrow
case 37:
released = 'left';
break;
// Right arrow
case 39:
released = 'right';
break;
}
if(inRunning && facing === released) {
mations[released].run.hide().motio('toStart', true);
inRunning = 0;
mIndex = clearTimeout(mIndex);
if(!inAction) {
mations['left'].stand.add(mations['right'].stand).motio('toStart', true);
mations[facing].stand.show().motio('play');
}
}
return false;
});
// Move function
function move() {
if(pos === 0 && facing === 'left' || pos === posMax && facing === 'right') {
return;
}
pos += (facing === 'right' ? moveSpeed : -moveSpeed) / moveFps;
if(pos < 0) {
pos = 0;
}
if(pos > posMax) {
pos = posMax;
}
$char[0].style.left = pos + 'px ';
mIndex = setTimeout(move, 1000 / moveFps);
}

Github 官方主页猛击下载

GitHub 被墙，需要配置 hosts：

207.97.227.239 github.com 
207.97.227.252 nodeload.github.com 
207.97.227.243 raw.github.com 
204.232.175.78 documentcloud.github.com