Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

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

Offen
  • Stimmt etwas nicht?
#672 1 Kommentar 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

@Shennng arbeitet bereits daran.

Seit 08.3.2026.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
45/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
react, typescript
Bereich
frontend, mobile-dev

Rechercherichtung

Beginne mit extensions/react-ui-core/src/useStyleEffectSwipeBack.ts, insbesondere mit der Geschwindigkeitsentscheidung bei touchend und dem resetActivity-Aufruf in den referenzierten Zeilen. Reproduziere einen schnellen Swipe und untersuche das Verhalten von translate3d und transition während der Übergabe an die Swipe-back-Animation. Die Aufgabe ist abgeschlossen, wenn die Animation ohne die gemeldete Geschwindigkeitsdiskontinuität oder einen sichtbaren Ruck beginnt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

안녕하세요.

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 직전의 사용자 터치 이동 속도가 애니메이션 시작 구간에 반영되고 있지 않습니다.
이를 거리-시간 그래프로 표현하면 아래와 같은 형태가 됩니다.

Image

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

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

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

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

Vorherrschende Sprache
TypeScript
Sterne
1k
Forks
114
Ø Merge
59 Min.
Gemergte PRs (30 T.)
4

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus daangn/stackflow

Alle Issues in daangn/stackflow

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.