我正在尝试做什么：
- 一个javaScript动画（总共114帧），可以快速连续地为下一个图像换出一个图像
-onmouseover门的图像打开。 （播放72帧并停留在第72帧）
- 门关上了。 （播放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);
}
}
答案 0 :(得分：1)
这应该给你一些提示。
备注：
演示： 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);
}
答案 1 :(得分：0)
2个选项：
为了更好地理解两者的利弊，请参阅： Animated .GIF vs Spritesheet + JS/CSS
但是我写了一个图像差异器，它将拍摄2张图像之间的区别，并将其余部分保持透明
http://www.murga-linux.com/puppy/viewtopic.php?t=81387
你可以在css sprite中使用并覆盖每个sprite以获得gif的好处，并具有png的图像质量
这是一个非常通用的精灵生成器，我把它放在C
中