Кастомные функции плавности

Smooth Scroll в JavaScript предоставляет мощные возможности для реализации плавной анимации прокрутки, позволяя управлять скоростью, траекторией и характером движения элементов. Основной инструмент для тонкой настройки — кастомные функции плавности, или easing functions. Они определяют, как изменяется скорость прокрутки во времени, создавая визуально естественное движение.

Принцип работы easing-функций

Easing-функция — это математическая функция, которая принимает на вход текущий прогресс анимации (значение от 0 до 1) и возвращает корректированное значение, определяющее положение скролла в данный момент. В Smooth Scroll это используется для расчёта промежуточных координат элемента при прокрутке.

Сигнатура функции:

function customEasing(t) {
    return t; // простейший линейный вариант
}

Здесь t — текущее нормализованное время анимации (0 — начало, 1 — конец). Возвращаемое значение также должно находиться в диапазоне [0,1].

Встроенные функции и их расширение

Smooth Scroll поставляется с набором встроенных easing-функций:

  • linear — равномерное движение;
  • easeInQuad, easeOutQuad, easeInOutQuad — квадратичные ускорения и замедления;
  • easeInCubic, easeOutCubic, easeInOutCubic — кубические кривые;
  • easeInQuart, easeOutQuart и т.д.

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

Создание собственной easing-функции

Для примера реализуем функцию с эффектом «мягкой инерции»:

function easeOutElastic(t) {
    const c4 = (2 * Math.PI) / 3;

    return t === 0
        ? 0
        : t === 1
        ? 1
        : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
}

Эта функция создаёт эффект, когда скролл достигает цели с лёгким «отскоком». Основная логика: экспоненциальное замедление с синусоидальной амплитудой.

Подключение кастомной функции к Smooth Scroll

Smooth Scroll позволяет задавать собственное easing-сопоставление через объект конфигурации:

const scroll = new SmoothScroll('a[href*="#"]', {
    speed: 800,
    easing: easeOutElastic
});

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

Комбинирование нескольких функций

Для более сложных анимаций можно комбинировать несколько easing-функций, создавая «мульти-этапные» кривые:

function customCombo(t) {
    if (t < 0.5) {
        return 2 * t * t; // ускорение на первой половине
    } else {
        return -1 + (4 - 2 * t) * t; // замедление на второй половине
    }
}

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

Влияние на пользовательский опыт

  • Плавность: правильно выбранная easing-функция создаёт ощущение естественного движения.
  • Контрастность: резкие функции ускорения и замедления могут привлечь внимание к важным блокам.
  • Читаемость интерфейса: медленные, мягкие кривые подходят для длинных страниц и лендингов.

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

  1. Эксперимент с кривыми: проверка разных комбинаций t и математических функций помогает подобрать визуально приятный эффект.
  2. Умеренные значения времени: слишком быстрые скроллы с кастомными функциями могут выглядеть дерганно.
  3. Кроссбраузерная совместимость: Smooth Scroll корректно обрабатывает кастомные функции во всех современных браузерах.
  4. Использование физических моделей: экспонента, синус, кубические кривые позволяют имитировать инерцию и реалистичную динамику.

Расширенные примеры

Функция с замедленным стартом и ускоренным завершением:

function easeInFastOut(t) {
    return t < 0.3 
        ? Math.pow(t, 3) * 4
        : 1 - Math.pow(1 - t, 2) * 0.5;
}

Пульсирующая функция для акцентов:

function pulse(t) {
    return Math.sin(t * Math.PI);
}

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

Итоговые ключевые моменты

  • Кастомные easing-функции управляют характером прокрутки.
  • Любая функция должна принимать t от 0 до 1 и возвращать значение в том же диапазоне.
  • Комбинация математических функций позволяет создавать уникальные визуальные эффекты.
  • Настройка функции напрямую влияет на восприятие сайта и удобство навигации.
Оглавление