JavaScript 로 애니메이션 프레임 마스터하기 - 튜토리얼 & 예제

소개

이 랩에서는 재귀 (recursion) 와 Window.requestAnimationFrame() 메서드를 사용하여 애니메이션 프레임을 기록하고 각 프레임에서 제공된 콜백 (callback) 을 호출하는 함수를 만드는 방법을 살펴봅니다. 또한 반환된 객체의 start 및 stop 메서드를 사용하여 기록을 수동으로 제어하는 방법도 배웁니다. 이 랩은 JavaScript 에서 애니메이션 프레임을 사용하는 방법과 보다 효율적이고 제어된 애니메이션을 만드는 방법을 이해하는 데 도움이 될 것입니다.

애니메이션 프레임 기록 가이드

애니메이션 프레임을 기록하려면 다음 단계를 따르세요.

터미널/SSH 를 열고 node를 입력하여 코딩 연습을 시작합니다.
재귀 (recursion) 를 사용하여 각 애니메이션 프레임에서 제공된 콜백 (callback) 을 호출합니다.
running이 true이면, 제공된 콜백을 호출하는 Window.requestAnimationFrame()을 계속 호출합니다.
기록을 수동으로 제어할 수 있도록 start와 stop의 두 가지 메서드를 가진 객체를 반환합니다.
함수가 호출될 때 start를 암시적으로 호출하려면 두 번째 인수 autoStart를 생략합니다.

애니메이션 프레임을 기록하려면 다음 코드를 사용하세요.

const recordAnimationFrames = (callback, autoStart = true) => {
  let running = false,
    raf;
  const stop = () => {
    if (!running) return;
    running = false;
    cancelAnimationFrame(raf);
  };
  const start = () => {
    if (running) return;
    running = true;
    run();
  };
  const run = () => {
    raf = requestAnimationFrame(() => {
      callback();
      if (running) run();
    });
  };
  if (autoStart) start();
  return { start, stop };
};

코드 사용 예시:

const cb = () => console.log("Animation frame fired");
const recorder = recordAnimationFrames(cb);
// logs 'Animation frame fired' on each animation frame
recorder.stop(); // stops logging
recorder.start(); // starts again
const recorder2 = recordAnimationFrames(cb, false);
// `start` needs to be explicitly called to begin recording frames

애니메이션 프레임 기록

소개

애니메이션 프레임 기록 가이드

요약