스와이프 백 애니메이션 덜컥임 이슈

안녕하세요.

react-ui-core의 swipe back 애니메이션 (curpertino theme)에서 덜컥임이 느껴지는 현상이 있어 이슈를 공유드립니다.

1. 배경

useStyleEffectSwipeBack 훅에서 스와이프백 제스처 중 touchend 가 발생하면, 해당 시점의 v(속도)를 기준으로 스와이프 백 여부를 판단하고 있습니다.

https://github.com/daangn/stackflow/blob/57fd2da00bffe25d0865baaffac63b2db394814d/extensions/react-ui-core/src/useStyleEffectSwipeBack.ts#L261-L276

스와이프 되었다고 판단된 경우 pop 이 실행되고, 이후 resetActivity를 호출하여 swipe back 애니메이션이 진행됩니다.

https://github.com/daangn/stackflow/blob/57fd2da00bffe25d0865baaffac63b2db394814d/extensions/react-ui-core/src/useStyleEffectSwipeBack.ts#L82-L88

스와이프 백 애니메이션은 translate3d + transition 기반으로 처리되고 있습니다.

2. 문제점

현재 구현 방식에서는 touchend 직전의 사용자 터치 이동 속도가 애니메이션 시작 구간에 반영되고 있지 않습니다.
이를 거리-시간 그래프로 표현하면 아래와 같은 형태가 됩니다.

빨간 원으로 표시한 지점처럼, 애니메이션 시작 시점에서 속도가 불연속적으로 변화하게 됩니다.
즉, 해당 지점은 미분 불가능한 지점이되며 그 결과 사용자 입장에서는 덜컥임이 체감됩니다.
특히 빠르게 스와이프 할 수록 이 덜컥임은 심하게 느껴집니다.

https://github.com/user-attachments/assets/b7623212-4b00-4950-9026-075f815ca695

녹화 영상 올려드립니다.
(녹화본으로는 잘 체감되지는 않은 것 같습니다.)

프로젝트에서 stackflow 오픈소스 정말 잘 사용하고 있습니다.
좋은 오픈소스 만들어주셔서 감사합니다.

Start with extensions/react-ui-core/src/useStyleEffectSwipeBack.ts, especially the touchend velocity decision and the resetActivity call at the referenced lines. Reproduce a fast swipe and inspect the translate3d and transition behavior during the handoff to the swipe-back animation. Done means the animation begins without the reported velocity discontinuity or visible jolt.