|
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- 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.таймер = 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 x = this.поГоризонтали ? this.номерКадра * this.размерКадра[0] : 0;
- let y = this.поГоризонтали ? 0 : this.номерКадра * this.размерКадра[1];
- элемент.style.backgroundPosition = `${x}px ${y}px`;
- };
-
- // Конструктор.
- this.запустить();
- }
|