Форум

tarkasha · #1 (**permalink**) 20.06.2019, 16:21

Здравствуйте. Я новичок. Делаю игру. Создал функцию, которая делает из фото анимацию, с помощью подмены классов css. Функция прекрасно работает с одним объектом, но если добавить 2 или более, то происходит хаос. Подозреваю что проблема в интервале, так как он для каждого объекта называется одинаково. Но не представляю как его сделать динамичнее. Вот скрипт:

Вызов скрипта

spriteAnimation(n, 90, 8, false);

n - объект, 90 скорость 8 количество кадров, false - однократное воспроизведение.

// Анимация движения (перебор спрайтов)  
function spriteAnimation(n,s,z,r){
    var obj = document.getElementById(n.name);
    var i = 0;
   // var cls= n.name + '_Run_' + i;
if(s == 'STOP'){
    
    clearInterval(heroGo);
   
    for(i = 0; i <= z; i++){
        obj.classList.remove(n.name +'Run_' + i)
        console.log('z: '+z+' i: '+i);
    }
    
    i = 0;
    obj.classList.add(n.name + 'Run_' + i);

}else{
    
     heroGo = setInterval(function(){
        console.log(z);
        if ( i < (z + 1)){
            if(i != 0){i--;}
            obj.classList.remove(n.name +'Run_' + i);
            i++;
            obj.classList.add(n.name +'Run_' + i);
            i++;
            
        }else if( i == (z + 1)){
            i--;
            obj.classList.remove(n.name +'Run_' + i);
            i = 0;
            obj.classList.add(n.name +'Run_' + i);
            
            if(r == true){
                clearInterval(heroGo);
            }
        }
       
    }, s);
}
}

Буду рад любому совету.

рони · #2 (**permalink**) 20.06.2019, 19:03

tarkasha,
клик по блоку старт/стоп анимации, количество повторений цикла можно задать, параметр iteration, например 1 раз new Sprite(element, 1000, 1);.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .sprite {
        width: 150px;
        height: 150px;
        overflow: hidden;
        position: relative;
    }
    .sprite img{
       opacity: 0;
       position: absolute;
    }
    .sprite img.show{
      opacity: 1;
    }
  </style>
  <script>
   class Sprite {
      constructor(element, speed, iteration) {
          this.root = element;
          this.children = [...element.children];
          this.index = 0;
          this.speed = speed;
          this.iteration = iteration;
          this.lastTime = performance.now();
          this.children[this.index].classList.add("show");
          this.timer = requestAnimationFrame(this.loop.bind(this));
          this.root[Symbol.for("sprite")] = this
      }
      loop(){
         let dt = performance.now() - this.lastTime;
         if(dt > this.speed){
         this.lastTime = performance.now();
         this.children[this.index].classList.remove("show");
         this.index++;
         this.index %= this.children.length;
         if(typeof this.iteration == "number") {
         this.index || this.iteration--;
         if(this.iteration <= 0) return
         }
         this.children[this.index].classList.add("show");
         }
         this.timer = requestAnimationFrame(this.loop.bind(this));
      }
      toggle(){
      this.timer = typeof this.timer == "number" ? (cancelAnimationFrame(this.timer), void 0) :
        (
        this.lastTime = performance.now(),
        requestAnimationFrame(this.loop.bind(this)));
      }
   }


    document.addEventListener("DOMContentLoaded", function(){
 	for(const element of document.querySelectorAll(".sprite")) {
        const html = Array.from({length : 8}, (v, k) => `<img src="https://via.placeholder.com/150/FF0000/FFFFFF?text=${++k}">`);
        element.insertAdjacentHTML('beforeEnd', html.join(''));
        new Sprite(element, 1000);
        element.addEventListener('click', ()=> element[Symbol.for("sprite")].toggle())
 	}

 })

  </script>
</head>

<body>
<div class="sprite"></div>
<div class="sprite"></div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript