2012-02-24 2 views
0

다음과 같은 기능을 사용하여 여러 가지 플러그인 설정을 묶어서 회전하는 객체의 핸들, 속도 및 각도를 구성 할 수 있습니다. IE9에서는 모든 것이 맑고 멋지게 실행되지만 파이어 폭스는 잘 보이지 않습니다.이상한 IE와 파이어 폭스 자바 스크립트 애니메이션 속도

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

나는 애니메이션이 정말 느리다 있도록 속도를 거절 할 때 이상한 것은, 그것은 기본적으로 파이어 폭스에서 한 번에 한 프레임을 통해 쳐주는 것,하지만 IE9 부드러운로 그것을 번역하는 방법을 모르는 것 같다/느린 애니메이션. 타이머와 관련이있을 수 있습니까? 감사합니다.

+0

[http://jsfiddle.net/] (jsFiddle)을 사용하여 좀 더 완벽한 코드를 게시하거나 작동 예제를 설정할 수 있습니까? –

+0

플러그인은이 시점에서 실제로 길다. 기본적으로 호버에이 함수가 호출되고 객체 (및 그것의 인덱스)가 함수로 전달됩니다. 함수 A : (JSON 객체에서 가져온 사용자 설정을 기반으로) 현재 객체에 회전을위한 초기 CSS를 적용합니다. B : 회전을 루핑하는 옵션이 있습니다. 반복하면 현재 각도가 저장됩니다. C. 개체를 회전시키고 타이머를 X 초마다 호출하는 타이머를 만듭니다. – Aaron

+0

죄송합니다. 거기에 다양한 변수가 있습니다. 기본적으로이 함수는 마우스 오버시 호출되며 현재 객체와 그것의 인덱스를 전달합니다. 개체는 이미 올바른 각도로 스타일이 지정되어 있습니다. Nseconds마다 함수를 호출하는 함수 안에는 타이머가 있습니다. 이 함수는 학위를 증가시키고이를 CSS에 적용합니다. – Aaron

답변

1

이것은 파이어 폭스와 같은 것처럼 보입니다. 나는 고르지 않은 JS 애니메이션과 파이어 폭스에서만 볼 때 같은 문제가있다. Internet Explorer 9 (표준 모드 및 호환 모드 "IE7"및 "IE8")와 Chrome은 모두 모든 상황에서 부드러운 애니메이션을 표시합니다.

나를 믿어도 우리는이 문제가있는 유일한 사람이 아니며 하루에도 분명히 해결책이 존재하지 않습니다.

+0

우리는 이런 종류의 물건에 관해서는 석기 시대에 살고 있습니다. 및 FF 정말 성능에 실망입니다. (내가 버전 18에있어) – vsync

+0

Firefox 용 translate3d (0,0,0)를 변환 속성에 추가하면 브라우저에서 하드웨어 가속이 적용되므로 애니메이션이 부드럽게됩니다. 최고의 성능을 위해 페이지가로드 될 때 스타일 시트에 넣으십시오. http://jsfiddle.net/esAGA/16/ - –

관련 문제