CODEWITHSUNDEEP
javascripthtmlcssanimationsettimeout
user1868086
user1868086

Reputation: 89

javaScript is there a better way to make this animation?

What I'm trying to do:
-A javaScript animation (114 frames in total) that swaps out one image for the next in fast succession.
-onmouseover an image of a door opens. (plays 72 frames and stays on frame 72)
-onmouseout the door closes. (plays 42 frames and stays on the last frame)
-if the mouse is moved away from the element before the animation is completed, it will finish the 72 frames and then play the 42 frames.
-if the mouse is moved back onto the element before the 42 frames have finished, it will finish playing the 42 frames and then play the 72 frames.

The problems:
-I'm a noob at javaScript and don't fully understand it yet.
-Even though it sort of works, it's very buggy, you can't move your mouse away from the element without messing up the animation.
-Also, I can't figure out how to make it do all of the things listed above.

Here's the code I have right now: 

HTML:  
<div onmouseover="openDoor()" onmouseout="closeDoor()" id="door2"></div>
<div id="door">
<img src="images/Animation_Door/0001.png">
<img src="images/Animation_Door/0002.png">
<img src="images/Animation_Door/0003.png">
...etc... (114 frames)
</div>

CSS:
#door {
background-color:transparent;
...etc...
}

.door img{
    display: none;
}

.door img:first-child {
display: block;
}


javaScript:
function openDoor() { 
var ti, frame = 0;
var frames = document.getElementById("door").children;
var frameCount = frames.length;

for (i=0; i<72; i++) {
ti = setTimeout(function(){
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
}, 50*i);
}
}

function closeDoor() { 
var ti, frame = 0;
var frames = document.getElementById("door_close").children;
var frameCount = frames.length;

for (i=0; i<42; i++) {
setTimeout(function(){
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
}, 50*i);
}
}

Upvotes: 0

Views: 1931

Answers (2)

technosaurus
technosaurus

Reputation: 7802

2 options:

2 animated gifs

  • 1 animated gif for open + 1 animated gif for close
  • faster and smaller than sprites

cons - may lose image quality

css sprites

  • more complex but keeps image quality
  • faster than current situation

for a better understanding of the pros and cons of both see: Animated .GIF vs Spritesheet + JS/CSS

but I have written an image differencer that will take the difference between 2 images and leave the rest transparent

http://www.murga-linux.com/puppy/viewtopic.php?t=81387

that you can use in a css sprite and overlay each sprite to get the benefits of gif with the image quality of png

here is a really generic sprite generator that I put together in C

http://www.murga-linux.com/puppy/viewtopic.php?t=82009

Upvotes: 0

techfoobar
techfoobar

Reputation: 66663

This should give you some hints.

Notes:

  • Uses just 1 image - a flat door (just used some image from google image search for door - replace with your own)
  • Animation handled completely with CSS transforms

Demo: http://jsfiddle.net/LA6VW/3/

HTML

<div class="doorframe">
    <div class="door"></div>
</div>

CSS

.doorframe {
    border: 1px solid black;
    display: inline-block;
}
.door {
    width: 60px;
    height: 140px;
    background-color: #ccc;
    border: 1px solid #444;
    -webkit-transform-origin: left;
    background-image: url("http://www.doorasia.in/images/gallery/moulded_door01.jpg");
    background-position: -49px -7px;
    background-size: 158px 155px;
}​

JS:

var animating = false;

$('.doorframe').mouseenter(function() {
    if(animating) return;
    var door = $('.door');
    animating = true;
    openDoor(door, 5);
});
$('.doorframe').mouseleave(function() {
    if(animating) return;
    var door = $('.door');
    animating = true;
    closeDoor(door, 90);
});

function openDoor(door, angle) {
    if(angle >= 90) {
        animating = false;
        return;        
    }
    door.css('-webkit-transform', 'perspective(200px) rotateY( '+angle+'deg )');
    setTimeout(function() {
        openDoor(door, angle+=5);
    }, 50);
}

function closeDoor(door, angle) {
    if(angle < 0) {
        animating = false;
        return;        
    }
    door.css('-webkit-transform', 'perspective(200px) rotateY( '+angle+'deg )');
    setTimeout(function() {
        closeDoor(door, angle-=5);
    }, 50);
}

​

Upvotes: 1

Related Questions