소개

웹 페이지의 애니메이션은 중요한 부분입니다. 작고 재미있는 요소 애니메이션으로 웹 페이지에 생명을 불어넣습니다. HTML에서 SVG 태그로 벡터 이미지를 만드는 경로를 만들 수 있습니다.

오늘은 SVG에 대해 알아보고 SVG를 만들고 anime.js로 애니메이션을 만들어 보겠습니다.

시작하겠습니다.

SVG

SVG를 만들기 전에 알아보자. SVG는 스칼라 벡터 그래픽을 나타냅니다. SVG는 벡터 이미지를 정의하는 형식 중 하나입니다. SVG 태그 내에 정의된 요소에 애니메이션을 적용할 수 있습니다.

SVG를 사용하면 이점이 있습니다. 다음과 같은 몇 가지는 다음과 같습니다.

SVG는 벡터이므로 확대할 때 픽셀화되지 않습니다.

쉽게 확장할 수 있습니다.

크기를 조정할 때 해상도가 손실되지 않음

HTML에서는 다음과 같은 몇 가지 속성을 정의하여 미리 정의된 SVG를 만들 수 있습니다.

서클

직사각형

이클립스

다각형

경로

텍스트

기타

SVG로 충분합니다. SVG를 만들어 봅시다.

원

<circle> 내의 <svg> 요소를 사용하여 원을 정의합니다.
다양한 태그가 있습니다. 중요한 태그는 다음과 같습니다.

cx: 원 중심의 x 좌표입니다

.

cy: 원 중심의 y좌표

r: 원의 반지름

암호

<svg>
  <circle cx="50" cy="50" r="40" />
</svg>

다른 태그에는 다음이 포함됩니다.

채우기: 원의 색상입니다

.

stroke: 획의 색상입니다

.

stroke-width: 획의 너비입니다

.

코드펜

다각형

이름에서 알 수 있듯이 여러 개의 곤(각도)을 가질 수 있습니다. <polygon> 요소를 사용하여 정의합니다. 다각형은 닫힌 모양으로 생성됩니다. 즉, 선이 연결됩니다. 변수의 포인트를 정의하는 points 태그가 있습니다.

점: 점은 정점입니다. 닫힌 경로에는 최소한 3개의 점이 있어야 합니다.

암호

<svg>
  <polygon points="200,10 250,190 160,210"/>
</svg>

코드펜

길

경로는 SVG에서 가장 흥미롭고 사용되는 요소 중 하나입니다. 아이콘, 일러스트레이션 및 도형을 형성하는 경로를 만드는 데 사용할 수 있습니다.

다른 경로를 만드는 10개의 명령이 있습니다. 다음은 설명이 있는 명령입니다.


명령
이름
설명


중
moveto
한 지점에서 다른 지점으로 이동

엘
리네토
선을 만들다

시간
수평선으로
가로줄 만들기

V
수직선
세로선 만들기

씨
커브토
커브 생성

에스
부드러운 곡선
부드러운 곡선을 만들어

큐
2차 베지어 곡선
2차 베지어 곡선 만들기

티
매끄러운 2차 베지어 곡선
부드러운 2차 베지어 곡선 만들기

ㅏ
타원형 호
타원형 호 만들기

지
클로즈 패스
경로를 닫습니다

암호

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

코드펜

AnimeJS로 경로 애니메이션

CSS의 변환 및 전환으로 SVG를 애니메이션화할 수 있습니다. anime.js 라이브러리를 사용하여 경로에 애니메이션을 적용할 것입니다.

암호

let path = anime.path('path');

anime({
  targets: '.circle',
  translateX: path('x'),
  translateY: path('y'),
  rotate: path('angle'),
  easing: 'linear',
  duration: 2000,
  loop: true
});

변수에 path 태그를 정의합니다.

코드펜

결론

오늘 우리는 SVG와 원, 다각형 및 경로와 같은 다양한 태그를 살펴보았습니다. 우리는 또한
합니다.

이 기사가 SVG를 이해하는 데 도움이 되었기를 바랍니다. 블로그 게시물을 읽어 주셔서 감사합니다.