|
- function Изображения(события, виды, анимации, корень)
- {
- this.создать = function()
- {
- this.умолчание = {
- пр: [0, 0, 100, 100],
- угол: 0,
- };
- this.задано = {};
- this.элементы = {};
- события.подписать(this);
-
- this._номер = 0;
- this._анимация = null;
- };
-
- // Ключи и события.
-
- this.обработатьКлюч = function(ключ, путь, значение)
- {
- if (путь[0] == "изображения")
- {
- var имя = путь[1];
- var свойство = путь.slice(2).join(".");
- this.обновитьЭлемент(имя, свойство, значение);
- }
- };
-
- this.обработатьСобытие = function(событие)
- {
- let в = "виды/";
- let а = "анимации/";
- if (событие.startsWith(в))
- {
- let вид = событие.substring(в.length);
- this.обновитьЭлементыВида(вид);
- }
- else if (событие.startsWith(а))
- {
- let анимация = событие.substring(а.length);
- this.обновитьЭлементыАнимации(анимация);
- }
- };
-
- this.обновитьЭлементыАнимации = function(анимация)
- {
- for (let имя in this.задано)
- {
- let за = this.задано[имя];
- let зан = за["анимация"];
- if (зан && зан == анимация)
- {
- this.обновитьВидАнимацию(имя, за["вид"], за["анимация"]);
- }
- }
- };
-
- this.обновитьЭлементыВида = function(вид)
- {
- for (let имя in this.задано)
- {
- let за = this.задано[имя];
- let заданныйВид = за["вид"];
- if (заданныйВид && заданныйВид == вид)
- {
- this.обновитьВидАнимацию(имя, за["вид"], за["анимация"]);
- }
- }
- };
-
- // Без вида и анимации.
-
- this.обновитьПозициюРазмерЭлемента = function(имя, эл)
- {
- let пр = this.пр(имя);
- эл.style.left = `${пр[0]}px`;
- эл.style.top = `${пр[1]}px`;
- эл.style.width = `${пр[2]}px`;
- эл.style.height = `${пр[3]}px`;
- };
-
- this.пр = function(имя)
- {
- let за = this.задано[имя];
- let пр = this.умолчание.пр;
- return [
- за["пр.0"] ? за["пр.0"] : пр[0],
- за["пр.1"] ? за["пр.1"] : пр[1],
- за["пр.2"] ? за["пр.2"] : пр[2],
- за["пр.3"] ? за["пр.3"] : пр[3],
- ];
- };
-
- this.создатьИлиПолучитьЭлемент = function(имя)
- {
- var эл = this.элементы[имя];
- if (эл)
- {
- return эл;
- }
-
- var ум = this.умолчание;
- эл = document.createElement("div");
- эл.id = `изображения-${имя}`;
- эл.style.position = "absolute";
- эл.style.display = "block";
- // Свойства по умолчанию.
- this.обновитьПозициюРазмерЭлемента(имя, эл);
- эл.style.transform = `rotate(${ум.угол}rad)`;
- this.элементы[имя] = эл;
- корень.appendChild(эл);
- return эл;
- };
-
- // Вид и анимация.
-
- this.обновитьУгол = function(имя)
- {
- var за = this.задано[имя];
- var ум = this.умолчание;
- var эл = this.элементы[имя];
-
- var угол = за.угол ? за.угол : ум.угол;
- var transform = `rotate(${угол}deg) `;
-
- let вид = за["вид"];
- if (вид)
- {
- let виза = виды.задано[вид];
- if (виза && виза["transform"])
- {
- transform += виза["transform"];
- }
- }
-
- эл.style.transform = transform;
- };
-
-
- this.обновитьВидАнимацию = function(имя, вид, анимация)
- {
- var эл = this.создатьИлиПолучитьЭлемент(имя);
-
- if (вид)
- {
- let за = виды.задано[вид];
- for (let параметр in за)
- {
- эл.style.setProperty(параметр, за[параметр]);
- }
- }
-
- if (анимация)
- {
- let за = анимации.задано[анимация];
- let в = Number(за["воспроизведений"]);
- let к0 = Number(за["кадр.0"]);
- let к1 = Number(за["кадр.1"]);
- let с = Number(за["скорость"]);
- let д0 = Number(за["диапазон.0"]);
- let д1 = Number(за["диапазон.1"]);
- let д2 = Number(за["диапазон.2"]);
- let д3 = Number(за["диапазон.3"]);
-
- if (в != null && к0 != null && к1 != null && с != null && д0 != null && д1 != null && д2 != null && д3 != null)
- {
- let кадр = [к0, к1];
- let диапазон = [д0, д1, д2, д3];
- /**/console.debug("ИГР Изображения.обновитьВА", в, кадр, с, диапазон);
- this._кадр = кадр;
- this._диапазон = диапазон;
- let ширинаДиапазона = Math.abs(д2 - д0);
- let высотаДиапазона = Math.abs(д3 - д1);
- let ширинаКадра = Math.abs(к0);
- let высотаКадра = Math.abs(к1);
- let кадровX = Math.floor(ширинаДиапазона / ширинаКадра);
- let кадровY = Math.floor(высотаДиапазона / высотаКадра);
- this._кадрыX = кадровX > кадровY;
- this._кадров = this._кадрыX ? кадровX : кадровY;
- this.анимация = setInterval(() => { this._анимировать(эл); }, с);
- }
- }
-
- this.обновитьУгол(имя);
- };
-
- this.обновитьЭлемент = function(имя, свойство, значение)
- {
- if (!this.задано[имя])
- {
- this.задано[имя] = {};
- }
- this.задано[имя][свойство] = значение;
- var за = this.задано[имя];
- var эл = this.создатьИлиПолучитьЭлемент(имя);
-
- if (свойство.startsWith("пр"))
- {
- this.обновитьПозициюРазмерЭлемента(имя, эл);
- }
- else if (
- (свойство == "угол") ||
- (свойство == "вид") ||
- (свойство == "анимация")
- ) {
- this.обновитьВидАнимацию(имя, за["вид"], за["анимация"]);
- }
- };
-
- this._анимировать = function(эл)
- {
- this._номер += 1;
- if (this._номер >= this._кадров)
- {
- this._номер = 0;
- }
- let x = this._кадрыX ? this._номер * this._кадр[0] : 0;
- let y = this._кадрыX ? 0 : this._номер * this._кадр[1];
- /**/console.log("ИГР Изображения._анимировать x/y", x, y);
- эл.style.backgroundPosition = `${x}px ${y}px`;
- };
-
- // Конструктор.
- this.создать();
- }
|