我在做什么：
-a一个javaScript动画（总共114帧），用于快速连续替换下一张图片。
-onmouseover打开门的图像。（播放72帧并停留在第72帧）
- 未完成关闭。（播放42帧并停留在最后一帧）
- 如果在动画完成前将鼠标移离元素，它将完成72帧，然后播放42帧。
- 如果鼠标在42帧完成之前移回到元素上，它将完成播放42帧，然后播放72帧。javaScript有没有更好的方法来制作这个动画？

问题：
- 我是javaScript的noob，并没有完全理解它。
- 即使它的作品，它是非常错误的，你不能移动你的鼠标远离元素，而不会搞乱动画。
- 此外，我不知道如何使它完成上面列出的所有事情。

这是我现在所拥有的代码：

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

来源

2012-12-02 user1868086

1.您的动画很可能是更快，更流畅，如果你有这些72帧作为一个物理图像文件的精灵，而不是请求72个独立的图像文件。 – techfoobar

2.为什么不只是一个GIF文件？ – techfoobar

我尝试做一个精灵，并没有太大的成功，因为我一般缺乏关于javaScript的知识。它看起来像个人形象运行良好，但如果我可以用一个精灵来做到这一点，那也是很棒的。 – user1868086

这应该给你一些提示。

注：

只使用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); 
}

来源

2012-12-02 07:10:41 techfoobar

大声笑，抱歉的男人，那根本不是我要找的。我不知道你是否看到我的jsfiddle上的图像，但不能用一个图像复制。这是一个3D渲染，旨在看起来逼真完整的焦散和照明和一切。我要么需要使用精灵，要么一个接一个地加载单个图像。（或者我打算使用的所有114帧的其他动画方式）。这扇门也是一个透明的png，这样我就可以使它看起来像门开到另一个世界。 – user1868086

此外，您的动画的门有许多与我原来的帖子相同的错误。 – user1868086

啊..好的。：0）现在* *不能用CSS转换完成。我刚看到你的小提琴上的图像。我只能说可能通过JS/CSS进行动画制作并不是你最好的选择，如果图像的高清晰度和大小。 – techfoobar

2个选择：

2动画克IFS

1 gif动画开放+ 1 gif动画近距离
更快，比精灵小

缺点 - 可能会失去的图像质量

CSS精灵

更复杂但保持图像质量
fa韦伯斯特比目前的形势

以便更好地了解两者的利弊看： Animated .GIF vs Spritesheet + JS/CSS

，但我写的图像差分器，将采取2个图像之间的差异，剩下的透明

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

，你可以在CSS精灵使用，并覆盖每个精灵与巴

的图像质量得到GIF的好处

这里是一个非常普通的子画面产生，我放在一起用C

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

来源

2012-12-02 07:52:09 technosaurus

我想我只是找到了最简单的方法来实现我想要的... http://www.spritely.net/ – user1868086

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

回答

2动画克IFS

CSS精灵

相关问题