SVG는 교차 해상도 동영상으로 사용될 수 있는 경우가 많습니다. 이는 고해상도 화면에서 이미지 선명도가 손실되지 않음을 의미합니다. 또한 일부 JavaScript 라이브러리를 사용하여 SVG에 애니메이션을 적용할 수도 있습니다. 아래에서는 SVG 애니메이션을 한 단계 더 발전시키는 데 도움이 되는 일부 자바스크립트 라이브러리를 공유합니다.
Vivus는 SVG 이미지의 드로잉 과정을 표시할 수 있는 애니메이션 js 라이브러리입니다. Vivus는 다른 라이브러리(예: jQuery)에 종속되지 않습니다. 이 .js 파일을 페이지에 추가한 다음 애니메이션에 사용해야 하는 SVG 부분을 전달하기만 하면 됩니다. 동시에 일부 구성을 지정하면 페이지가 로드된 직후 애니메이션 효과를 표시할 수 있습니다.
Bonsai는 웹사이트에 동적 콘텐츠를 그리고 애니메이션을 적용하는 데 사용할 수 있는 기능이 풍부한 JS 라이브러리입니다. 여기에는 HTML5 비디오, 변형 Canvas 및 SVG가 포함됩니다. Bonsai 프레임워크를 사용하면 원하는 경우 간단한 직사각형이나 직사각형 섹션, 심지어 풍부한 멀티플레이어 만화 게임까지 그릴 수 있습니다.
Velocity는 자주 사용되는 애니메이션에 사용되는 JS 클래스 라이브러리입니다. Velocity의 js 애니메이션 "속도"는 매우 빠릅니다. JQuery보다 빠르고 CSS 애니메이션보다 훨씬 빠릅니다. Velocity의 API는 $.fn.animate와 매우 유사하며 둘 다 $()를 통해 작동됩니다. 속도()는 $().animate()와 비교되는 또 다른 방법입니다. 요약하자면, fadeIn 및 fadeOut 메서드를 포함하여 일관된 애니메이션 효과를 사용해야 합니다(번역자: Velocity는 fadeIn 및 fadeOut 메서드를 제공합니다).
RaphaelJS는 웹페이지에 SVG 이미지와 애니메이션을 그리는 데에도 일반적으로 사용됩니다. IE6까지 다양한 Windows 브라우저와 호환되므로 Raphael은 시장에서 가장 신뢰받는 js(svg) 라이브러리가 되었습니다. 이를 통해 주방에서 요리하는 것처럼 분석 차트, 지도, 게임을 만들 수 있습니다.
SnapSVG는 Dmitry Baranovskiy(Raphael도 마찬가지)가 개발한 또 다른 잘 알려진 JS 라이브러리입니다. 또한 Adobe Web Software Group에서 관리합니다. Raphael과 달리 최신 버전의 IE만 지원합니다. 이로 인해 동일한 기능(예: 트림)을 달성하고 최신 기능을 지원하기 위해 SnapSVG가 Raphel에 비해 훨씬 작아졌습니다.
Laid back Range Painter는 일반적으로 Vivus와 비슷하게 아틀라스를 그리는 데 사용되는 jQuery 플러그인입니다. 일반적으로 귀하가 불평하는 것은 특별한 기능이 하나만 있다는 것입니다. Illustrator 또는 Inkscape를 사용하여 SVG 이미지를 만들고 SVG 이미지에 색상 변경이 없고 궤적만 변경된 경우 이를 사용할 수 있습니다.
SVG.js는 조작 및 애니메이션을 위한 경량 SVG 라이브러리입니다. 방향, 위치, 색상을 변경하여 조작할 수 있습니다. 아직 끝나지 않았습니다. 플러그인과 같은 다른 기능을 직접 구현할 수도 있습니다. 이 예에서는 이미지에 가우시안 흐림, 불포화, 비교, 세피아 및 기타 기능을 구현할 수 있는 svg.filter.js와 같은 일부 플러그인을 연결할 수 있습니다.
Walkway는 폴리라인으로 그린 경로, 선, SVG 선의 3가지 방법을 지원합니다. PlayStation 컬렉션 애니메이션을 그리는 좋은 예를 제공합니다.
ProgressBar.js는 만화 SVG 선을 그리기 위한 귀엽고 사용하기 쉬운 성장 곡선 차트입니다. 이를 통해 다양한 모양을 성장 곡선으로 사용할 수 있습니다. 범위, 원, 블록과 같은 몇 가지 실용적인 모양을 통합하며 Illustrator 또는 기타 벡터 그리기 도구를 통해 자신만의 성장 차트를 개발할 수도 있습니다. ProgressBar.js는 가볍고 MIT 라이센스가 있으며 IE9를 지원합니다. 이를 통해 대규모 원주형 성장 차트를 수정할 수 있습니다. 또한 획 너비, 불투명도 로드, 색상 로드 등과 같은 속성을 변경하여 애니메이션을 생성할 수도 있습니다.
Chartist.js는 SVG를 통해 그려지는 간단하고 수용하기 쉬운 아이콘 라이브러리입니다. Chartist의 목적은 간단하고, 가볍고, 방해가 되지 않는 차트 라이브러리를 제공하는 것입니다. 일부 사용자 정의 구성을 수행하려면 일부 자바스크립트 구성 개체를 제공해야 합니다. 그렇지 않으면 기본적으로 이미 정렬되어 있는 기본 구성이 사용됩니다.
Chartist는 인라인 SVG를 통해 작성되므로 제공하는 기능에 비해 DOM 조작에 거의 영향을 미치지 않습니다. 이는 Chartist가 간단한 HTML, JavaScript 및 CSS를 통해 달성할 수 있는 개인 제어, 워터마크, 동작 등을 제공하지 않는다는 것을 의미합니다.
위 내용은 이 글에서 추천하는 SVG 애니메이션용 자바스크립트 라이브러리입니다. 자바스크립트를 배우시는 모든 분들에게 도움이 되었으면 좋겠습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
