I'm trying to use jsMovie (http://jsmovie.konsultaner.de/#/) to create sprite animation. It works ok on the desktop browsers, however it behaves strangely on mobile devices.
I've set up a test: http://www.virtualgraphicstudio.com/test/ with slow fps ratio, so you can spot the problem on mobile devices. It looks like the mobile browsers take the slicing dimensions wrongly and I can't find the reason why.
Here's my code:
$('#battery').jsMovie({
images : ['battery.jpg'],
folder : 'sprites/',
height : 394, width: 700,
grid : {height:394, width:700, columns:20, rows:8},
showPreLoader : false,
playOnLoad : true,
playBackwards : false,
repeat: true,
fps:5
});
$('#battery').jsMovie('addClip','battery_in',1,120);
$('#battery').jsMovie('addClip','battery_loop',121,125);
$('#battery').on('ended', function() {
$('#battery').jsMovie('playClip', 'battery_loop', true, true);
});
and the html
<div id="wrapper" style="position: relative; top: 0; left: 0; width:700px; height: 394px; background-color:red">
<div id="image"></div>
<div id="hotspots" style="z-index: 1"></div>
<div id="videos" style="z-index: 2; position: absolute; top: 0; left: 0; width:700px; height: 394px; background-color:green">
<div id="battery"></div>
</div>
</div>
