Создал функцию, которая делает анимацию из фото. Работает некорректно. HELP
Здравствуйте. Я новичок. Делаю игру. Создал функцию, которая делает из фото анимацию, с помощью подмены классов 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); } } Буду рад любому совету. |
sprite, анимация из фото
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> |
Часовой пояс GMT +3, время: 12:27. |