Создание keyframes

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

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

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

Здесь анимация последовательно перемещает элемент по X, затем по Y и вращает его на один оборот. Продолжительность всей анимации задается через duration, а easing определяет характер движения между ключевыми кадрами.

Порядок исполнения и временные интервалы

Каждый объект внутри keyframes выполняется последовательно. Можно явно задавать момент времени для конкретного ключевого кадра с помощью свойства duration:

anime({
  targets: '.circle',
  keyframes: [
    { translateX: 100, duration: 500 },
    { translateY: 50, duration: 1000 },
    { scale: 1.5, duration: 700 }
  ],
  easing: 'linear'
});

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

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

anime.js поддерживает анимацию как CSS-свойств, так и атрибутов SVG. Ключевые кадры могут включать любые числовые и цветовые значения:

anime({
  targets: '.svg-shape',
  keyframes: [
    { strokeDashoffset: [anime.setDashoffset, 0] },
    { stroke: '#FF0000', duration: 800 },
    { strokeWidth: 5 }
  ],
  easing: 'easeInOutQuad'
});
  • strokeDashoffset используется для анимации обводки пути.
  • Можно анимировать цветовые свойства, используя строки в формате HEX или RGB.
  • Поддерживаются как абсолютные, так и относительные значения (+=50, -=20).

Цепочка keyframes с разными easing

Каждому ключевому кадру можно задавать собственную функцию сглаживания движения:

anime({
  targets: '.square',
  keyframes: [
    { translateX: 200, easing: 'easeOutBounce' },
    { translateY: 150, easing: 'easeInOutSine' },
    { rotate: 180, easing: 'easeInQuad' }
  ],
  duration: 2000
});

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

Задержки и синхронизация

Для управления временем старта каждого ключевого кадра применяется delay:

anime({
  targets: '.dots circle',
  keyframes: [
    { scale: 2, delay: 200 },
    { scale: 1, delay: 400 },
    { scale: 1.5 }
  ],
  duration: 600,
  loop: true
});
  • delay задается в миллисекундах и добавляется к текущему моменту анимации.
  • Можно комбинировать с глобальной задержкой через параметр delay на уровне всей анимации.

Анимация нескольких элементов

Ключевые кадры отлично подходят для последовательной анимации группы элементов с помощью селектора:

anime({
  targets: '.items div',
  keyframes: [
    { translateY: -50 },
    { translateX: 100 },
    { rotate: '0.5turn' }
  ],
  delay: anime.stagger(200),
  duration: 1000,
  easing: 'easeInOutCubic'
});
  • anime.stagger() позволяет автоматически распределять задержки между элементами, создавая эффект «волны» или «цепочки».
  • Каждый элемент проходит весь набор ключевых кадров с индивидуальной задержкой.

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

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

const tl = anime.timeline({ loop: true });

tl.add({
  targets: '.box',
  keyframes: [
    { translateX: 200 },
    { translateY: 100 }
  ],
  duration: 1000
})
.add({
  targets: '.circle',
  keyframes: [
    { scale: 2 },
    { scale: 1 }
  ],
  duration: 800,
  offset: '-=500' // запуск частично одновременно с предыдущей анимацией
});
  • offset позволяет задавать смещение относительно предыдущего блока.
  • Сочетание timeline и keyframes открывает возможности для сложных мультирезультатных анимаций с разными элементами, без создания множества отдельных вызовов anime().

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

  1. Минимизировать дублирование: Если несколько кадров имеют одинаковые свойства, их можно объединить в один объект с массивом значений.
  2. Использовать относительные значения: '+=50' или '-=20' делают анимацию более гибкой и независимой от текущего состояния элемента.
  3. Тестировать easing для каждого кадра: Разные функции сглаживания могут кардинально менять восприятие движения.
  4. Комбинировать с timeline для комплексных интерфейсных анимаций, чтобы легко управлять зависимостями и параллельными эффектами.

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

Оглавление