изменить последовательность фоновых изображений как спрайт

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 никогда не будет работать так, как вы хотите. Это потому, что браузеру требуется время для загрузки изображения. Даже он кэширован, он все еще слишком медленный для анимации. Я предлагаю объединить ваши изображения в спрайт и изменить background-position. Вы даже можете сделать это с помощью чистого перехода 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.

Здесь нет, как вы можете предварительно загрузить ваши изображения http://jsfiddle.net/krasimir/DfWJm/1/

HTML

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

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"); 
}); 

Конечно, вы можете скрыть #preloader DIV с дисплей: нет ;

Answer 2

заказ http://spritely.net/

Он будет обрабатывать детали оживляющий spritesheet. Давайте установим FPS и контролируем воспроизведение.

Answer 3

Я думаю, что «каждая миллисекунда» слишком быстро.
Загрузка изображения занимает некоторое время. Я думаю, вы должны загрузить все изображения один раз, прежде чем запускать анимацию. Это займет некоторое время, так как количество изображений, которые вы используете, похоже, . И просто скрыть все, кроме одного, каждые несколько миллисекунд. «Несколько миллисекунд», а не «каждая миллисекунда», должны выполнять свою работу.

UPDATE:
Имя ваши изображения 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 соответственно, по мере необходимости.