[TypeScript] 제스처로 대화하기. #10 - 플릭(with. 초기 속도) 편

잠깐! 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;

// ...

내용은 다음 편에서 이어집니다. 읽어주셔서 감사합니다!

묻고 답하기

개인적인 판단에 의해 적절하다고 여겨지는 경우, 모두가 볼 수 있도록 이곳에 문답이 추가됩니다. 그렇지 않더라도 질문에 대한 답변은 별도로 이루어집니다.