Как сделать спрайтовую анимацию?

338

05 июля 2018, 00:30

Как сделать спрайтовую анимацию,чтобы можно было разобраться и удобно настроить (ширину картинки и количество слайдов)? И еще нужно сделать чтобы персонаж двигался вперед. Есть такой код:

https://jsfiddle.net/jfhp8o21/

var styles = {}; 
styles.width = '112px'; 
styles.height = '150px'; 
 
spriteAnimation('mk', 'https://inter-net.pro/images/css/sprite-marsch.png', styles); 
 
function spriteAnimation(elementId, imgName, styles) { 
 
  var img = document.createElement('img'); 
  var offset = 0; 
  img.onload = function() { 
    var element = document.getElementById(elementId); 
    element.style.width = styles.width; 
    element.style.height = styles.height; 
    element.style.background = "url('" + imgName + "') " + offset + "px 50%"; 
    var i = 0; 
    interval = setInterval(function() { 
      if (offset < img.width) { 
        i = i + 18; 
      } else { 
        i = 0; 
      } 
      offset = 8.8 * i; 
      element.style.background = "url('" + imgName + "') " + offset + "px 50%"; 
 
    }, 1000 / 6) 
  } 
  img.src = imgName; 
}

<div id="mk"></div>

,но он очень странно работает.

Answer 1

Он очень странно работает, потому что вы используете очень странные цифры. Вот этот кусок, это какая то древняя магия, и она не работает:

if (offset < img.width) {
    i = i + 18; // что за 18?
} else {
    i = 0;
}
offset = 8.8 * i; // Что за 8.8?

i пусть лучше будет счетчиком кадров. А коэффицент умножения получается делением ширины картинки на количество спрайтов. И тогда всё более менее ровненько:

var styles = { 
  width: 112, 
  height: 150 
}; 
 
var frames = 6; // Количество кадров 
var speed = 8; // Размер одного шага 
 
spriteAnimation('mk', 'https://inter-net.pro/images/css/sprite-marsch.png', styles); 
 
function spriteAnimation(elementId, imgName, styles) { 
  var img = document.createElement('img'); 
  var offset = 0; 
  img.onload = function() { 
    var element = document.getElementById(elementId); 
    element.style.width = styles.width+'px'; 
    element.style.height = styles.height+'px'; 
    element.style.background = "url('" + imgName + "') " + offset + "px 50%"; 
    // i - номер кадра, pos - позиция персонажа (от левого края) 
    var i = 0, pos = 0; 
    // размер одного спрайта в пикселях 
    var step = img.width / frames; 
     
    interval = setInterval(function() { 
      // i крутиться от 5 до 0 
      // пришлось пустить счетчик задом наперёд, иначе он как будто шагает назад 
      if (--i < 0) i = frames - 1;  
      offset = step * i; // offset теперь проще вычислить. 
      element.style.background = "url('" + imgName + "') " + offset + "px 50%"; 
      // И еще нужно сделать чтобы персонаж двигался вперед. 
      pos += speed; 
      element.style.marginLeft = pos + 'px'; 
    }, 1000 / 6) 
  } 
  img.src = imgName; 
}