커서를 따라보는 캐릭터 만들기 3편, 잔상 없이 부드럽게 스크러빙하기

const i = Math.floor(current);
base.style.backgroundPosition = pos(i);
blend.style.backgroundPosition = pos(i + 1);
blend.style.opacity = String(current - i); // 소수부만큼 겹친다

import cv2
import numpy as np
 
def flow(a, b):
    gray = lambda x: cv2.cvtColor(to_uint8_on_gray(x), cv2.COLOR_RGB2GRAY)
    dis = cv2.DISOpticalFlow_create(cv2.DISOPTICAL_FLOW_PRESET_MEDIUM)
    return dis.calc(gray(a), gray(b), None)
 
def inbetweens(a, b):
    """a, b: 프리멀티플라이드 RGBA(float). 움직임이 클수록 중간 프레임을 많이 만든다."""
    fab, fba = flow(a, b), flow(b, a)
    moving = np.maximum(a[..., 3], b[..., 3]) > 0.5
    p99 = np.percentile(np.linalg.norm(fab, axis=2)[moving], 99)
    n = int(min(8, max(0, np.ceil(p99 / STEP_PX) - 1)))   # 이웃 프레임 간 이동이 STEP_PX 이하가 되도록
 
    h, w = a.shape[:2]
    gx, gy = np.meshgrid(np.arange(w, dtype=np.float32), np.arange(h, dtype=np.float32))
    warp = lambda img, f: cv2.remap(img, gx + f[..., 0], gy + f[..., 1], cv2.INTER_LINEAR,
                                    borderMode=cv2.BORDER_CONSTANT, borderValue=0)
    out = []
    for k in range(1, n + 1):
        t = k / (n + 1)
        ft0 = -(1 - t) * t * fab + t * t * fba          # 중간 시점에서 A로
        ft1 = (1 - t) ** 2 * fab - t * (1 - t) * fba    # 중간 시점에서 B로
        out.append((1 - t) * warp(a, ft0) + t * warp(b, ft1))
    return out

extracted 193 frames → {'frames': 62, 'idle': 38, 'cols': 8, 'rows': 8, ...}
sprite.webp: 5120×5848, 파일 2548KB, 디코딩 114MB
sprite-sm.webp: 2880×3288, 파일 1250KB, 디코딩 36MB
이웃 프레임 최대 이동(p99): 1.5px

export function cursorToFrame(x: number, center: number, left: number, right: number, frames: number, idle: number) {
  const span = x < center ? center - left : right - center;
  const u = Math.max(-1, Math.min(1, span > 0 ? (x - center) / span : 0));
  const eased = Math.sign(u) * (1 - (1 - Math.abs(u)) ** 2);
  return eased < 0 ? idle + eased * idle : idle + eased * (frames - 1 - idle);
}

const tick = (t: number) => {
  const dt = last ? Math.min(t - last, 64) : 16;   // 탭 전환 후 dt가 튀지 않게 상한을 둔다
  last = t;
  current += (target - current) * (1 - Math.exp(-dt / tau));
  if (Math.abs(target - current) < 0.005) {
    current = target;
    raf = last = 0;                                 // 도착하면 루프를 멈춘다
  } else raf = requestAnimationFrame(tick);
  draw();
};

let shown = -1;
const draw = () => {
  const i = Math.round(current);
  if (i === shown) return;            // 같은 프레임이면 DOM을 건드리지 않는다
  shown = i;
  el.style.backgroundPosition = `${pct(i % cols, cols)}% ${pct(Math.floor(i / cols), rows)}%`;
  onFrame?.(i);                       // 프레임 번호 HUD 갱신용
};

createSpriteScrubber(el, {
  frames: sprite.frames,
  cols: sprite.cols,
  idle: sprite.idle,
  area: document.documentElement, // 화면 양 끝까지 추적하고, 브라우저 창을 벗어나면 정면으로
});

onFrame: (i) => {
  countRef.current!.textContent = String(i + 1).padStart(2, "0");
  barRef.current!.style.transform = `scaleX(${i / (sprite.frames - 1)})`; // width 대신 transform이라 레이아웃 계산이 없다
},

let queue = new Map<number, FrameRequestCallback>();
vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
  queue.set(++sequence, cb);
  return sequence;
});
 
const settle = () => {
  for (let i = 0; queue.size && i < 500; i++) {
    time += 16;
    const callbacks = [...queue.values()];
    queue.clear();
    callbacks.forEach((cb) => cb(time));
  }
  expect(queue.size).toBe(0); // 멈춘 뒤에 rAF가 남아 있으면 안 된다
};
 
it("onFrame은 보이는 프레임이 바뀔 때만 호출된다", () => {
  const seen: number[] = [];
  createSpriteScrubber(base, { frames: 29, cols: 8, idle: 17, area, onFrame: (i) => seen.push(i) });
  point("pointermove", 0);
  settle();
  expect(seen.at(-1)).toBe(0);
  expect(new Set(seen).size).toBe(seen.length);
});