我在做什麼：
-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精靈

相關問題