Keyframes для сложных последовательностей

GSAP (GreenSock Animation Platform) предоставляет мощный инструмент для создания сложных анимационных последовательностей с помощью keyframes. Keyframes позволяют задавать последовательность изменений свойств элементов во времени, что упрощает создание сложных анимаций без необходимости вручную рассчитывать интервалы и задержки между анимациями.

gsap.to(".box", {
  keyframes: [
    { x: 100, rotation: 45, duration: 1 },
    { y: 50, scale: 1.5, duration: 0.5 },
    { x: 0, rotation: 0, scale: 1, duration: 1 }
  ]
});

В этом примере элемент .box последовательно изменяет позицию, поворот и масштаб. Каждое изменение задается отдельным объектом с указанием свойств и длительности (duration) анимации.

Формат keyframes

Каждый keyframe в GSAP — это объект, содержащий:

  • Свойства анимации: CSS-свойства или атрибуты, которые нужно анимировать (x, y, rotation, scale, opacity и т.д.).
  • Длительность (duration): время выполнения конкретного keyframe в секундах.
  • Задержка (delay): необязательное свойство, которое позволяет добавить паузу перед началом данного keyframe.
  • Инерция и easing: можно задавать индивидуальное сглаживание (ease) для каждого keyframe.
gsap.to(".circle", {
  keyframes: [
    { x: 200, ease: "power2.inOut", duration: 1 },
    { y: 100, ease: "bounce.out", duration: 0.8 },
    { opacity: 0, duration: 0.5, delay: 0.2 }
  ]
});

Последовательные и параллельные keyframes

Keyframes могут выполняться последовательно, но при использовании свойства position можно организовать параллельное выполнение нескольких анимаций.

gsap.to(".item", {
  keyframes: [
    { x: 100, duration: 1 },
    { y: 50, duration: 1, position: "-=0.5" }, // начинается на полсекунды раньше конца предыдущего
    { scale: 1.5, duration: 0.5 }
  ]
});

Использование position: "-=0.5" позволяет создать наложение анимаций и сложные синхронизированные эффекты.

Цикличные анимации с keyframes

Для создания бесконечных или повторяющихся последовательностей применяются свойства repeat и yoyo.

gsap.to(".square", {
  keyframes: [
    { x: 200, duration: 1 },
    { y: 100, duration: 1 },
    { rotation: 180, duration: 1 }
  ],
  repeat: -1, // бесконечное повторение
  yoyo: true // возврат в исходное состояние
});

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

Использование keyframes с Timeline

Timeline — это мощный инструмент для управления сложными последовательностями. Keyframes могут быть встроены в Timeline, что облегчает контроль над всей анимацией.

const tl = gsap.timeline({ defaults: { duration: 1 } });

tl.to(".circle", {
  keyframes: [
    { x: 100, rotation: 45 },
    { y: 50, scale: 1.2 },
    { x: 0, rotation: 0, scale: 1 }
  ]
});

tl.to(".square", { x: 200, duration: 1 }, "-=0.5"); // сдвиг относительно предыдущего keyframe

Использование Timeline позволяет:

  • Управлять всей последовательностью через play, pause, reverse;
  • Добавлять задержки и смещения для отдельных элементов;
  • Легко комбинировать несколько анимаций в единую структуру.

Настройка easing и кастомных функций

Для каждого keyframe можно задавать сглаживание движения через ease:

gsap.to(".triangle", {
  keyframes: [
    { x: 100, ease: "power1.in" },
    { y: 50, ease: "elastic.out(1, 0.3)" },
    { scale: 1.5, ease: "bounce.out" }
  ]
});

Также возможно использование кастомных функций, возвращающих значение свойства в зависимости от времени:

gsap.to(".line", {
  keyframes: [
    { x: t => Math.sin(t) * 100, duration: 2 },
    { y: t => Math.cos(t) * 50, duration: 2 }
  ]
});

Ключевые рекомендации

  • Минимизировать повторение кода: одинаковые свойства можно задавать через defaults в Timeline.
  • Смешивать последовательные и параллельные анимации: использование position позволяет гибко комбинировать эффекты.
  • Контролировать сложные движения через ease и функции: каждая часть keyframe может иметь индивидуальную динамику.
  • Использовать Timeline для структурирования: большие анимации легче читать и модифицировать.

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

Оглавление