javaScript 有没有更好的方法来制作这个动画？

Question

我正在尝试做的事情:
- 一个 javaScript 动画(总共 114 帧)，可以快速连续地将一张图像换成下一张。
-onmouseover 一扇门打开的图像。 (播放 72 帧并停留在第 72 帧)
-onmouseout 门关闭。 (播放42帧，停留在最后一帧)
-如果鼠标在动画完成前离开元素，它将完成72帧，然后播放42帧。
- 如果鼠标在 42 帧播放完之前移回元素上，它将播放完 42 帧，然后播放 72 帧。

问题:
-我是 javaScript 的菜鸟，还没有完全理解它。
-尽管它有点工作，但它有很多错误，你不能将鼠标从元素上移开而不会弄乱动画。
-另外，我不知道如何让它完成上面列出的所有事情。

这是我现在的代码:

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);
}
}

Answer 1

这应该会给你一些提示。

注意事项:

• 仅使用 1 张图片 - 一扇平门(仅使用谷歌图片搜索中的一些图片搜索门 - 替换为您自己的图片)
• 动画完全由 CSS 转换处理

演示: 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);
}

​