...

View Full Version : frame by frame animation dont work in IE9 working in all other browsers



Hajad
02-25-2012, 02:54 PM
I' am trying to do a frame by frame animation, lik an animated gif. I am using svg (vector graphics) and IE9 has native support for svg. The code functions in every other browser but IE9 plays the animation once then nothing. If you would like to try and not have svg files you can use whatever gif,jpg or png just put an img-tag where i have embed.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Animation</title>
<style type="text/css">
/*One div per image all uses this class*/
.eyesPos {
position:absolute;
width:80px;
height:50px;
z-index:1;
left: 0px;
top: 0px;
}


#eye_wrapper{/*This is a master div for easy placement of the others*/
position:absolute;
width:80px;
height:50px;
z-index:2;
left: 275px;
top: 200px;
}
</style>



<script>
var eyes=["a","b","c","d"];//Image id in this array
var startAnim=setInterval(visaOga,100);//Animation speed

function visaOga(){
document.getElementById(eyes.splice(0,1)).style.display="block";
if(eyes.length==0){
document.getElementById("a").style.display="none";
document.getElementById("b").style.display="none";
document.getElementById("c").style.display="none";

dBort = function(){
document.getElementById("d").style.display="none";
eyes=["a","b","c","d"];
}
setTimeout(dBort,1500);//So last image is shown 1.5 sec
return;//Aborts - dBort -. Sequence can start over
if(document.getElementById("d").style.display=="none"){
startAnim;//Strts sequence if last image invisible
}
}
}

</script>
</head>

<body>


<!--Images in own div invisible at start-->
<div id="eye_wrapper">
<div class="eyesPos" id="a" style= display:none;>
<embed src="0.svg" width="80" height="50" />
</div>

<div class="eyesPos" id="b" style= display:none;>
<embed src="1.svg" width="80" height="50" />
</div>

<div class="eyesPos" id="c" style= display:none;>
<embed src="2.svg" width="80" height="50" />
</div>

<div class="eyesPos" id="d" style= display:none;>
<embed src="3.svg" width="80" height="50" />
</div>
</div>





</body>
</html>

Logic Ali
02-25-2012, 03:46 PM
if(document.getElementById("d").style.display=="none")
{
startAnim;//Strts sequence if last image invisible
}

The above code is never executed and would have no effect even if it were.

I think the trouble is that during the delay before dBort is executed, the outer function is still being called repeatedly, which keeps the array at 0, which generates multiple timeouts for dBort.

The whole algorithm needs to be re-thought, preferably without any array manipulation.

Hajad
02-25-2012, 04:25 PM
Thanks for your replay. You are absolutely right about the if statement., was some leftover code in my experimenting. You have some sugestions i am gonna try, thanks. But the big question remains. Why does it not work in IE9 when it works everywere else?. And also why do you think i am better off without the Array?

Hajad
02-26-2012, 11:26 PM
OK! now it's working. I would like to know if anyone has a more structured way of doing this. It's to many functions and setInterval it must be a better way. Or am I wrong? Is this the way in javascript to do this kind of animation?



<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Knubert ögon</title>
<style type="text/css">
/*En div per öga, fyra stycken, använder denna klass*/
.eyesPos {
position:absolute;
width:80px;
height:50px;
z-index:1;
left: 0px;
top: 0px;
}


/*Omsluter de andra divarna för enklare placering*/
#eye_wrapper{
position:absolute;
width:80px;
height:50px;
z-index:2;
left: 275px;
top: 200px;
}
</style>

<script>
var startAnim1=setInterval(visaOga1,0);
var startAnim2=setInterval(visaOga2,100);
var startAnim3=setInterval(visaOga3,200);
var startAnim4=setInterval(visaOga4,300);
setInterval(dBort,3500);
function visaOga1(){
document.getElementById("a").style.display="block";
clearInterval(startAnim1);
}
function visaOga2(){

document.getElementById("a").style.display="none";
document.getElementById("b").style.display="block";
clearInterval(startAnim2);
}
function visaOga3(){

document.getElementById("b").style.display="none";
document.getElementById("c").style.display="block";
clearInterval(startAnim3);
}
function visaOga4(){

document.getElementById("c").style.display="none";
document.getElementById("d").style.display="block";
clearInterval(startAnim4);
}

function dBort(){
document.getElementById("d").style.display="none";
startAnim1=setInterval(visaOga1,0);
startAnim2=setInterval(visaOga2,100);
startAnim3=setInterval(visaOga3,200);
startAnim4=setInterval(visaOga4,300);
}
</script>

