Библиотеки анимаций и их интеграция

Stimulus — это JavaScript-фреймворк, ориентированный на минимальное вмешательство в HTML. Он основывается на использовании контроллеров, которые связываются с элементами страницы через специальные атрибуты data-controller. Контроллеры состоят из методов и действий, которые могут быть вызваны через события DOM, такие как click или input.

Пример базового контроллера:

import { Controller } from "@hotwired/stimulus"

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

  greet() {
    this.outputTarget.textContent = "Привет, Stimulus!"
  }
}

HTML-разметка для этого контроллера выглядит так:

<div data-controller="greeting">
  <button data-action="click->greeting#greet">Сказать привет</button>
  <span data-greeting-target="output"></span>
</div>

Ключевые моменты:

  • data-controller связывает DOM с контроллером.
  • data-action связывает события с методами контроллера.
  • static targets позволяет ссылаться на определённые элементы внутри контроллера.

Интеграция анимаций с помощью сторонних библиотек

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

Пример с GSAP:

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

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

  animateBox() {
    gsap.to(this.boxTarget, { duration: 1, x: 200, rotation: 360, opacity: 0.5 })
  }
}

HTML-разметка:

<div data-controller="box">
  <div data-box-target="box" style="width:100px;height:100px;background:red;"></div>
  <button data-action="click->box#animateBox">Анимировать</button>
</div>

Особенности интеграции:

  • Изоляция логики: Stimulus-контроллер полностью управляет вызовами анимации.
  • Повторное использование: один и тот же метод может применяться к нескольким элементам через targets.
  • Декларативность событий: события DOM связываются напрямую с методами, без явного написания слушателей через addEventListener.

Использование lifecycle hooks для анимаций

Stimulus предоставляет несколько жизненных циклов контроллера, которые удобно использовать для анимаций:

  • connect(): вызывается при привязке контроллера к элементу. Можно использовать для инициализации начальных анимаций.
  • disconnect(): вызывается при удалении контроллера с DOM, полезно для очистки таймеров или отмены анимаций.
  • initialize(): вызывается один раз при создании экземпляра контроллера, до привязки к DOM.

Пример с анимацией при подключении:

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

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

  connect() {
    gsap.from(this.panelTarget, { opacity: 0, y: -50, duration: 0.8 })
  }
}

HTML:

<div data-controller="panel">
  <div data-panel-target="panel" class="panel">Контент панели</div>
</div>

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

Для сложных интерфейсов часто требуется управление состояниями анимации. Stimulus позволяет хранить состояние внутри контроллера и применять разные анимации в зависимости от состояния.

Пример переключения состояний:

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

export default class extends Controller {
  static targets = ["menu"]
  isOpen = false

  toggleMenu() {
    if (this.isOpen) {
      gsap.to(this.menuTarget, { x: -300, duration: 0.5 })
    } else {
      gsap.to(this.menuTarget, { x: 0, duration: 0.5 })
    }
    this.isOpen = !this.isOpen
  }
}

HTML:

<div data-controller="menu">
  <div data-menu-target="menu" class="menu">Меню</div>
  <button data-action="click->menu#toggleMenu">Меню</button>
</div>

Преимущества такого подхода:

  • Легко масштабировать анимации под разные элементы.
  • Управление логикой централизовано в контроллере.
  • Можно комбинировать с другими библиотеками и событиями DOM.

Комбинация Stimulus с CSS-анимациями

Для лёгких эффектов можно использовать CSS-классы и менять их через контроллер:

import { Controller } from "@hotwired/stimulus"

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

  toggleHighlight() {
    this.boxTarget.classList.toggle("highlight")
  }
}

CSS:

.highlight {
  transition: background-color 0.5s ease;
  background-color: yellow;
}

HTML:

<div data-controller="highlight">
  <div data-highlight-target="box" class="box">Элемент</div>
  <button data-action="click->highlight#toggleHighlight">Подсветить</button>
</div>

Плюсы подхода:

  • Минимум JavaScript для простых эффектов.
  • Сохраняется декларативность Stimulus.
  • CSS отвечает за анимацию, а контроллер — за логику управления состоянием.

Совместное использование нескольких библиотек

Stimulus позволяет параллельно использовать несколько библиотек. Например, GSAP для сложных трансформаций и Anime.js для анимаций текста. Контроллер может вызывать методы каждой библиотеки по мере необходимости, сохраняя структуру кода чистой и модульной.

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

Stimulus обеспечивает удобную архитектуру для интеграции любых анимаций, позволяя объединять декларативный HTML и мощные JavaScript-библиотеки без потери контроля над структурой приложения и управлением состояниями интерфейса.

Оглавление