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

[jochongs]

안녕하세요.

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

1. 배경

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

stackflow/extensions/react-ui-core/src/useStyleEffectSwipeBack.ts

Lines 261 to 276 in 57fd2da

	const onTouchEnd = () => {
	if (!x0 || !t0 || !x) {
	resetState();
	return;
	}
	const t = Date.now();
	const v = (x - x0) / (t - t0);
	const swiped = v > 1 || x / $paper.clientWidth > 0.4;
	onSwipeEnd?.({ swiped });
	Promise.resolve()
	.then(() => resetActivity({ swiped }))
	.then(() => resetState());
	};

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

stackflow/extensions/react-ui-core/src/useStyleEffectSwipeBack.ts

Lines 82 to 88 in 57fd2da

	requestAnimationFrame(() => {
	$dim.style.opacity = `${1 - ratio}`;
	$dim.style.transition = "0s";
	$paper.style.overflowY = "hidden";
	$paper.style.transform = `translate3d(${dx}px, 0, 0)`;
	$paper.style.transition = "0s";

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

2. 문제점

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

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

default.mp4

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

---

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