[2022.05.14] Canvas API - 애니메이션 멈추는 방법

REASON·2022년 5월 14일

JavaScript canvas html js study 공부 자바스크립트 캔버스

STUDY

목록 보기

45/127

이전에 공부했던 캔버스 강좌를 이어서 1분 코딩님의 라이브강좌 영상을 기준으로 작성하였다.
오늘은 간단히 애니메이션을 멈추는 방법에 대해 공부해보았다.

지난번에 작성한 캔버스 관련 포스트
Canvas API 개념 & 기본 사용방법
Canvas API 선과 원 그리기
Canvas 기본 애니메이션 적용하기

Canvas API #4

requestAnimationFrame

계속 무한 반복되는 애니메이션을 멈추는 방법

캔버스의 끝까지 왔을 때 더이상 애니메이션이 실행되지 않게 하려면 x위치와 캔버스의 가로 길이에서 원의 반지름 만큼을 제외한 값을 비교하면 된다.

현재 한 방향으로 원이 계속 이동하여 애니메이션이 종료되지 않고 있다. (움짤이라 중간에 짤리지만 한 방향으로 끊임없이 계속 이동된다.)

const canvas = document.querySelector('.canvas');
const context = canvas.getContext('2d');

let xPos = 10;

function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  context.arc(xPos, 150, 10, 0, Math.PI * 2, false);
  context.fill();
  xPos += 3;

  requestAnimationFrame(draw);
}

draw();

캔버스 끝에 딱 닿았을 때 애니메이션을 종료 해보자.

requestAnimationFrame이 실행되기 전에 return으로 멈추기

function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  context.arc(xPos, 150, 10, 0, Math.PI * 2, false);
  context.fill();
  xPos += 3;

  if (xPos >= canvas.width - 10) {
    return;
  }
  requestAnimationFrame(draw);
}

draw함수 안에 if문을 넣고 현재 x위치가 캔버스의 가로사이즈-원의반지름 보다 크거나 같은 경우 return시키는 조건문을 추가하였다.

캔버스의 끝에 닿았을 때 공이 멈추는 것을 확인할 수 있다.

또 다른 방법으로 멈추기

requestAnimationFrame을 취소시키는 방법이다.

const canvas = document.querySelector('.canvas');
const context = canvas.getContext('2d');

let xPos = 10;
let timerId;

function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  context.arc(xPos, 150, 10, 0, Math.PI * 2, false);
  context.fill();
  xPos += 3;

  timerId = requestAnimationFrame(draw);
  console.log(timerId);

  if (xPos >= canvas.width - 10) {
    cancelAnimationFrame(timerId);
  }
}

draw();

먼저 timerId라는 변수를 하나 선언했다.
이후 timerId에 requestAnimationFrame(draw)를 담아서 출력해보면 1씩 증가하는 숫자값이 콘솔에 찍히는 것을 알 수 있는데 이것을 활용하여 애니메이션을 멈추는 방법이다.
앞서 사용했던 if문을 그대로 사용하고 그 안에서 cancleAnimationFrame(timerId)를 넣어주면 캔버스의 끝 지점에서 공이 멈추도록 할 수 있다.

외부에서 클릭등의 이벤트로 멈춘다고 하면 캔슬애니메이션을 사용하면 된다.

canvas.addEventListener('click', () => {
  cancelAnimationFrame(timerId);
});

위와 같은 코드를 사용하면 클릭했을 때 애니메이션이 멈추는 것을 확인할 수 있다.

setInterval

clearInterval 사용하여 애니메이션 멈추기

const canvas = document.querySelector('.canvas');
const context = canvas.getContext('2d');

let xPos = 10;
let timerId;

function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  context.arc(xPos, 150, 10, 0, Math.PI * 2, false);
  context.fill();
  xPos += 10;
}

timerId = setInterval(draw, 500);
canvas.addEventListener('click', () => {
  clearInterval(timerId);
});

requestAnimationFrame을 멈췄을 때와 동일하게 변수를 하나 선언해 주었다. (timerId)
선언한 변수에 setInerval을 담아준다.
특정 조건을 만족했을 때 clearInterval이 실행될 수 있도록 특정 조건을 추가해주었다. (위 코드에서는 캔버스 클릭 이벤트가 발생하면 clearInterval이 실행된다.)