스프라이트 시트로 배경 이미지 시퀀스 변경

Question

개발할 대화 화면이 있습니다. 애니메이션과 같이 보이도록 매 밀리 초마다 배경 이미지를 변경하려고했습니다. jquery settimeout 및 setinterval 사용했지만 작은 간격으로 이미지 변경 스택을 브라우저, 내 작업을 수행하는 방법에 대한 모든 아이디어를 응답하지 않습니다.

function change_background(new_image_source) { 
    var myimage = $('#spriteanim'); 
    myimage.attr('src','style/images/Sprites/Screen1/'+new_image_source+'.png'); 
    console.log(myimage.attr('src')); 
    timer = setTimeout(function() { 
     new_image_source = new_image_source+1; 
     change_background(new_image_source); 
    }, 50); 

    if(new_image_source>=10899){ 
     change_background(new_image_source); 
     clearTimeout(timer); 
    } 
} 

Answer 1

src 속성을 변경하면 원하는대로 작동하지 않습니다. 브라우저가 이미지를로드 할 시간이 필요하기 때문입니다. 캐시 된 경우에도 여전히 애니메이션 효과가 느립니다. 나는 당신의 이미지를 스프라이트로 결합하고 배경 위치를으로 바꿀 것을 제안 할 것이다. 당신도 순수한 CSS 전환으로 그렇게 할 수 있습니다. 예를 들어

->http://jsfiddle.net/krasimir/uzZqg/

HTML

<div class="image"></div> 

CSS

.image { 
    background: url('...'); 
    width: 200px; 
    height: 200px; 
    transition: all 4000ms; 
    -webkit-transition: all 4000ms; 
} 
.image:hover { 
    background-position: -500px 0; 
} 

심지어 keyframes를 사용할 수 있습니다. 여기

당신이 디스플레이와 #preloader 사업부를 숨길 수 물론 JS

var images = [ 
'http://www.australia.com/contentimages/about-landscapes-nature.jpg', 
'http://www.australia.com/contentimages/about-landscapes-nature.jpg', 
'http://www.australia.com/contentimages/about-landscapes-nature.jpg', 
'http://www.australia.com/contentimages/about-landscapes-nature.jpg', 
'http://www.australia.com/contentimages/about-landscapes-nature.jpg', 
'http://www.australia.com/contentimages/about-landscapes-nature.jpg'  
]; 

var preloader = document.getElementById("preloader"); 
var preloadImages = function(callback) { 
    if(images.length == 0) { 
     callback(); 
     return; 
    } 
    var image = images.shift(); 
    var img = document.createElement("IMG"); 
    img.setAttribute("src", image); 
    preloader.appendChild(img); 
    img.addEventListener("load", function() { 
     console.log("image loaded"); 
     preloadImages(callback); 
    });  
} 

preloadImages(function() { 
    // your animation starts here 
    alert("Images loaded"); 
}); 

를 이미지 미리로드 http://jsfiddle.net/krasimir/DfWJm/1/

HTML

<div id="preloader"></div> 

수있는 방법입니다 : 없음 ;

Answer 2

체크 아웃하는 것은 http://spritely.net/

그것은 spritesheet 애니메이션의 세부 사항을 처리 할 수 ​​있습니다. FPS를 설정하고 재생을 제어합시다.

Answer 3

'매 밀리 초'가 너무 빠릅니다.
이미지로드에 약간의 시간이 걸립니다. 제 생각에는 애니메이션을 시작하기 전에 모든 이미지를 한 번로드해야합니다. 사용중인 이미지 수가 인 것 같습니다. 시간이 다소 걸릴 수 있습니다. 몇 밀리 초마다 1 개를 제외한 모든 것을 숨 깁니다. '밀리 세컨드 (millisecond)'대신에 '몇 밀리 초 (milliseconds)'가 당신의 일을해야합니다.

업데이트 :
이미지의 이름을 spriteanim0, spriteanim1 ... 이와 같이 지정하십시오. 모든 이미지가로드되었으며, 모든 display: none을 할당 한 후,이 기능을 JS 전화 : 필요에 따라

var new_image_source1; 
    function change_background(prev_image_source, new_image_source) { 
     document.getElementById('spriteanim' + prev_image_source).style.display = 'none'; 
     document.getElementById('spriteanim' + new_image_source).style.display = 'block'; 
     if (new_image_source >= 10899) 
      new_image_source1 = 0; 
     else 
      new_image_source1 = new_image_source + 1; 
     window.setTimeout(
      function() { 
       change_background(new_image_source, new_image_source1); 
      }, 
      50); 
    } 

당신이 시도하고 그에 따라 setTimeout 간격 값을 변경할 수 있습니다.