奇怪的IE瀏覽器與火狐Javascript動畫速度

我有以下功能，連接成一堆不同的插件設置，允許您配置旋轉對象的手柄，速度和角度。在IE9中，所有東西都很清晰，非常漂亮，但Firefox卻很生澀。奇怪的IE瀏覽器與火狐Javascript動畫速度

// 1. FUNCTION ROTATE ANIMATIONS IN 
function rotate_on(degree, index){ 
clearTimeout(rotateofftimer); /* CLEAR ANIMATION OUT TIMER */ 

// A. APPLY THE CROSS-BROWSER CSS FOR ROTATIONS 
if((ievers==6)||(ievers==7)||(ievers==8)){ if(ievers==8){ /* IE 8 CODE */ current_obj.css({/* IE8 */'-ms-filter':'"progid:DXImageTransform.Microsoft.BasicImage(rotation='+degree+')"',/* IE<8 */'filter':'progid:DXImageTransform.Microsoft.BasicImage(rotation='+degree+')'});} else { /* IE 6/7 CODE */ }; 

} else { /* NON IE */ 
current_obj.css({/* W3C CSS3 standard */'transform':'translateX(0)rotate('+degree+'deg)','transform-origin':OS.rotate_handle_on_set[index],/* Firefox */'-moz-transform':'translateX(0)rotate('+degree+'deg)','-moz-transform-origin':OS.rotate_handle_on_set[index],/* Chrome, Safari, Mobile, Etc. */'-webkit-transform':'translateX(0)rotate('+degree+'deg)','-webkit-transform-origin':OS.rotate_handle_on_set[index],/* Opera */'-o-transform':'translateX(0)rotate('+degree+'deg)','-o-transform-origin':OS.rotate_handle_on_set[index],/* IE>=9 */'-ms-transform':'rotate('+degree+'deg)','-ms-transform':'translateX(0)rotate('+degree+'deg)','-ms-transform-origin':OS.rotate_handle_on_set[index]});}; 

// B. TEST FOR REPEAT ROTATIONS - IF VALUES ARE THE SAME, REPEAT ROTATIONS 
if(OS.rotate_on_set[index]==OS.rotate_off_set[index]){ 

// SAVE THE ENDING VALUE TO PICKUP ON NEXT PLAY (IF LOOPING) 
OS.rotate_on_set[index]=degree;OS.rotate_off_set[index]=degree; degree++; 
}else{ if(degree<OS.rotate_off_set[index]){ degree++ };}; 

// C. TRIGGER THE FUNCTION IN A TIMER, BASED ON USER SPEED 
rotateontimer = setTimeout(function(){rotate_on(degree, index)},OS.rotate_speed_on_set[index]);};

奇怪的是，當我把速度降下來，使動畫實在是太慢了，它基本上是通過一幀抽搐在Firefox的一段時間，但IE9似乎知道如何將它轉換成平穩/慢動畫。這可能與定時器有關嗎？謝謝！

來源

2012-02-24 Aaron

你可以發佈一些更完整的代碼或使用[http://jsfiddle.net/](jsFiddle）設置一個工作示例嗎？ – 2012-02-24 03:25:08

這個插件真的很長。基本上，在懸停時調用此函數，並將對象（及其索引）傳遞給該函數。函數A：將用於旋轉的初始CSS應用於當前對象（基於從JSON對象拉取的用戶設置）。 B：有一個循環旋轉的選項，如果循環只保存當前角度。 C.創建一個計時器，旋轉對象並每隔X秒調用計時器。 – Aaron 2012-02-24 04:18:04

對不起，這裏有很多變數。基本上這個函數在mouseover上被調用（並傳遞一個當前對象，它是索引）。該對象已被設置爲正確的角度。函數內部有一個定時器，每N秒調用一次該函數。該函數遞增度並將其應用於CSS。 – Aaron 2012-02-24 04:24:34

這似乎是Firefox的方式。我有與動盪的JS動畫相同的問題，只有用Firefox瀏覽時纔會出現。 Internet Explorer 9（標準模式以及兼容模式「IE7」和「IE8」）和Chrome在任何情況下均顯示流暢的動畫。

相信我，我們不是唯一有這個問題的人，而且至今沒有明確的解決方案存在。

來源

2012-08-14 11:21:03

當談到這些東西時，我們生活在石器時代。和FF真的令人失望的性能..（我在版本18） – vsync 2013-01-15 22:41:45

火狐當你將translate3d（0,0,0）添加到你的轉換屬性，它強制瀏覽器中的硬件加速，所以動畫變得光滑..最好在頁面加載以獲得最佳性能時將其放入樣式表中。http://jsfiddle.net/esAGA/16/ - – 2013-10-17 16:47:45

奇怪的IE瀏覽器與火狐Javascript動畫速度

回答

相關問題