2011-11-09 2 views
4

웹 페이지가 - http://schnell.dreamhosters.com/spriteanimate.html이 Javascript/jQuery 애니메이션을 어떻게 더 좋게 만들 수 있습니까?

페이지로 이동하여 '소스보기'를 클릭하면 모든 코드가 표시됩니다.

지금은 꽤 간단합니다. 오른쪽 화살표 키는 X를 오른쪽으로 만들고, 왼쪽 화살표 키는 왼쪽으로 이동시킵니다. 그는 적절한 방향으로 움직이는 애니메이션을 만들고 실제 이미지 요소는 같은 방향으로 움직입니다.

제가 지금 당장 가지고있는 주요 문제는 최적화입니다. 이 애니메이션을 조금이라도 놀면 애니메이션이 매끄럽지 않다는 것을 알게 될 것입니다. 처음 몇 초 동안은 여전히 ​​느껴질만큼 느려집니다. 왼쪽으로가는 애니메이션은 특히 유죄입니다. 또 다른 문제는 jQuery의 .animate()입니다. 그것은 일종의 중지 및 이동 동작을 수행하고 말할 수 있습니다. 이미지 요소의 움직임은 거칠고 아주 매끄럽지 않습니다.

jQuery의 .animate()는 easing 등으로 조정될 수 있지만, 그 대답 일 경우 때때로 실행 지연이나 무언가를 남기게됩니다. 누구도 제안 사항이 있습니까?

+0

일에 대해 전원

http://girliemac.com/sandbox/matrix.html

등을 크롬에서 작동하지만 보여주는 예입니다. – Wazzzy

+0

Chrome에서 완벽하게 작동합니다. Firefox는 문제입니다 ... – Wazzzy

답변

2

스프라이트 이미지에 이미지 미리로드를 사용하거나 더 나은 방법으로 하나의 이미지를 스프라이트로 사용하고 이미지 파일을 교체하는 대신 이미지 파일의 위치를 ​​이동하십시오. 이를 달성하기 위해 이미지를 배경 이미지로 설정하고 배경 위치를 이동해야합니다.

또한 선형 이징을 사용하십시오. 그렇지 않으면 느리게 들어가고 나가는 스윙으로 기본 설정됩니다.

0

표준 jQuery 애니메이션보다는 CSS3 전환을 사용해 보셨습니까? 이렇게하면 성능은 크게 향상되지만 크로스 브라우저 호환성은 떨어집니다. 여기에만 쿨 예를 들어, CSS3 애니메이션

http://css3.bradshawenterprises.com/

관련 문제