[Canvas] Animation

JS의 애니메이션은 CSS 애니메이션과 다르다
CSS는 keyframes로 자동적으로 움직이게 할 수 있지만,
JS는 반복적인 연산을 통해 객체의 좌표를 바꿔주는 방식으로 애니메이션 구현

즉, JS 애니메이션 라이브러리 = 자동적으로 계산을 해주는 코드가 내장되어 있는 것

requestAnimationFrame()

개념 : 브라우저에게 수행하기를 원하는 애니메

브라우저가 그려낼 때, reflow 과정 후 => repaint

reflow = 계산하는 과정
repaint = 계산된 결과를 가지고 색을 칠하는 작업

repaint가 되어야 눈에 보임, 칠하기 전에 칠할 준비됐는지 기다리는 함수

= 브라우저가 무거운데 paint가 진행되면 프레임이 유실되거나, 버벅일 수 있으므로 그리기 최적화된 상태까지 기다리는 함수 (=> 인위적으로 반복시킴)

function draw(){
	context.arc(10, 150, 10, 0, Math.PI * 2);     	
  	context.fill();
      
	requestAnimationFrame(draw);
  	console.log("drawing...");
}
      
draw();

여기서도 재귀함수가 쓰이네!! Interesting!
이제 해줄 건, 좌표를 바꿔주는 것

setInterval()와 비교

// setInterval의 경우

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

//requestAnimationFrame(draw);
}
      
setInterval(draw, 100);

속도 컨트롤이 쉬움. 증가량과 속도만 컨트롤하면 원하는 느낌의 빠르기 조절 가능

BUT requestionAnimationFrame()과 달리 '무대뽀 그리기'라서 디바이스 성능이 안 좋으면 프레임 유실 및 뚝뚝 끊김 현상 발생...

모바일 기기에서 배터리 절약에도 requestAnimationFrame()이 좋다고 함

물론, setInterval 인터벌을 조절할 수 있는 장점이 있다는 건 맞음

---

setInterval 없이 인터벌 타이밍 조절

초당 60회 반복을 목표로 하므로 얼추 0.5초 인터벌

function draw(){
        
        if(count % 30 === 0){
          context.clearRect(0, 0, canvas.width, canvas.height);
          context.beginPath();
          context.arc(xPos, 150, 10, 0, Math.PI * 2);
          context.fill();
          xPos += 5;
        }  
          count++;
          requestAnimationFrame(draw);
      }
      
      draw();

애니메이션 멈추기

방법 1

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

방법 2

timerId = requestAnimationFrame(draw);

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

방법 3 (클릭 취소)

// requestAnimationFrame()
canvas.addEventListener('click', () => {
	cancelAnimationFrame(timerId);
});
// setInterval
canvas.addEventListener('click', () => {
	clearInterval(timerId);
});