애니메이션 PNG 스프라이트로 AJAX 로딩 표시기에 대한 우수 사례/도구?

Question

분명히 GIF는 알파 채널을 지원하지 않습니다. 알파 채널이 가능한 "throbber", "spinner"또는 Ajax 로딩 표시기가 줄어들면 IE6 이후의 유일한 브라우저 옵션은 throbber의 모든 상태를 포함하는 sprited PNG 일 것 같습니다.

나는 배경이 원천이되는 클래스 또는 뭔가를 변경하여 프레임을 앞당기 기 위해 JavaScript를 사용하여 직접 애니메이션을 적용 할 것입니다 (사용 가능한 경우 requestAnimationFrame 사용).

나는 이것을 생성하는 데 도움이되는 것을 찾을 수없는 것 같습니다. 아무도 몰라? 내가 알아야 할 모범 사례? (예를 들어 나침반에는 CSS 부분을 자동화하기 위해 활용할 수있는 스프라이트 도우미가 있습니다.)

Answer 1

"모범 사례"는 없지만 많은 도구가 있습니다. 그곳에. "animated gif to sprite"를 검색하여 시작하십시오.

http://forums.tigsource.com/index.php?topic=9041.msg282280#msg282280

을 당신이 당신의 자바 스크립트 코드를 선호하는 방법은 애니메이션에 대한 옵션이 모두 따라 스프라이트가 있으면 : 당신이있는 경우 ImageMagick이이 게시물에서 살펴 설치.

브라우저 매트릭스는 무엇입니까? 사치 (FF, Safari, Chrome 등)가있는 경우 다음과 같은 CSS 애니메이션을 사용할 수 있습니다. 각 프레임은 100 픽셀 크기이고 스프라이트에는 5 프레임이 있다고 가정합니다.

#animatedImage { 
    width: 100px; 
    height: 100px; 
    background: transparent url(sprite.png) no-repeat 0 0; 
    animation-duration: 400ms; 
    animation-iteration-count: infinite; 
    animation-timing-function: step-start; 
    animation-name: animateSprite; 
} 
@-webkit-keyframes animateSprite { 
    0% { background-position: 0 0; } 
    20% { background-position: -400px 0; } 
    40% { background-position: -300px 0; } 
    60% { background-position: -200px 0; } 
    80% { background-position: -100px 0; } 
    100% { background-position: 0 0; } 
}