</head>

<body>


<!--Ögonen i varsin - div - dolda från början-->
<div id="eye_wrapper">
<div class="eyesPos" id="a" style= display:none;>
<embed src="0.svg" width="80" height="50" />
</div>

<div class="eyesPos" id="b" style= display:none;>
<embed src="1.svg" width="80" height="50" />
</div>

<div class="eyesPos" id="c" style= display:none;>
<embed src="2.svg" width="80" height="50" />
</div>

<div class="eyesPos" id="d" style= display:none;>
<embed src="3.svg" width="80" height="50" />
</div>
</div>





</body>
</html>

Old Pedant
02-27-2012, 01:59 AM
Try this:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Knubert ögon</title>
<style type="text/css">
/*En div per öga, fyra stycken, använder denna klass*/
.eyesPos {
position:absolute;
display: none;
width:80px;
height:50px;
z-index:1;
left: 0px;
top: 0px;
}


/*Omsluter de andra divarna för enklare placering*/
#eye_wrapper{
position:absolute;
width:80px;
height:50px;
z-index:2;
left: 275px;
top: 200px;
}
</style>

<script type="text/javascript">
var eyeDivs = [ ];
var currentEye = 0;

function animate( )
{
eyeDivs[currentEye].style.display = "none";
currentEye = ( currentEye + 1 ) % eyeDivs.length;
eyeDivs[currentEye].style.display = "block";
}

function startEyes( )
{
for ( var e = 0; e < 9999; ++e )
{
var eye = document.getElementById("eyes"+e);
if ( eye == null ) break; // stop when no more eyesN found
eyeDivs[e] = eye; // save a reference to eyesN
}
eyeDivs[0].style.display = "block"; // start first one
setInterval( animate, 100 );
}

window.onload = startEyes;

</script>
</head>
<body>
<!--Ögonen i varsin - div - dolda från början-->
<div id="eye_wrapper">
<div class="eyesPos" id="eyes0">
<embed src="0.svg" width="80" height="50" />
</div>

<div class="eyesPos" id="eyes1">
<embed src="1.svg" width="80" height="50" />
</div>

<div class="eyesPos" id="eyes2">
<embed src="2.svg" width="80" height="50" />
</div>

<div class="eyesPos" id="eyes3">
<embed src="3.svg" width="80" height="50" />
</div>
</div>
</body>
</html>

You can add as many <div class="eyesPos"> as you want using this code.

Hajad
02-27-2012, 01:33 PM
Great now we are getting somerwere. But it's one problem. In my example i have a delay so that last image stays before repeating. Any sugestions?

Old Pedant
02-27-2012, 11:13 PM
Trivial.


<script type="text/javascript">
var eyeDivs = [ ];
var currentEye = 0;
var shortDelay = 100;
var longDelay = 3500; // change as you wish

function animate( )
{
eyeDivs[currentEye].style.display = "none";
currentEye = ( currentEye + 1 ) % eyeDivs.length;
eyeDivs[currentEye].style.display = "block";
setTimeout( animate, ( currentEye >= eyeDivs.length - 1) ? longDelay : shortDelay;
}

function startEyes( )
{
for ( var e = 0; e < 9999; ++e )
{
var eye = document.getElementById("eyes"+e);
if ( eye == null ) break; // stop when no more eyesN found
eyeDivs[e] = eye; // save a reference to eyesN
}
eyeDivs[0].style.display = "block"; // start first one
setTimeout( animate, 100 );
}

window.onload = startEyes;

</script>

Change shortDelay and longDelay there to however long you want them to be.

The >= is really going to be a test for ==, but I like being paranoid.

Hajad
02-27-2012, 11:51 PM
Wow! you got it. Thank you so mucht. One small "typo" in the code if someone else following this. It's missing one parenteces in the end of the line...


setTimeout( animate, ( currentEye >= eyeDivs.length - 1) ? longDelay : shortDelay;


Should be...


setTimeout( animate, ( currentEye >= eyeDivs.length - 1) ? longDelay : shortDelay);

I hope that i don't affend you for pointing that out.
Thanks again!

Old Pedant
02-28-2012, 07:16 AM
Oops...that's what comes from trying to write code in this silly little tiny <textarea> window. Sometimes, I actually use notepad, but this time I was lazy. Sorry! Good catch.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum