[JavaScript] 자바스크립트에서 SVG 요소 애니메이션 효과 주기
2022. 7. 26. 20:08ㆍProgram/JavaScript
201_자바스크립트에서 SVG 요소 애니메이션 효과 주기
[적용]
- 시간 변화에 따라 SVG 요소에 변화를 주고 싶을 때
[내용]
SVG는 DOM의 형식 구조를 따르므로 일정 시간마다 자바스크립트로 DOM을 조작하면 애니메이션 효과를 줄 수 있다.
예를 들어, 원의 색상을 서서히 빨간색으로 변하게 하는 효과는 SVG 요소의 속성값을 가져와 조금씩 변경하면 된다.
이때는 requestAnimationFrame()을 사용한다.
HTML index.html
<body>
<svg viewBox="0 0 200 200" width="200" height="200">
<circle id="myCircle" cx="100" cy="100" r="95" stroke="#BBDEFB" />
</svg>
</body>JavaScript main.js
const myCircle = document.querySelector('#myCircle');
let time = 0;
animate();
function animate() {
// 시간 변화
time += 0.1;
// 색상 변화
myCircle.style.fill = `hsl(0, 100%, ${time}%)`;
// 목표값까지 반복
if (time < 50) {
requestAnimationFrame(animate);
}
}
실행결과
자바스크립트의 장점은 좋은 표현력이다.
색상과 선의 변화, 확대, 축소, 회전, 이동, 왜곡과 변형, 후속 효과 등 많은 애니메이션 효과가 가능하다.
다만 CSS에 비해 SVG의 코드가 복잡하고 나이도가 비교적 높다.
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트에서 캔버스 사용하기 (0) | 2022.07.26 |
|---|---|
| [JavaScript] 자바스크립트에서 SVG 그래픽 다운로드하기 (0) | 2022.07.26 |
| [JavaScript] 자바스크립트에서 SVG 요소 마우스로 다루기 (0) | 2022.07.26 |
| [JavaScript] 자바스크립트에서 SVG 요소 스타일 변경하기 (0) | 2022.07.26 |
| [JavaScript] 자바스크립트에서 SVG 요소를 동적으로 추가하기 (0) | 2022.07.26 |