시퀀스를 위한 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은 정방향 및 역방향 애니메이션을 위한 전환 패턴을 지원합니다. 불리언 open 상태를 전달해 방향을 제어할 수 있습니다. open이 true이면 트레일이 숨겨진 상태에서 표시되는 상태로 애니메이션하고, false이면 표시된 상태에서 숨겨진 상태로 되돌아갑니다. 트레일은 순서를 자동으로 뒤집으므로 항목이 역순으로 사라집니다. 즉, 마지막 항목이 먼저 사라집니다.

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]와 같은 시점은 첫 번째 스프링이 시퀀스의 0% 지점에서 시작하고 두 번째 스프링이 50% 지점에서 시작한다는 뜻입니다. 선택적 세 번째 인수는 전체 시간을 밀리초 단위로 지정하며 기본값은 1000밀리초입니다. 따라서 [0, 0.5]와 2000밀리초를 사용하면 첫 번째 스프링은 0밀리초에 시작하고 두 번째 스프링은 1000밀리초에 시작합니다.

일반적인 패턴은 컨테이너를 확장하는 애니메이션에 useSpring을 사용하고, 그다음 내부 항목을 서서히 나타내는 애니메이션에 useTrail을 사용하는 것입니다. 두 요소에 참조를 연결한 다음 useChain([sizeRef, trailRef], [0, 0.5])을 사용하면 컨테이너가 먼저 확장되고 중간 시점에 항목이 나타납니다. 이 방식으로 영화 같은 2단계 진입 애니메이션을 만들 수 있습니다.

useChain은 페이지 전환에 적합합니다. 페이지 사이를 이동할 때 이전 페이지의 종료 애니메이션과 새 페이지의 진입 애니메이션을 연결할 수 있습니다. 종료 애니메이션이 먼저 완료되고(시점 0), 그다음 진입 애니메이션이 시작됩니다(시점 0.6). 따라서 갑작스럽게 전환하는 대신 부드럽게 이어집니다.

useTrail은 트레일에서의 위치에 따라 항목을 서로 다른 속도로 애니메이션하여 시차 스크롤 효과를 만들 수 있습니다. 트레일에서 더 뒤에 있는 항목은 늦게 시작하고 설정이 다를 수 있습니다. 예를 들어 장력이 더 낮으면 더 천천히 움직입니다. 깊이에 따른 이러한 시간 조절은 서로 다른 거리에 있는 물체의 시차 효과를 재현합니다.

useTrail(count, config)은 지정한 개수만큼의 스프링을 만들고 순서대로 애니메이션하여 목록이 일정한 간격으로 나타나게 합니다. 트레일과 항목을 동시에 순회하여 렌더링합니다. useSpringRef()는 useChain이 순서를 정하는 데 사용하는 참조를 만듭니다. useChain([ref1, ref2], [0, 0.5])은 비율로 지정한 시점을 사용해 여러 스프링을 조정합니다. 이 둘을 함께 사용하면 확장한 다음 표시하는 애니메이션과 같은 복잡한 다단계 시퀀스를 구현할 수 있습니다.