//let параметры = анимации.задано[анимация]; function Анимация(элемент, параметры) { this.запустить = function() { let п = параметры; let воспроизведений = Number(п["воспроизведений"]); let скорость = Number(п["скорость"]); let к0 = Number(п["кадр.0"]); let к1 = Number(п["кадр.1"]); let д0 = Number(п["диапазон.0"]); let д1 = Number(п["диапазон.1"]); let д2 = Number(п["диапазон.2"]); let д3 = Number(п["диапазон.3"]); if ( воспроизведений == null || скорость == null || к0 == null || к1 == null || д0 == null || д1 == null || д2 == null || д3 == null ) { return; } let ширинаДиапазона = Math.abs(д2 - д0); let высотаДиапазона = Math.abs(д3 - д1); let ширинаКадра = Math.abs(к0); let высотаКадра = Math.abs(к1); let кадровПоГоризонтали = Math.floor(ширинаДиапазона / ширинаКадра); let кадровПоВертикали = Math.floor(высотаДиапазона / высотаКадра); this.номерКадра = 0; this.размерКадра = [к0, к1]; this.поГоризонтаи = кадровПоГоризонтали > кадровПоВертикали; this.колвоКадров = this.поГоризонтали ? кадровПоГоризонтали : кадровПоВертикали; // Возможно, в будущем стоит заменить частные таймеры на один общий. // Вдруг в браузерах есть ограничение на количество таймеров от одной страницы. this.таймер = setInterval(() => { this.анимировать(); }, скорость); }; this.остановить = function() { if (this.таймер) { clearInterval(this.таймер); } }; this.анимировать = function() { this.номерКадра += 1; if (this.номерКадра >= this.колвоКадров) { this.номерКадра = 0; } let x = this.поГоризонтали ? this.номерКадра * this.размерКадра[0] : 0; let y = this.поГоризонтали ? 0 : this.номерКадра * this.размерКадра[1]; элемент.style.backgroundPosition = `${x}px ${y}px`; }; // Конструктор. this.запустить(); }