useTrail и useChain для последовательностей

useTrail(count, config) создаёт count пружин, которые анимируются последовательно с настраиваемой задержкой между ними. При запуске каскада первый элемент анимируется сразу, второй начинает немного позже, третий — ещё позже и так далее, создавая эффект веера или каскада.

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

Выведите список с каскадной анимацией, перебирая массив каскада: trail.map((spring, i) => React.createElement(animated.div, { style: spring, key: items[i].id }, items[i].content)). Каждый animated.div получает собственный объект пружины, поэтому элементы анимируются последовательно. Пружины запускаются в порядке индексов: 0, 1, 2, 3...

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

Объект конфигурации для useTrail такой же, как для useSpring: натяжение, трение и масса. Задержка между элементами определяется временем, за которое каждая пружина начинает работу, а оно зависит от общей физики пружины. Более жёсткие пружины с высоким натяжением создают более быстрое каскадное появление, а более мягкие пружины — более длительный каскад.

useSpringRef() создаёт ссылку, которую нужно передать хуку пружины через его параметр ref. Эта ссылка позволяет useChain управлять моментом запуска пружины. Создайте по одной ссылке для каждой пружины или каскада, которые нужно запускать последовательно: const springRef = useSpringRef(), а затем передайте её: useSpring({ ref: springRef, ... }).

useChain([ref1, ref2, ref3], [0, 0.5, 0.8]) выстраивает несколько пружин или каскадов в последовательность. Первый аргумент — массив springRefs в порядке их запуска. Второй аргумент — массив временных отметок от 0 до 1, указывающих, когда должна запускаться каждая пружина, как доля общей длительности.

В useChain временные отметки, например [0, 0.5], означают, что первая пружина запускается в начале последовательности, а вторая — на 50% её длительности. Необязательный третий аргумент задаёт общую длительность в миллисекундах (по умолчанию 1000 мс). Поэтому при значениях [0, 0.5] и 2000 мс первая пружина запускается через 0 мс, а вторая — через 1000 мс.

Распространённый шаблон: анимировать расширение контейнера (useSpring для размера), а затем плавное появление элементов внутри (useTrail для списка). Подключите ссылки к обоим компонентам, затем используйте useChain([sizeRef, trailRef], [0, 0.5]), чтобы сначала расширить контейнер, а на половине этого процесса показать элементы. Так создаётся эффектная двухэтапная анимация появления.

useChain идеально подходит для переходов между страницами. При переходе с одной страницы на другую объедините анимацию выхода старой страницы с анимацией появления новой. Сначала завершается выход (временная отметка 0), затем начинается появление (временная отметка 0,6). Это создаёт плавную передачу, а не резкое переключение.

С помощью useTrail можно создавать эффекты параллакса при прокрутке, анимируя элементы с разной скоростью в зависимости от их положения в каскаде. Элементы, находящиеся дальше в каскаде, начинают движение позже и могут иметь другую конфигурацию (с меньшим натяжением), из-за чего движутся медленнее. Такая зависящая от глубины временная схема имитирует эффект параллакса для объектов, находящихся на разных расстояниях.

Как useTrail создаёт последовательную задержку между элементами анимации?

useTrail(count, config) создаёт заданное число пружин, которые анимируются последовательно, формируя каскадное появление элементов списка. Для отображения одновременно перебирайте каскад и элементы. useSpringRef() создаёт ссылки, которые useChain использует для выстраивания последовательности. useChain([ref1, ref2], [0, 0.5]) управляет несколькими пружинами с временными отметками, заданными долями общей длительности. Вместе они позволяют создавать сложные многоэтапные последовательности, например сначала расширять контейнер, а затем показывать его содержимое.