Уничтожение анимаций: kill() и revert()

В библиотеке GSAP управление жизненным циклом анимаций играет критически важную роль, особенно при динамическом изменении интерфейсов. Методы kill() и revert() предоставляют возможность эффективно завершать или откатывать анимации, освобождая ресурсы и восстанавливая исходное состояние объектов.

Метод kill()

Метод kill() используется для остановки и удаления анимации. Он позволяет гибко управлять отдельными tween-ами или целыми таймлайнами.

Синтаксис:

tween.kill(vars);

Параметры:

  • vars (необязательный объект) – набор условий, определяющих, что именно будет уничтожено. Например, можно уничтожить только конкретное свойство анимируемого объекта.

Примеры использования:

  1. Уничтожение всей анимации:
let tween = gsap.to(".box", { x: 300, duration: 2 });
tween.kill();

В этом случае анимация полностью останавливается и удаляется из памяти. После вызова kill() объект .box больше не будет автоматически двигаться.

  1. Уничтожение конкретного свойства:
let tween = gsap.to(".box", { x: 300, y: 200, duration: 2 });
tween.kill({ x: true });

Анимация по оси x прекращается, а движение по оси y продолжается до завершения.

  1. Применение к таймлайну:
let tl = gsap.timeline();
tl.to(".box", { x: 300, duration: 2 })
  .to(".box", { y: 200, duration: 1 });

tl.kill();

Вся последовательность анимаций таймлайна останавливается сразу, освобождая ресурсы.

Ключевые особенности kill()

  • Не влияет на начальное состояние объекта (свойства сохраняются в том состоянии, в котором остановилась анимация).
  • Можно использовать для выборочного уничтожения конкретных tween-ов или свойств.
  • Позволяет безопасно освобождать память при динамическом создании множества анимаций.

Метод revert()

Метод revert() позволяет не просто остановить анимацию, а вернуть объект в исходное состояние до запуска анимации. Это особенно полезно при временных эффектах, hover-анимациях или интерактивных переходах.

Синтаксис:

tween.revert();

Примеры использования:

  1. Откат анимации:
let tween = gsap.to(".box", { x: 300, duration: 2 });
tween.revert();

После вызова revert() объект .box мгновенно возвращается в начальное положение, как если бы анимация никогда не запускалась.

  1. Использование с таймлайнами:
let tl = gsap.timeline();
tl.to(".box", { x: 300, duration: 2 })
  .to(".box", { y: 200, duration: 1 });

tl.revert();

Весь таймлайн откатывается, все свойства возвращаются к исходным значениям до запуска анимаций.

Ключевые особенности revert()

  • Восстанавливает исходное состояние объектов, игнорируя промежуточные значения.
  • Работает для отдельных tween-ов и целых таймлайнов.
  • Отличие от kill() заключается в том, что revert() возвращает объект в состояние до анимации, а kill() останавливает текущую анимацию, оставляя объект в текущем положении.

Сравнение kill() и revert()

Особенность kill() revert()
Прекращение анимации Да Да
Возврат к исходным значениям Нет Да
Применение к таймлайну Да Да
Освобождение ресурсов Да Да
Выборочное уничтожение свойств Да Нет

Использование этих методов позволяет гибко управлять динамическими интерфейсами, предотвращать лишние перерасчеты и сохранять производительность.

Рекомендации по применению

  1. Для анимаций, которые должны быть остановлены без отката — использовать kill().
  2. Для временных эффектов и интерактивных элементов, требующих возврата к исходному состоянию — использовать revert().
  3. При работе с таймлайнами комбинировать методы для частичного удаления и отката, что позволяет создавать сложные управляемые анимации.
  4. Всегда учитывать, что kill() оставляет объект в текущем состоянии, а revert() возвращает исходное, что влияет на дальнейшие последовательные анимации.

Методы kill() и revert() являются важными инструментами управления анимацией в GSAP, обеспечивая контроль над жизненным циклом анимаций, оптимизацию производительности и точное восстановление начальных состояний элементов.

Оглавление