Массивы значений для keyframes

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

Синтаксис keyframes с массивами

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

anime({
  targets: '.box',
  keyframes: [
    { translateX: 250 },
    { translateX: 0 },
    { translateX: 150 }
  ],
  duration: 2000,
  easing: 'easeInOutSine'
});

В этом примере элемент .box перемещается сначала на 250 пикселей вправо, затем возвращается в исходное положение, а потом сдвигается на 150 пикселей. Порядок объектов в массиве определяет последовательность анимации.

Использование различных свойств в keyframes

Каждый объект keyframe может включать любые свойства анимируемого элемента: translateX, translateY, scale, rotate, opacity и другие. Можно комбинировать несколько свойств в одном кадре:

anime({
  targets: '.circle',
  keyframes: [
    { translateX: 100, scale: 1.5 },
    { translateY: 50, rotate: 45 },
    { scale: 1, opacity: 0.5 }
  ],
  duration: 3000,
  easing: 'easeOutQuad'
});

Здесь на каждом ключевом кадре происходит изменение нескольких свойств одновременно, создавая комплексное движение и трансформацию элемента.

Временные параметры для отдельных keyframes

Для более точного контроля можно задавать индивидуальную длительность и задержку для каждого keyframe через свойства duration и delay:

anime({
  targets: '.square',
  keyframes: [
    { translateX: 100, duration: 500 },
    { translateX: 0, delay: 200, duration: 700 },
    { translateY: 50, duration: 400 }
  ],
  easing: 'linear'
});

Первый кадр длится 500 мс, второй — начинается с задержкой 200 мс и длится 700 мс, третий кадр — 400 мс. Это позволяет создавать анимации с нестандартной ритмикой и акцентами на отдельных этапах движения.

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

Массивы значений keyframes интегрируются с параметрами loop и direction, что позволяет создавать циклические анимации:

anime({
  targets: '.triangle',
  keyframes: [
    { rotate: 0 },
    { rotate: 90 },
    { rotate: 180 },
    { rotate: 270 },
    { rotate: 360 }
  ],
  duration: 4000,
  easing: 'easeInOutCubic',
  loop: true,
  direction: 'alternate'
});

Здесь элемент последовательно поворачивается на 360°, после чего анимация повторяется в обратном направлении, создавая непрерывный эффект вращения.

Использование функций для динамических значений

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

anime({
  targets: '.dot',
  keyframes: [
    { translateX: () => Math.random() * 300 },
    { translateY: () => Math.random() * 200 },
    { scale: () => Math.random() + 0.5 }
  ],
  duration: 1500,
  easing: 'easeInOutSine'
});

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

Комбинация keyframes и свойств анимации на уровне targets

Кроме массива keyframes, можно задавать базовые параметры анимации, которые будут применяться ко всем кадрам:

anime({
  targets: '.star',
  keyframes: [
    { translateX: 100 },
    { translateY: 50 },
    { scale: 2 }
  ],
  duration: 2000,
  easing: 'easeInOutQuad',
  opacity: 0.8
});

В этом примере opacity: 0.8 применяется ко всем keyframes, а остальные свойства изменяются согласно массиву. Это позволяет комбинировать постоянные и изменяющиеся параметры.

Практические рекомендации

  • Для плавных переходов между ключевыми кадрами выбирать анимационную кривую (easing), соответствующую логике движения.
  • Для сложных последовательностей удобно разбивать анимацию на несколько keyframes, чем задавать одно длинное свойство с массивом значений.
  • Использование функций для keyframes помогает создавать реактивные анимации, которые адаптируются к состоянию DOM или случайным параметрам.
  • Совместное применение loop и direction с keyframes позволяет создавать бесшовные циклические анимации без лишнего кода.

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

Оглавление