Table of contents
잠깐!
PointerEvent
에 대해 아직 잘 모른다면 [typescript] 포인터 대통합(with. PointerEvent)을 먼저 읽어보세요!
플릭은 스와이프하다가 포인터를 떼는 동작을 말합니다. 다른 제스처는 포인터를 뗌과 동시에 종료되지만, 플릭은 뗀 이후에 의미가 있습니다. 그렇다면 포인터 이벤트가 종료된 후에 어떻게 동작을 이어갈 수 있을까요? 비밀은 순간 속도에 있습니다.
interface PanEvent {
timestamp: number;
// ...
}
지난 편에 정의한 PanEvent
를 활용하겠습니다. 속도를 계산하기 위해서는 시간이 중요합니다. 따라서 기존 정의에 timestamp
를 추가했습니다.
const records = new Map<number, [ PanEvent, PanEvent ]>();
onPan(e => {
switch(e.type) {
case "panstart":
records.set(e.pointerId, [ e, e ]);
break;
case "pan":
records.set(e.pointerId, [ records.get(e.pointerId)![1], e ]);
break;
case "panend":
// ...
records.delete(e.pointerId);
break;
}
});
panend
와 직전 pan
사이에서는 이동 거리를 추적할 수 없으므로 시간 순서대로 두 개의 PanEvent
를 저장합니다. 이렇게 하면 panend
에서 직전에 발생한 이동 거리와 소요 시간을 계산할 수 있습니다. 또 이동 거리를 소요 시간으로 나누어 아래와 같이 순간 속도를 구할 수 있습니다. 이는 동작의 초기 속도가 됩니다.
const prevEvent = map.get(e.pointerId)![0];
const timestampDiff = e.timestamp - prevEvent.timestamp;
const deltaX = e.x - prevEvent.x;
const deltaY = e.y - prevEvent.y;
const velocityX = deltaX / timestampDiff;
const velocityY = deltaY / timestampDiff;
// ...
내용은 다음 편에서 이어집니다. 읽어주셔서 감사합니다!
묻고 답하기
개인적인 판단에 의해 적절하다고 여겨지는 경우, 모두가 볼 수 있도록 이곳에 문답이 추가됩니다. 그렇지 않더라도 질문에 대한 답변은 별도로 이루어집니다.