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

評価

調査の方向性

説明

안녕하세요.

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 오픈소스 정말 잘 사용하고 있습니다.
좋은 오픈소스 만들어주셔서 감사합니다.

環境構築

はじめの一歩

1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
3. リポジトリをフォークし、ブランチを切って変更します。
4. issue 番号を参照したプルリクエストを送ります。

daangn/stackflow のほかの issue

• Vue3 지원 계획

  オープン

  ⋯この Issue の問題を報告

  • 何か問題がありますか？

  • すでに着手されている
  • 初心者向けではない
  • 古い・無効
  • その他…
  • 送信 キャンセル

  難易度 5/5 1週間以上 初心者へのやさしさ 25/100

  daangn/stackflow#669 · コメント 2 件 · リアクション 2 件 · 2025年12月18日 に作成

• Question: How is the stack lifecycle (`activities` array) intended to be managed?

  オープン

  ⋯この Issue の問題を報告

  • 何か問題がありますか？

  • すでに着手されている
  • 初心者向けではない
  • 古い・無効
  • その他…
  • 送信 キャンセル

  難易度 5/5 1週間以上 初心者へのやさしさ 25/100

  daangn/stackflow#631 · 2025年9月21日 に作成

• 다른 호스트로 이동해야할 때 처리에 관하여

  オープン

  ⋯この Issue の問題を報告

  • 何か問題がありますか？

  • すでに着手されている
  • 初心者向けではない
  • 古い・無効
  • その他…
  • 送信 キャンセル

  難易度 5/5 1週間以上 初心者へのやさしさ 18/100

  daangn/stackflow#629 · 2025年9月14日 に作成

• Stackflow의 UI플러그인이 Stack + React Router 구조에서 비정상적으로 동작합니다.

  オープン

  ⋯この Issue の問題を報告

  • 何か問題がありますか？

  • すでに着手されている
  • 初心者向けではない
  • 古い・無効
  • その他…
  • 送信 キャンセル

  難易度 5/5 1週間以上 初心者へのやさしさ 30/100

  daangn/stackflow#608 · 2025年6月30日 に作成

• App 푸시로 앱에 들어왔을 때 뒤로가기 시 메인으로 이동

  オープン

  ⋯この Issue の問題を報告

  • 何か問題がありますか？

  • すでに着手されている
  • 初心者向けではない
  • 古い・無効
  • その他…
  • 送信 キャンセル

  難易度 4/5 3〜5日 初心者へのやさしさ 25/100

  daangn/stackflow#592 · コメント 1 件 · 2025年4月2日 に作成

daangn/stackflow の issue をすべて見る

似ている issue

• Junction Bar puts the headings of a Chinese translation into the night's title

  オープン

  ⋯この Issue の問題を報告

  • 何か問題がありますか？

  • すでに着手されている
  • 初心者向けではない
  • 古い・無効
  • その他…
  • 送信 キャンセル
  afk-ok area:data-quality importer size:S

  難易度 2/5 1〜3時間 初心者へのやさしさ 74/100

  enorm-labs/event-junkie#3301 · 2026年10月14日 に作成

  メンテナーはふだん 1 日以内に返信

• Add question about friends in 108 team

  オープン

  ⋯この Issue の問題を報告

  • 何か問題がありますか？

  • すでに着手されている
  • 初心者向けではない
  • 古い・無効
  • その他…
  • 送信 キャンセル

  難易度 2/5 1〜3時間 初心者へのやさしさ 62/100

  one-zero-eight/apply-bot#39 · 2026年10月14日 に作成

• BBBCheckbox: no visible keyboard focus, and the label ignores disabled

  オープン

  ⋯この Issue の問題を報告

  • 何か問題がありますか？

  • すでに着手されている
  • 初心者向けではない
  • 古い・無効
  • その他…
  • 送信 キャンセル

  難易度 2/5 1〜3時間 初心者へのやさしさ 72/100

  bigbluebutton/bbb-ui-components-react#108 · 2026年10月14日 に作成

  メンテナーはふだん 2 日以内に返信

• Fix the flaky LLM key browser journey (hex sentinel)

  オープン

  ⋯この Issue の問題を報告

  • 何か問題がありますか？

  • すでに着手されている
  • 初心者向けではない
  • 古い・無効
  • その他…
  • 送信 キャンセル
  area: app type: bug

  難易度 2/5 1〜3時間 初心者へのやさしさ 70/100

  ExpidetGames/code-reviewer#308 · 2026年10月14日 に作成

  メンテナーはふだん 1 日以内に返信

• SVG image load failure passes null into gradient resolver

  オープン

  ⋯この Issue の問題を報告

  • 何か問題がありますか？

  • すでに着手されている
  • 初心者向けではない
  • 古い・無効
  • その他…
  • 送信 キャンセル

  難易度 2/5 1〜3時間 初心者へのやさしさ 82/100

  fabricjs/fabric.js#11160 · 2026年10月14日 に作成

  メンテナーはふだん 1 日以内に返信

TypeScript の issue をもっと見る