Кривые анимации

Tippy.js поддерживает настройку анимации всплывающих подсказок, включая возможность использовать кастомные кривые анимации через CSS-свойство transition-timing-function или через встроенные функции анимации. Это позволяет создавать плавные, реалистичные эффекты появления и исчезновения тултипов, соответствующие визуальному стилю интерфейса.

Встроенные анимации

По умолчанию Tippy.js предлагает несколько стандартных анимаций:

fade — плавное исчезновение с изменением прозрачности.
scale — комбинированная анимация масштабирования и изменения прозрачности.
shift-toward — смещение тултипа к цели при появлении.
perspective — трёхмерная анимация с эффектом глубины.

Пример использования встроенной анимации:

tippy('#myButton', {
  content: 'Пример тултипа',
  animation: 'scale',
  duration: 400
});

Здесь duration задаёт длительность анимации в миллисекундах, а animation определяет стиль движения.

Кастомные кривые

Для создания уникальных эффектов движения Tippy.js позволяет использовать кастомные кривые через CSS. Ключевое свойство — transitionTimingFunction в параметрах анимации. Можно применять стандартные CSS-функции:

linear — постоянная скорость.
ease — плавное ускорение и замедление.
ease-in — ускорение в начале.
ease-out — замедление в конце.
cubic-bezier(x1, y1, x2, y2) — точный контроль кривой анимации.

Пример кастомной кривой с использованием cubic-bezier:

tippy('#myButton', {
  content: 'Кастомная кривая',
  animation: 'scale',
  duration: 500,
  onShow(instance) {
    instance.popper.style.transitionTimingFunction = 'cubic-bezier(0.68, -0.55, 0.27, 1.55)';
  }
});

В этом примере используется “overshoot” кривая, при которой тултип слегка выходит за пределы конечной позиции, а затем возвращается, создавая эффект упругости.

Использование Popper.js для плавности

Tippy.js построен на базе Popper.js, что позволяет контролировать позиционирование и движение подсказок. Для улучшения анимаций важно учитывать:

popperOptions — передача параметров в Popper.js, включая modifiers для сглаживания смещения.
flip и offset — предотвращение резких скачков при изменении позиции.
gpuAcceleration — использование аппаратного ускорения для плавности transform-анимаций.

Пример использования Popper-модификатора для сглаживания:

tippy('#myButton', {
  content: 'Сглаженная анимация',
  animation: 'shift-toward',
  duration: 400,
  popperOptions: {
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [0, 10]
        }
      }
    ]
  }
});

Пошаговое создание сложной анимации

Выбор типа анимации (fade, scale, shift-toward или кастомная).
Настройка длительности через duration.
Определение кривой движения через transitionTimingFunction.
Применение Popper-модификаторов для плавного позиционирования.
Опциональные события onShow, onHide для динамических эффектов.

Пример комплексной анимации с кастомной кривой и масштабированием:

tippy('#myButton', {
  content: 'Сложная анимация',
  animation: 'scale',
  duration: 600,
  onShow(instance) {
    instance.popper.style.transitionTimingFunction = 'cubic-bezier(0.25, 1, 0.5, 1)';
  },
  popperOptions: {
    modifiers: [
      { name: 'offset', options: { offset: [0, 15] } }
    ]
  }
});

Эта конфигурация создаёт эффект мягкого вылета с ускорением в конце и лёгким смещением подсказки.

Принципы выбора кривой анимации

Ease-in подходит для появления объектов, создавая ощущение ускорения.
Ease-out удобна для скрытия тултипов, делая исчезновение плавным.
Cubic-bezier позволяет создавать сложные эффекты: упругость, затухание, “bounce”.
Согласованность интерфейса — кривые анимации должны соответствовать остальным элементам интерфейса для визуальной гармонии.