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.создать(); }