Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#672 1 bình luận 1 reaction 0 người được giao Xem trên GitHub

@Shennng đang làm issue này rồi.

Từ ngày 8/3/2026.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
45/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
react, typescript
Lĩnh vực
frontend, mobile-dev

Hướng nghiên cứu

Bắt đầu với extensions/react-ui-core/src/useStyleEffectSwipeBack.ts, đặc biệt là quyết định vận tốc của touchend và lời gọi resetActivity tại các dòng được tham chiếu. Tái hiện một thao tác vuốt nhanh và kiểm tra hành vi của translate3d và transition trong quá trình chuyển giao sang hoạt ảnh swipe-back. Được xem là hoàn tất khi hoạt ảnh bắt đầu mà không có hiện tượng gián đoạn vận tốc đã báo cáo hoặc giật thấy rõ.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

안녕하세요.

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

Ngôn ngữ chính
TypeScript
Star
1k
Fork
114
Merge trung bình
59 phút
Pull request đã merge (30 ngày)
4

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của daangn/stackflow

Tất cả issue của daangn/stackflow

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.