You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

226 lines
8.1KB

  1. function Изображения(события, виды, анимации, корень)
  2. {
  3. this.создать = function()
  4. {
  5. this.умолчание = {
  6. пр: [0, 0, 100, 100],
  7. угол: 0,
  8. };
  9. this.задано = {};
  10. this.элементы = {};
  11. события.подписать(this);
  12. this._номер = 0;
  13. this._анимация = null;
  14. };
  15. // Ключи и события.
  16. this.обработатьКлюч = function(ключ, путь, значение)
  17. {
  18. if (путь[0] == "изображения")
  19. {
  20. var имя = путь[1];
  21. var свойство = путь.slice(2).join(".");
  22. this.обновитьЭлемент(имя, свойство, значение);
  23. }
  24. };
  25. this.обработатьСобытие = function(событие)
  26. {
  27. let в = "виды/";
  28. let а = "анимации/";
  29. if (событие.startsWith(в))
  30. {
  31. let вид = событие.substring(в.length);
  32. this.обновитьЭлементыВида(вид);
  33. }
  34. else if (событие.startsWith(а))
  35. {
  36. let анимация = событие.substring(а.length);
  37. this.обновитьЭлементыАнимации(анимация);
  38. }
  39. };
  40. this.обновитьЭлементыАнимации = function(анимация)
  41. {
  42. for (let имя in this.задано)
  43. {
  44. let за = this.задано[имя];
  45. let зан = за["анимация"];
  46. if (зан && зан == анимация)
  47. {
  48. this.обновитьВидАнимацию(имя, за["вид"], за["анимация"]);
  49. }
  50. }
  51. };
  52. this.обновитьЭлементыВида = function(вид)
  53. {
  54. for (let имя in this.задано)
  55. {
  56. let за = this.задано[имя];
  57. let заданныйВид = за["вид"];
  58. if (заданныйВид && заданныйВид == вид)
  59. {
  60. this.обновитьВидАнимацию(имя, за["вид"], за["анимация"]);
  61. }
  62. }
  63. };
  64. // Без вида и анимации.
  65. this.обновитьПозициюРазмерЭлемента = function(имя, эл)
  66. {
  67. let пр = this.пр(имя);
  68. эл.style.left = `${пр[0]}px`;
  69. эл.style.top = `${пр[1]}px`;
  70. эл.style.width = `${пр[2]}px`;
  71. эл.style.height = `${пр[3]}px`;
  72. };
  73. this.пр = function(имя)
  74. {
  75. let за = this.задано[имя];
  76. let пр = this.умолчание.пр;
  77. return [
  78. за["пр.0"] ? за["пр.0"] : пр[0],
  79. за["пр.1"] ? за["пр.1"] : пр[1],
  80. за["пр.2"] ? за["пр.2"] : пр[2],
  81. за["пр.3"] ? за["пр.3"] : пр[3],
  82. ];
  83. };
  84. this.создатьИлиПолучитьЭлемент = function(имя)
  85. {
  86. var эл = this.элементы[имя];
  87. if (эл)
  88. {
  89. return эл;
  90. }
  91. var ум = this.умолчание;
  92. эл = document.createElement("div");
  93. эл.id = `изображения-${имя}`;
  94. эл.style.position = "absolute";
  95. эл.style.display = "block";
  96. // Свойства по умолчанию.
  97. this.обновитьПозициюРазмерЭлемента(имя, эл);
  98. эл.style.transform = `rotate(${ум.угол}rad)`;
  99. this.элементы[имя] = эл;
  100. корень.appendChild(эл);
  101. return эл;
  102. };
  103. // Вид и анимация.
  104. this.обновитьУгол = function(имя)
  105. {
  106. var за = this.задано[имя];
  107. var ум = this.умолчание;
  108. var эл = this.элементы[имя];
  109. var угол = за.угол ? за.угол : ум.угол;
  110. var transform = `rotate(${угол}deg) `;
  111. let вид = за["вид"];
  112. if (вид)
  113. {
  114. let виза = виды.задано[вид];
  115. if (виза && виза["transform"])
  116. {
  117. transform += виза["transform"];
  118. }
  119. }
  120. эл.style.transform = transform;
  121. };
  122. this.обновитьВидАнимацию = function(имя, вид, анимация)
  123. {
  124. var эл = this.создатьИлиПолучитьЭлемент(имя);
  125. if (вид)
  126. {
  127. let за = виды.задано[вид];
  128. for (let параметр in за)
  129. {
  130. эл.style.setProperty(параметр, за[параметр]);
  131. }
  132. }
  133. if (анимация)
  134. {
  135. let за = анимации.задано[анимация];
  136. let в = Number(за["воспроизведений"]);
  137. let к0 = Number(за["кадр.0"]);
  138. let к1 = Number(за["кадр.1"]);
  139. let с = Number(за["скорость"]);
  140. let д0 = Number(за["диапазон.0"]);
  141. let д1 = Number(за["диапазон.1"]);
  142. let д2 = Number(за["диапазон.2"]);
  143. let д3 = Number(за["диапазон.3"]);
  144. if (в != null && к0 != null && к1 != null && с != null && д0 != null && д1 != null && д2 != null && д3 != null)
  145. {
  146. let кадр = [к0, к1];
  147. let диапазон = [д0, д1, д2, д3];
  148. /**/console.debug("ИГР Изображения.обновитьВА", в, кадр, с, диапазон);
  149. this._кадр = кадр;
  150. this._диапазон = диапазон;
  151. let ширинаДиапазона = Math.abs(д2 - д0);
  152. let высотаДиапазона = Math.abs(д3 - д1);
  153. let ширинаКадра = Math.abs(к0);
  154. let высотаКадра = Math.abs(к1);
  155. let кадровX = Math.floor(ширинаДиапазона / ширинаКадра);
  156. let кадровY = Math.floor(высотаДиапазона / высотаКадра);
  157. this._кадрыX = кадровX > кадровY;
  158. this._кадров = this._кадрыX ? кадровX : кадровY;
  159. this.анимация = setInterval(() => { this._анимировать(эл); }, с);
  160. }
  161. }
  162. this.обновитьУгол(имя);
  163. };
  164. this.обновитьЭлемент = function(имя, свойство, значение)
  165. {
  166. if (!this.задано[имя])
  167. {
  168. this.задано[имя] = {};
  169. }
  170. this.задано[имя][свойство] = значение;
  171. var за = this.задано[имя];
  172. var эл = this.создатьИлиПолучитьЭлемент(имя);
  173. if (свойство.startsWith("пр"))
  174. {
  175. this.обновитьПозициюРазмерЭлемента(имя, эл);
  176. }
  177. else if (
  178. (свойство == "угол") ||
  179. (свойство == "вид") ||
  180. (свойство == "анимация")
  181. ) {
  182. this.обновитьВидАнимацию(имя, за["вид"], за["анимация"]);
  183. }
  184. };
  185. this._анимировать = function(эл)
  186. {
  187. this._номер += 1;
  188. if (this._номер >= this._кадров)
  189. {
  190. this._номер = 0;
  191. }
  192. let x = this._кадрыX ? this._номер * this._кадр[0] : 0;
  193. let y = this._кадрыX ? 0 : this._номер * this._кадр[1];
  194. /**/console.log("ИГР Изображения._анимировать x/y", x, y);
  195. эл.style.backgroundPosition = `${x}px ${y}px`;
  196. };
  197. // Конструктор.
  198. this.создать();
  199. }