2

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

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>

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

1 ответ 1

3

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

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;
}
<div id="mk"></div>

1
  • жесть мне очень понравился этот пример
    – user33274
    9 июн 2018 в 15:13

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.