83 lines
3.7 KiB
JavaScript
83 lines
3.7 KiB
JavaScript
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.колвоВоспроизведений = воспроизведений;
|
|
this.размерКадра = [к0, к1];
|
|
this.поГоризонтали = кадровПоГоризонтали > кадровПоВертикали;
|
|
this.номерКадра = 0;
|
|
this.колвоКадров = this.поГоризонтали ? кадровПоГоризонтали : кадровПоВертикали;
|
|
this.началоДиапазона = [д0, д1];
|
|
// Выставляем первоначальное значение в начало диапазона.
|
|
элемент.style.backgroundPosition = `${д0}px -${д1}px`;
|
|
// Возможно, в будущем стоит заменить частные таймеры на один общий.
|
|
// Вдруг в браузерах есть ограничение на количество таймеров от одной страницы.
|
|
this.таймер = setInterval(() => { this.анимировать(); }, скорость);
|
|
};
|
|
|
|
this.остановить = function()
|
|
{
|
|
if (this.таймер)
|
|
{
|
|
clearInterval(this.таймер);
|
|
}
|
|
};
|
|
|
|
this.анимировать = function()
|
|
{
|
|
this.номерКадра += 1;
|
|
if (this.номерКадра >= this.колвоКадров)
|
|
{
|
|
this.номерВоспроизведения += 1;
|
|
this.номерКадра = 0;
|
|
if (
|
|
this.колвоВоспроизведений > 0 &&
|
|
this.номерВоспроизведения >= this.колвоВоспроизведений
|
|
) {
|
|
this.остановить();
|
|
return;
|
|
}
|
|
}
|
|
|
|
let x0 = this.началоДиапазона[0];
|
|
let y0 = this.началоДиапазона[1];
|
|
let x = this.поГоризонтали ? x0 + this.номерКадра * this.размерКадра[0] : x0;
|
|
let y = this.поГоризонтали ? y0 : y0 + this.номерКадра * this.размерКадра[1];
|
|
элемент.style.backgroundPosition = `${x}px -${y}px`;
|
|
};
|
|
|
|
// Конструктор.
|
|
this.запустить();
|
|
}
|