Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Aberta
  • Algo errado?
#672 1 comentário 1 reação 0 responsáveis Ver no GitHub

@Shennng já está trabalhando nisso.

Desde 8/3/2026.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
45/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
react, typescript
Domínio
frontend, mobile-dev

Direção de pesquisa

Comece por extensions/react-ui-core/src/useStyleEffectSwipeBack.ts, especialmente pela decisão de velocidade de touchend e pela chamada de resetActivity nas linhas referenciadas. Reproduza um swipe rápido e inspecione o comportamento de translate3d e transition durante a transição para a animação de swipe-back. Está concluído quando a animação começa sem a descontinuidade de velocidade relatada nem um solavanco visível.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

안녕하세요.

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

Linguagem predominante
TypeScript
Estrelas
1k
Forks
114
Merge médio
59min
PRs com merge (30d)
4

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de daangn/stackflow

Todas as issues de daangn/stackflow

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.