|
@@ -0,0 +1,68 @@ |
|
|
|
|
|
//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.запустить(); |
|
|
|
|
|
} |