Управление анимациями

Bliss.js предоставляет легкий и гибкий механизм управления анимациями DOM-элементов через методы, интегрированные с классами и стилями. Анимации реализуются с использованием CSS-переходов, keyframes и JavaScript-событий, при этом библиотека упрощает синхронизацию, управление задержками и цепочки эффектов.

Инициализация анимации

Анимация начинается с выбора элемента через селектор bliss.$() или коллекцию bliss.$$(). Для запуска анимации используется метод .animate():

bliss.$('#box').animate({
    transform: 'translateX(200px)',
    opacity: 0.5
}, {
    duration: 1000,
    easing: 'ease-in-out',
    complete: () => console.log('Анимация завершена')
});
  • transform, opacity, scale — наиболее часто используемые свойства для анимаций.
  • duration — длительность в миллисекундах.
  • easing — функция плавности (linear, ease-in, ease-out, ease-in-out).
  • complete — callback, выполняемый после завершения анимации.

Метод .animate() возвращает объект управления анимацией, который позволяет приостанавливать, возобновлять и отменять анимацию.

Управление последовательностью анимаций

Для сложных сценариев Bliss.js поддерживает цепочки анимаций через метод .chain(). Каждая анимация в цепочке выполняется после завершения предыдущей:

bliss.$('#box')
    .chain()
    .animate({ opacity: 0 }, { duration: 500 })
    .animate({ transform: 'translateY(100px)' }, { duration: 700 })
    .animate({ opacity: 1 }, { duration: 500 });
  • .chain() создает очередь анимаций для элемента.
  • Каждая последующая анимация автоматически запускается после окончания предыдущей.
  • Для динамического управления очередью можно использовать .pauseChain() и .resumeChain().

Повторение и циклы

Bliss.js позволяет повторять анимацию определенное количество раз или бесконечно. Для этого используется опция loop:

bliss.$('#spinner').animate({
    transform: 'rotate(360deg)'
}, {
    duration: 1000,
    loop: true,
    easing: 'linear'
});
  • Значение loop: true создаёт бесконечный цикл.
  • Числовое значение задает конкретное количество повторений.

Задержки и синхронизация

Для синхронизации нескольких анимаций применяются опции delay и stagger:

bliss.$$('.item').animate({
    opacity: 1,
    transform: 'translateY(0)'
}, {
    duration: 600,
    delay: 200,
    stagger: 100
});
  • delay — общая задержка перед запуском анимации.
  • stagger — позволяет смещать запуск анимаций для элементов коллекции, создавая эффект каскада.

Прерывание и отмена

Анимации можно останавливать в любой момент с помощью метода .stop():

let anim = bliss.$('#box').animate({ opacity: 0 }, { duration: 1000 });
setTimeout(() => anim.stop(), 500);
  • .stop() прерывает текущую анимацию и оставляет элемент в состоянии, достигнутом на момент вызова.
  • Для полной отмены и возврата к исходному состоянию используется .reset().

Работа с keyframes

Bliss.js поддерживает создание анимаций через keyframes, что позволяет задавать сложные последовательности изменений свойств:

bliss.$('#box').keyframe([
    { offset: 0, transform: 'translateX(0)', opacity: 1 },
    { offset: 0.5, transform: 'translateX(100px)', opacity: 0.5 },
    { offset: 1, transform: 'translateX(0)', opacity: 1 }
], {
    duration: 2000,
    easing: 'ease-in-out',
    loop: true
});
  • offset — процент прохождения анимации от 0 до 1.
  • Каждое состояние может задавать несколько CSS-свойств.
  • Поддерживаются циклы и функции плавности.

События анимаций

Bliss.js предоставляет события для отслеживания состояния анимации:

  • onStart — вызывается при начале анимации.
  • onProgress — вызывается при изменении состояния.
  • onComplete — вызывается при завершении.

Пример:

bliss.$('#box').animate({ opacity: 0 }, {
    duration: 800,
    onStart: () => console.log('Старт'),
    onProgress: (progress) => console.log(progress),
    onComplete: () => console.log('Завершено')
});

События помогают реализовывать интерактивные сценарии, например анимации при прокрутке или реакции на действия пользователя.

Анимации с классами

Bliss.js упрощает добавление и удаление классов с плавной анимацией через .addClass() и .removeClass() с опцией анимации:

bliss.$('#box').addClass('active', { animate: true, duration: 500 });
  • Позволяет анимировать переходы, заданные в CSS.
  • Совместимо с уже существующими стилями и keyframes.

Советы по оптимизации

  • Использовать transform и opacity вместо изменения top, left или width для GPU-ускорения.
  • Минимизировать количество одновременно анимируемых элементов для снижения нагрузки.
  • Применять stagger для создания визуально приятного эффекта без резкого увеличения нагрузки на рендеринг.

Bliss.js объединяет декларативный и программный подход к анимациям, предоставляя как простой запуск эффектов, так и полное управление последовательностями, задержками и событиями. Это делает библиотеку удобным инструментом для создания динамичных интерфейсов и сложных анимационных сценариев.

Оглавление