78 linhas
3.3KB

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