운동 스크롤을 구현하기위한 알고리즘

StackOverflow https://stackoverflow.com/questions/1810742

문제

운동 스크롤 구현을 만들기위한 좋은 알고리즘은 무엇입니까? 이 기능은 사용자 정의 UI 목록에서 테스트됩니다. 모바일 장치 (이 기능이 내장되지 않은 장치)를 타겟팅하는 동안 다른 프로그래밍 필드의 알고리즘 또는 코드 예제도 적합 할 수 있습니다.

도움이 되었습니까?

해결책

나는 최근에 직접 구현했다. 이것들은 내가 취한 단계입니다.

  1. 커서의 속도를 측정해야합니다 (마우스 커서 또는 손가락).
  2. 간단한 입자 물리 루프를 구현하십시오. 그렇게하는 방법에 대한 정보를 찾을 수 있습니다 여기
  3. 스크롤 평면의 너비에서 파생 된 수학을 사용하여 입자 "경계"를 제공하십시오.
  4. 마우스 속도와 입자 속도의 차이를 입자의 속도에 연속적으로 추가하므로 입자의 속도는 움직이는 동안 마우스의 속도와 일치합니다.
  5. 사용자가 손가락을 들어 올리 자마자 4 단계를 중지하십시오. 물리 루프는 관성을 처리합니다.
  6. "범퍼"마진과 같은 개인적인 번영을 추가하고 동작을 계산하기 위해 Zeno의 역설에서 작동하는 매끄러운 스크롤 "앵커"포인트를 추가하십시오.
  7. 나는 거의 잊어 버렸다 : 위에서 파생 된 좌표를 가지고 스크롤 평면의 위치로 사용하십시오.

아마도이 코드를 곧 오픈 소스를 열 것입니다. 얼마나 빨리 이것을 필요로합니까?

편집 : 링크를 변경했습니다. 죄송합니다. 잘못된 페이지를 약간 지적했습니다. edit2 : 아니면 그렇지 않습니까? 어쨌든, 내가 링크 한 원본 페이지는 현재 링크 된 페이지의 첫 번째 링크였습니다.

다른 팁

원래 요청되었으므로 Apple이 JavaScript에서 동역학 스크롤을 정확하게 복제 한 프레임 워크 인 PastryKit의 소스 코드를 신중하게 읽었습니다. 입자 물리 루프가 없습니다. 손가락이 들어 올리는 정확한 순간에 터치의 속도가 측정됩니다. 이 시점부터 스크롤은 속도를 입력 매개 변수로 사용하는 간단한 완화 기능을 사용하여 애니메이션됩니다.

방금 모바일 GUI 프레임 워크에 스크롤러 위젯을 추가 했으므로 여기에서 솔루션을 공유 할 것이라고 생각했습니다.

이것은 꽤 복잡한 문제이므로 다음과 같이 더 작은 독립적 인 하위 작업으로 나누기로 결정했습니다.

  1. 기본 스크롤 기능:이 작업은 드래그 이벤트를 가장 간단한 방식으로 처리하는 것으로 구성되었으며, 이는 드래그 거리와 방향에 따라 내용을 스크롤하는 것입니다. 이것은 비교적 간단한 구현이었고, 유일한 까다로운 측면은 드래그 작업을 시작 해야하는시기와 탭 이벤트를 스크롤 가능한 영역 내부의 하위 위젯으로 전달하는시기를 아는 것이 었습니다.

  2. 관성을 스크롤하십시오: 이것은 가장 어려운 일이었습니다. 여기서 아이디어는 사용자가 손가락을 들어 올린 후 스크롤링이 얼마 동안 계속되어야한다는 것입니다. 이를 위해 스크롤 속도에 대한 아이디어가 필요했습니다. 불행히도 단일 샘플에서 속도를 계산하는 것은 정확하지 않으므로 사용자가 스크롤하는 동안 각 이벤트가 발생한 시간과 함께 마지막 N 모션 이벤트를 원형 버퍼로 기록합니다. iPhone과 HP 터치 패드에서 N = 4가 잘 작동하는 것을 발견했습니다. 손가락이 들어 올리면 기록 된 모션에서 관성 스크롤에 대한 대략적인 시작 속도를 계산할 수 있습니다. 네거티브 가속 계수를 정의하고 사용 된 표준 모션 공식을 사용했습니다 ( 여기) 스크롤이 잘 죽게하려면. 스크롤 위치가 여전히 움직이는 동안 테두리에 도달하면 속도를 0으로 재설정하여 범위를 벗어나지 않도록합니다 (갑자기 정지가 다음에 해결됩니다).

  3. 유연한 스크롤 제한: 스크롤이 끝에 도달 할 때 갑작스러운 정지에 들어가는 대신 위젯이 일부 스크롤을 만들지 만 저항을 제공하기를 원했습니다. 이를 위해 양쪽 끝에서 허용 된 스크롤 범위를 위젯 치수의 함수로 정의한 양으로 확장했습니다. 각 끝에 너비 또는 높이의 절반을 추가하는 것이 잘 작동한다는 것을 알았습니다. 스크롤에 약간의 저항을 제공한다는 느낌을주는 속임수는 표시된 스크롤 위치를 범위를 벗어 났을 때 조정하는 것이 었습니다. 나는 이것에 대한 스케일링과 감속 기능을 사용했습니다 (좋은 완화 함수가 있습니다. 여기).

  4. 봄 행동: 이제 유효한 범위를지나 스크롤 할 수 있으므로 사용자가 범위를 벗어난 상태에서 스크롤러를 유효한 위치로 되돌릴 수있는 방법이 필요했습니다. 이것은 스크롤러가 범위 외 위치에서 정지 될 때 스크롤 오프셋을 조정하여 달성됩니다. 내가 멋진 스프링 룩을주는 조정 함수는 현재 위치에서 원하는 위치로의 거리를 일정한 위치로 나누고 해당 금액으로 오프셋을 이동시키는 것이 었습니다. 일정할수록 느린 움직임이 더 커집니다.

  5. 스크롤 바: 마지막 터치는 오버레이 스크롤 바를 추가하는 것이 었습니다.

Robert Penner의 완화 기능을 보셨습니까?

http://www.robertpenner.com/easing/

IIRC 이것들은 원래 ActionScript를위한 것이며 오랫동안 주변에있었습니다.

글쎄, 나는 그것이 a) 사용자가 얼마나 빨리 스크롤했는지에 대한 속도를 얻을 것이라고 생각합니다. b) 손가락을 떠날 때 자동 스크롤 목록을 스크롤하지만 사용자가 가진 것의 초기 속도로 속도가 감소합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top