Временные метки keyframes

В библиотеке anime.js ключевые кадры (keyframes) позволяют создавать сложные анимации, задавая последовательность изменений свойств объекта в определённые моменты времени. Это мощный инструмент для реализации динамических эффектов, где одно и то же свойство меняется несколько раз в рамках одной анимации.

Синтаксис keyframes

Для использования ключевых кадров в anime.js используется свойство keyframes, которое принимает массив объектов. Каждый объект описывает состояние анимируемого свойства на определённом этапе анимации:

anime({
  targets: '.box',
  keyframes: [
    { translateX: 250 },
    { translateY: 100 },
    { rotate: '1turn' },
    { scale: 1.5 }
  ],
  duration: 4000,
  easing: 'easeInOutSine'
});

Разбор кода:

  • targets — элементы, к которым применяются анимации.
  • Каждый объект в массиве keyframes задаёт новое значение свойства.
  • duration задаёт общую продолжительность всей анимации.
  • easing управляет кривой ускорения между ключевыми кадрами.

Управление временем keyframes

Каждый объект keyframe может содержать duration и easing для индивидуального контроля:

anime({
  targets: '.circle',
  keyframes: [
    { translateX: 200, duration: 1000, easing: 'easeOutQuad' },
    { translateY: 150, duration: 500, easing: 'easeInOutSine' },
    { rotate: '180deg', duration: 800, easing: 'linear' }
  ]
});
  • duration внутри keyframe задаёт длительность конкретного перехода до следующего кадра.
  • easing позволяет применять разные кривые ускорения к отдельным шагам анимации.

Использование задержек и смещений

Keyframes поддерживают свойства delay и offset, позволяющие управлять моментом старта анимации конкретного кадра:

anime({
  targets: '.star',
  keyframes: [
    { translateX: 100, offset: 0.2 },
    { translateY: 80, offset: 0.5 },
    { rotate: '360deg', offset: 1 }
  ],
  duration: 2000
});
  • offset — относительная позиция кадра в пределах всей анимации (0 — начало, 1 — конец).
  • С помощью offset можно синхронизировать несколько свойств в рамках одной анимации.

Комбинирование keyframes с обычными свойствами

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

anime({
  targets: '.triangle',
  opacity: [0, 1],
  keyframes: [
    { translateX: 100 },
    { translateY: 50 },
    { scale: 1.3 }
  ],
  duration: 3000,
  easing: 'easeInOutQuad'
});
  • opacity изменяется плавно на протяжении всей анимации, а translateX, translateY и scale проходят последовательные ключевые кадры.
  • Такой подход упрощает код и делает анимацию более предсказуемой.

Циклические и повторяющиеся анимации

Keyframes удобно комбинировать с параметрами loop и direction для создания повторяющихся или обратных анимаций:

anime({
  targets: '.hexagon',
  keyframes: [
    { translateX: 150 },
    { translateY: 100 },
    { rotate: '180deg' }
  ],
  duration: 2000,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutCubic'
});
  • loop: true позволяет анимации повторяться бесконечно.
  • direction: 'alternate' обеспечивает возврат к исходным значениям после завершения каждого цикла.

Работа с функциями в keyframes

Значения свойств могут задаваться функциями, что открывает возможности для динамических анимаций:

anime({
  targets: '.dot',
  keyframes: [
    { translateX: () => Math.random() * 300 },
    { translateY: () => Math.random() * 200 },
    { scale: () => Math.random() + 0.5 }
  ],
  duration: 1500,
  easing: 'easeInOutSine'
});
  • Функции вызываются при запуске анимации, что позволяет создавать уникальные движения для каждого элемента.

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

  • Для сложных анимаций использовать offset вместо большого количества duration отдельных keyframes — это упрощает синхронизацию.
  • Комбинировать keyframes с глобальными свойствами (opacity, scale) для плавного и предсказуемого поведения.
  • Разделять анимации на логические блоки, если ключевых кадров слишком много, чтобы облегчить поддержку кода.

Keyframes в anime.js обеспечивают гибкость и точный контроль над временной последовательностью анимации, позволяя создавать как простые, так и очень сложные эффекты без необходимости писать сложный цикл JavaScript.

Оглавление