[책] 자바스크립트 코드 레시피 278 - 170일차

requestAnimationFrame 응용하기

• 마우스 커서를 따라다니는 애니메이션을 생성하고 싶을 때

설명

requestAnimationFrame()은 애니메이션의 모션을 세세하게 조절할 수 있다는 장점을 가졌습니다.
HTML 요소에 애니메이션 효과를 주기 위해서는 style 속성값을 조절합니다. 앞서 사용한 tick 함수를 다시 사용하여 확인해봅니다. tick 함수 내에서 style 속성값을 조절해 애니메이션 효과를 부여합니다. style 속성의 대부분은 단위 표기가 필수이므로 단위 넣는 것을 잊지 않도록 주의합니다.

실습

index.html

<div class="followAnimation"></div>

---

style.css

.followAnimation {
  position: fixed;
  top: 8px;
  left: 8px;
  will-change: transform;
  font-size: 5rem;
  width: 28px;
  height: 28px;
  border-radius: 28px;
  border: 2px solid #000;
  /* background-color: #000; */
}

---

script.js

const el = document.querySelector('.followAnimation');
let mouseX = 0;
let mouseY = 0;
let currentX = 0;
let currentY = 0;

const body = document.querySelector('body');
body.addEventListener('mousemove', mouseCursor);

function mouseCursor(event) {
  mouseX = event.clientX;
  mouseY = event.clientY;
}

tick();
function tick() {
  requestAnimationFrame(tick);
  currentX = currentX + (mouseX - currentX) * 0.1;
  currentY = currentY + (mouseY - currentY) * 0.1;
  el.style.transform = `translate(${currentX}px, ${currentY}px)`;
}