Настройка duration и easing

Система анимации в Chart.js строится вокруг двух ключевых параметров: duration и easing. Эти настройки определяют поведение переходов при первичном рендеринге графика, обновлении данных и изменении конфигурации. Анимация управляется через блок options.animation, а также может быть переопределена на уровне отдельных операций обновления.

Внутренне библиотека использует requestAnimationFrame и интерполяцию значений, что позволяет плавно изменять числовые параметры датасетов, шкал и элементов графика.

duration: управление временем анимации

Параметр duration определяет длительность анимации в миллисекундах. Он влияет на скорость всех переходов, включая появление графика, изменение значений и перерасчёт элементов.

Базовая структура настройки:

const config = {
  type: 'line',
  data: {
    labels: ['Янв', 'Фев', 'Мар', 'Апр'],
    datasets: [{
      label: 'Продажи',
      data: [10, 20, 15, 30]
    }]
  },
  options: {
    animation: {
      duration: 1000
    }
  }
};

Особенности поведения duration

  • значение указывается в миллисекундах
  • 0 полностью отключает анимацию
  • слишком большие значения создают эффект «замедленного появления»
  • значение применяется ко всем анимируемым свойствам по умолчанию

Важная особенность заключается в том, что duration не просто задаёт скорость отрисовки, а влияет на математическую интерполяцию между начальным и конечным состоянием графика.

easing: функции плавности переходов

Параметр easing определяет характер изменения значений во времени. Он отвечает за то, как именно происходит движение между начальным и конечным состоянием.

Пример настройки:

options: {
  animation: {
    duration: 1200,
    easing: 'easeOutQuart'
  }
}

Основные типы easing

В Chart.js поддерживается набор предустановленных функций:

  • linear — равномерное изменение без ускорений
  • easeInQuad — медленный старт с ускорением
  • easeOutQuad — быстрое начало с замедлением
  • easeInOutQuad — комбинация ускорения и замедления
  • easeInCubic, easeOutCubic, easeInOutCubic — более выраженные кривые
  • easeInQuart, easeOutQuart, easeInOutQuart — сильная плавность на концах
  • easeInSine, easeOutSine — мягкие синусоидальные переходы
  • easeOutBounce — эффект «отскока»

Математическая природа easing

Каждая функция easing задаёт коэффициент интерполяции t, где:

  • t = 0 — начало анимации
  • t = 1 — завершение анимации

Функция преобразует линейное время в нелинейное значение:

value = start + (end - start) * easing(t)

При этом:

  • линейная функция сохраняет равномерное движение
  • квадратичные и кубические функции изменяют ускорение
  • синусоидальные функции создают мягкие переходы

Связь duration и easing

Эти параметры работают совместно и определяют визуальное поведение графика.

Короткая длительность + резкий easing

animation: {
  duration: 300,
  easing: 'easeOutQuad'
}

Характеристика:

  • быстрый отклик
  • резкое появление данных
  • подходит для интерактивных обновлений

Длительная анимация + мягкий easing

animation: {
  duration: 2000,
  easing: 'easeInOutCubic'
}

Характеристика:

  • плавное изменение состояния
  • выраженная инерция
  • используется для презентационных визуализаций

Длительная анимация + bounce easing

animation: {
  duration: 1500,
  easing: 'easeOutBounce'
}

Характеристика:

  • эффект «упругого» завершения
  • заметная визуальная динамика
  • применяется в декоративных графиках

Переопределение анимации для обновлений

Chart.js позволяет задавать параметры анимации не только глобально, но и при вызове обновления графика.

chart.update({
  duration: 800,
  easing: 'easeInOutQuad'
});

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

Анимация на уровне dataset

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

Пример влияния на элементы dataset:

options: {
  animation: {
    duration: 1200,
    easing: 'easeOutCubic'
  }
}

При этом каждый dataset интерполируется независимо, но в рамках общего тайминга.

Влияние на шкалы и элементы графика

Анимация распространяется не только на точки данных, но и на:

  • оси координат
  • сетку
  • легенду
  • tooltip-переходы

При изменении масштаба значений происходит пересчёт координат с использованием тех же параметров duration и easing.

Комбинации для разных типов графиков

Линейные графики

  • длительность: 800–1500 мс
  • easing: easeOutQuart

Подчеркивает плавность линий и переходов между точками.

Столбчатые диаграммы

  • длительность: 600–1200 мс
  • easing: easeOutCubic

Создаёт эффект «вырастания» столбцов.

Круговые диаграммы

  • длительность: 1000–2000 мс
  • easing: easeInOutSine

Обеспечивает равномерное раскрытие сегментов.

Ограничения и производственные аспекты

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

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

Контроль анимации через отключение

Полное отключение анимации:

options: {
  animation: {
    duration: 0
  }
}

Такой режим применяется при:

  • массовых обновлениях данных
  • серверной синхронизации
  • построении мгновенных отчётов

В этом случае Chart.js сразу применяет конечное состояние без промежуточных шагов.

Оглавление