JavaScript анимации в контроллерах

Stimulus — это легковесный JavaScript-фреймворк, ориентированный на улучшение интерактивности HTML без сложного связывания данных. Контроллеры в Stimulus связываются с элементами DOM через атрибут data-controller и позволяют организовать поведение страницы в виде модульных компонентов. Каждый контроллер представляет собой класс, наследующий Controller из пакета @hotwired/stimulus, с заранее определёнными методами жизненного цикла: connect, disconnect и initialize.

Пример базовой структуры контроллера:

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["box"];

  connect() {
    console.log("Контроллер подключён");
  }

  disconnect() {
    console.log("Контроллер отключён");
  }
}

Ключевой момент: static targets позволяет указать элементы DOM, с которыми будет работать контроллер, облегчая доступ через this.boxTarget.

Организация анимаций в Stimulus

Stimulus не предоставляет встроенного движка анимаций, но идеально интегрируется с CSS-анимациями и библиотеками типа GSAP или Anime.js. Основной подход — управление состоянием классов и стилей элементов через методы контроллера.

Работа с классами для анимации

CSS-анимации запускаются при изменении классов. Контроллер управляет состояниями элементов:

animateBox() {
  this.boxTarget.classList.add("animate");
  this.boxTarget.addEventListener("animationend", () => {
    this.boxTarget.classList.remove("animate");
  }, { once: true });
}

Пояснение: once: true гарантирует, что обработчик сработает один раз, предотвращая накопление событий при многократных анимациях.

Использование переходов CSS через requestAnimationFrame

Для более точного контроля анимации используется requestAnimationFrame. Этот подход позволяет плавно менять стили, избегая резких скачков:

fadeIn() {
  let opacity = 0;
  const step = () => {
    opacity += 0.05;
    this.boxTarget.style.opacity = opacity;
    if (opacity < 1) {
      requestAnimationFrame(step);
    }
  };
  requestAnimationFrame(step);
}

Ключевой момент: requestAnimationFrame синхронизируется с частотой обновления экрана, что обеспечивает максимально плавное воспроизведение анимаций.

Контроллер как менеджер состояний

Для сложных интерфейсов контроллер может выступать как состояние-менеджер. Пример: управление анимацией появления модального окна с разными стадиями.

static classes = ["visible", "hidden"];

showModal() {
  this.element.classList.add(this.visibleClass);
  this.element.classList.remove(this.hiddenClass);
}

hideModal() {
  this.element.classList.add(this.hiddenClass);
  this.element.classList.remove(this.visibleClass);
}

Пояснение: использование static classes позволяет хранить имена CSS-классов централизованно, упрощая поддержку и изменения анимаций.

Интеграция с внешними библиотеками анимаций

Stimulus контроллеры отлично сочетаются с GSAP:

import { Controller } from "@hotwired/stimulus";
import gsap from "gsap";

export default class extends Controller {
  static targets = ["box"];

  animateBox() {
    gsap.to(this.boxTarget, { x: 100, opacity: 1, duration: 1 });
  }
}

Ключевой момент: использование сторонних библиотек позволяет создавать сложные анимации без перегрузки контроллера ручным управлением стилями через циклы и таймеры.

События и пользовательские триггеры

Stimulus предоставляет удобный механизм связывания событий через data-action. Это упрощает запуск анимаций без необходимости писать отдельные слушатели вручную:

<div data-controller="animation" data-action="click->animation#animateBox" data-animation-target="box">
  Нажми для анимации
</div>
animateBox() {
  this.boxTarget.classList.add("animate");
}

Пояснение: событие click автоматически вызывает метод контроллера, обеспечивая чистую и модульную архитектуру.

Комбинирование анимаций и динамических данных

Контроллеры могут использовать динамические данные через data- атрибуты, чтобы изменять параметры анимации:

<div data-controller="animation" data-animation-duration-value="500">
  Анимируемый блок
</div>
static values = { duration: Number }

animateBox() {
  this.boxTarget.style.transition = `all ${this.durationValue}ms ease`;
  this.boxTarget.style.transform = "translateX(100px)";
}

Ключевой момент: static values обеспечивает гибкость, позволяя конфигурировать анимации через HTML без изменения кода JavaScript.

Практические советы по организации анимаций

  • Разделять визуальные эффекты и бизнес-логику: контроллер отвечает только за поведение, стили задаются через CSS или сторонние библиотеки.
  • Использовать targets, classes и values для структурирования кода и упрощения повторного использования.
  • Минимизировать использование таймеров setTimeout для анимаций, отдавая предпочтение requestAnimationFrame и CSS-анимациям.
  • Добавлять обработку событий окончания анимаций (animationend или transitionend) для синхронизации с логикой приложения.
  • Применять внешние библиотеки для сложных или многокомпонентных анимаций, чтобы не перегружать контроллер низкоуровневым кодом.

Эта методика позволяет создавать интерактивные, отзывчивые интерфейсы с чистой архитектурой, сохраняя преимущества модульности и простоты, заложенные в Stimulus.

Оглавление