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

SVG 요소 애니메이션 효과 주기

• 시간 변화에 따라 SVG 요소에 변화를 주고 싶을 때

설명

SVG는 DOM의 형식과 구조를 따르므로 일정 시간마다 자바스크립트로 DOM을 조작하면 애니메이션 효과를 줄 수 있습니다. 예를 들어, 원의 색상을 서서히 빨간색으로 변하게 하는 효과는 SVG 요소의 속성값을 가져와 조금씩 변경하면 됩니다. 이때는 requestAnimationFrame()을 사용합니다.

index.html

<svg vidwBox="0 0 200 200" width="200" height="200">
  <circle id="myCircle" cx="100" cy="100" r="95" fill="#bbdefb"></circle>
</svg>

script.js

const myCircle = document.querySelector('#myCircle');
console.log(myCircle);
let time = 0;
animate();
function animate() {
  time = time + 0.1;
  myCircle.style.fill = `hsl(0, 100%, ${time}%)`;
  if (time < 50) {
    requestAnimationFrame(animate);
  }
}