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

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

Простейший синтаксис выглядит так:

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

В этом примере объект сначала перемещается по оси X, затем по оси Y, и в конце выполняется полный поворот. Важно понимать, что каждый объект в массиве keyframes представляет собой отдельный шаг анимации, который может влиять на одно или несколько свойств одновременно.

Комбинирование нескольких свойств в одном keyframe

Каждый ключевой кадр может содержать сразу несколько свойств:

anime({
  targets: '.circle',
  keyframes: [
    { translateX: 100, scale: 1.5 },
    { translateY: 80, rotate: '45deg' },
    { scale: 1, rotate: '0deg' }
  ],
  duration: 3000,
  easing: 'easeInOutQuad'
});

В этом примере в первом ключевом кадре одновременно изменяются позиция по X и масштаб. Во втором кадре одновременно сдвигается объект по Y и вращается на 45°. Такой подход позволяет создавать синхронные эффекты без необходимости отдельно комбинировать несколько анимаций через anime.timeline.

Тайминги и задержки keyframes

Каждый ключевой кадр может содержать свои параметры времени, такие как duration, delay и easing. Это позволяет гибко управлять траекторией анимации и скоростью изменения отдельных свойств:

anime({
  targets: '.square',
  keyframes: [
    { translateX: 200, duration: 800 },
    { translateY: 100, duration: 600, delay: 200, easing: 'easeOutElastic(1, .8)' },
    { rotate: '180deg', scale: 0.5, duration: 1000 }
  ]
});

В данном примере первый ключевой кадр длится 800 мс, второй стартует с задержкой 200 мс и использует индивидуальный тип easing. Каждое свойство может иметь свои настройки, если указать их непосредственно внутри объекта keyframe.

Комбинация ключевых кадров с timeline

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

let tl = anime.timeline({
  easing: 'easeInOutSine',
  duration: 1000
});

tl.add({
  targets: '.box1',
  keyframes: [
    { translateX: 100, scale: 1.2 },
    { translateY: 50, scale: 0.8 }
  ]
})
.add({
  targets: '.box2',
  keyframes: [
    { translateY: 150, rotate: '90deg' },
    { translateX: 200, rotate: '180deg' }
  ], offset: '-=500'
});

Здесь первый блок keyframes начинает анимацию для .box1, второй блок для .box2 запускается с пересечением на 500 мс. Такой подход позволяет комбинировать анимации нескольких объектов и свойств одновременно, создавая сложные эффекты движения и трансформаций.

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

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

anime({
  targets: '.dot',
  keyframes: [
    { translateX: el => el.getAttribute('data-x'), scale: el => el.dataset.scale },
    { translateY: 200, rotate: el => el.dataset.rotate }
  ],
  duration: 1500,
  easing: 'easeInOutCubic'
});

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

Синхронизация свойств через offset

Для точной координации нескольких изменений свойств можно использовать параметр offset, который задает момент начала ключевого кадра относительно начала всей анимации:

anime({
  targets: '.triangle',
  keyframes: [
    { translateX: 150, offset: 0 },
    { translateY: 100, scale: 1.2, offset: 0.5 },
    { rotate: '360deg', offset: 0.75 }
  ],
  duration: 2000
});

В этом примере translateX начинается сразу, translateY и scale запускаются в середине анимации, а вращение — ближе к концу. Использование offset позволяет точно расставлять моменты изменения каждого свойства, делая анимацию более контролируемой и предсказуемой.

Практические советы

  • Группировка свойств: объединяйте логически связанные свойства в одном ключевом кадре, чтобы уменьшить количество шагов анимации и упростить код.
  • Индивидуальные easing: если требуется разное ускорение для отдельных свойств, задавайте easing внутри конкретного объекта keyframe.
  • Использование функций: динамическое вычисление значений делает анимацию гибкой при работе с коллекциями элементов.
  • Смешивание timeline и keyframes: для комплексных сцен удобно сочетать keyframes с timeline, чтобы управлять одновременной анимацией нескольких объектов.

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

Оглавление