использовать таймер физдвижка в анимациях

This commit is contained in:
2022-05-19 17:37:19 +03:00
parent dd0ae6d2b5
commit f0cdef815e
3 changed files with 40 additions and 23 deletions

View File

@@ -2,6 +2,8 @@ function Анимация(элемент, параметры)
{
this.запустить = function()
{
this.идёт = false;
let п = параметры;
let воспроизведений = Number(п["воспроизведений"]);
let скорость = Number(п["скорость"]);
@@ -32,26 +34,27 @@ function Анимация(элемент, параметры)
let кадровПоГоризонтали = Math.floor(ширинаДиапазона / ширинаКадра);
let кадровПоВертикали = Math.floor(высотаДиапазона / высотаКадра);
this.скорость = скорость;
this.номерВоспроизведения = 0;
this.колвоВоспроизведений = воспроизведений;
this.размерКадра = [к0, к1];
this.поГоризонтали = кадровПоГоризонтали > кадровПоВертикали;
this.номерКадра = 0;
this.номерКадра = -1;
this.колвоКадров = this.поГоризонтали ? кадровПоГоризонтали : кадровПоВертикали;
this.началоДиапазона = [д0, д1];
// Выставляем первоначальное значение в начало диапазона.
элемент.style.backgroundPosition = `${д0}px -${д1}px`;
// Возможно, в будущем стоит заменить частные таймеры на один общий.
// Вдруг в браузерах есть ограничение на количество таймеров от одной страницы.
this.таймер = setInterval(() => { this.анимировать(); }, скорость);
this.номерИтерации = null;
this.идёт = true;
};
this.остановить = function()
this.обновить = function(время)
{
if (this.таймер)
let итерация = Math.floor(время / this.скорость);
if (this.номерИтерации == итерация)
{
clearInterval(this.таймер);
return;
}
this.анимировать();
this.номерИтерации = итерация;
};
this.анимировать = function()
@@ -65,7 +68,7 @@ function Анимация(элемент, параметры)
this.колвоВоспроизведений > 0 &&
this.номерВоспроизведения >= this.колвоВоспроизведений
) {
this.остановить();
this.идёт = false;
return;
}
}