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.

69 lines
2.9KB

  1. //let параметры = анимации.задано[анимация];
  2. function Анимация(элемент, параметры)
  3. {
  4. this.запустить = function()
  5. {
  6. let п = параметры;
  7. let воспроизведений = Number(п["воспроизведений"]);
  8. let скорость = Number(п["скорость"]);
  9. let к0 = Number(п["кадр.0"]);
  10. let к1 = Number(п["кадр.1"]);
  11. let д0 = Number(п["диапазон.0"]);
  12. let д1 = Number(п["диапазон.1"]);
  13. let д2 = Number(п["диапазон.2"]);
  14. let д3 = Number(п["диапазон.3"]);
  15. if (
  16. воспроизведений == null ||
  17. скорость == null ||
  18. к0 == null ||
  19. к1 == null ||
  20. д0 == null ||
  21. д1 == null ||
  22. д2 == null ||
  23. д3 == null
  24. ) {
  25. return;
  26. }
  27. let ширинаДиапазона = Math.abs(д2 - д0);
  28. let высотаДиапазона = Math.abs(д3 - д1);
  29. let ширинаКадра = Math.abs(к0);
  30. let высотаКадра = Math.abs(к1);
  31. let кадровПоГоризонтали = Math.floor(ширинаДиапазона / ширинаКадра);
  32. let кадровПоВертикали = Math.floor(высотаДиапазона / высотаКадра);
  33. this.номерКадра = 0;
  34. this.размерКадра = [к0, к1];
  35. this.поГоризонтаи = кадровПоГоризонтали > кадровПоВертикали;
  36. this.колвоКадров = this.поГоризонтали ? кадровПоГоризонтали : кадровПоВертикали;
  37. // Возможно, в будущем стоит заменить частные таймеры на один общий.
  38. // Вдруг в браузерах есть ограничение на количество таймеров от одной страницы.
  39. this.таймер = setInterval(() => { this.анимировать(); }, скорость);
  40. };
  41. this.остановить = function()
  42. {
  43. if (this.таймер)
  44. {
  45. clearInterval(this.таймер);
  46. }
  47. };
  48. this.анимировать = function()
  49. {
  50. this.номерКадра += 1;
  51. if (this.номерКадра >= this.колвоКадров)
  52. {
  53. this.номерКадра = 0;
  54. }
  55. let x = this.поГоризонтали ? this.номерКадра * this.размерКадра[0] : 0;
  56. let y = this.поГоризонтали ? 0 : this.номерКадра * this.размерКадра[1];
  57. элемент.style.backgroundPosition = `${x}px ${y}px`;
  58. };
  59. // Конструктор.
  60. this.запустить();
  61. }