2012-02-24 5 views
0

私は以下の機能を持っていて、さまざまなプラグイン設定に関係しています。回転するオブジェクトのハンドル、速度、角度を設定できます。すべてがクリスタルクリアに実行され、IE9では本当にうれしいですが、Firefoxは不気味です。奇妙なIEとFirefoxのJavaScript 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で一度に1つのフレームを介してけいれんだ、ですが、IE9はスムーズにそれを変換する方法を知っているようです/遅いアニメーション。タイマーとは何か関係ありますか? ありがとう!

+0

[http://jsfiddle.net/](jsFiddle)を使用して、より完全なコードや実例を投稿できますか? –

+0

この時点でプラグインは実際には長いです。基本的には、ホバリング時にこの関数が呼び出され、オブジェクト(およびそのインデックス)が関数に渡されます。関数A:現在のオブジェクトに回転の初期CSSを適用します(JSONオブジェクトから取得したユーザー設定に基づいています)。 B:回転をループするオプションがあります。ループされていると、現在の角度が保存されます。 C.オブジェクトを回転させ、X秒ごとにタイマーを起動するタイマーを作成します。 – Aaron

+0

申し訳ありませんが、そこにはさまざまな変数があります。基本的に、関数はマウスオーバー時に呼び出されます(現在のオブジェクトとそのインデックスを渡します)。オブジェクトは既に正しい角度にスタイリングされています。機能の中にN秒ごとに関数を呼び出すタイマーがあります。この関数は度をインクリメントし、それをCSSに適用します。 – Aaron

答えて

1

これはFirefoxのようです。私は不安定なJSアニメーションと同じ問題を抱えていて、Firefoxで見たときだけです。 Internet Explorer 9(標準モードと互換モード「IE7」と「IE8」)とChromeは、いずれもあらゆる状況下で滑らかなアニメーションを表示します。

私はこの問題を抱える唯一の人ではありません。日に日はっきりした解決策はありません。

+0

私たちは石造りの時代に生きています。 FFは実際にはパフォーマンスには残念です。(私はバージョン18になります) – vsync

+0

Firefoxの場合、トランスレートプロパティにtranslate3d(0,0,0)を追加すると、ブラウザのハードウェアアクセラレーションが強制され、アニメーションがスムーズになります。最高のパフォーマンスのためにページが読み込まれるときにあなたのスタイルシートにそれを持つことができます.. http://jsfiddle.net/esAGA/16/ - –