[JAVASCRIPT] SVG Animation을 위한 8가지 Javascript 라이브러리 | 8+ JavaScript libraries for SVG Animation

SVG는 해상도에 독립적 인 그래픽입니다. 즉 , 품질 저하없이 모든 유형의 화면에서 잘 보입니다 . 그 외에도 애니메이션 효과를 사용하여 SVG를 생생하게 만들 수도 있습니다.

이전 SVG 시리즈 게시물 중 하나에서 SVG 애니메이션이 낮은 수준이지만 요소와 함께 작동하는 방식을 보여주었습니다. 이번에는 SVG 애니메이션을 다음 단계로 확장하는 데 도움이되는 몇 가지 JavaScript 라이브러리를 공유 할 것입니다.

1. 비 부스

Vivus 10SVG에 그려지는 것처럼 보이게 하는 자바 스크립트 라이브러리입니다 . Vivus는 종속성 (예 : jQuery)없이 즉시 작동합니다. .jsHTML에 파일을 포함하고 애니메이션을 바로 시작할 수있는 몇 가지 사전 설정 옵션과 함께 애니메이션 할 SVG 요소를 지정하기 만하면됩니다 .

예를 들면 :

1 new Vivus( 'svg-element' , { type: 'oneByOne' , duration: 200 });

위의 내용은 svg-elementID가 200 밀리 초인 내 SVG 요소에 애니메이션을 적용 합니다. 이 SVG의 각 요소는 해당 시간 프레임 내에 차례로 그려집니다.

svg vivus700 × 380

2. 분재

분재 8 웹 페이지에서 그래픽 요소를 그리고, 변형하고, 애니메이션을 적용 할 수있는 강력한 JavaScript 라이브러리입니다.

HTML5 그래픽 유형 캔버스를 모두 지원합니다. 1및 SVG. Bonsai를 사용하면 간단한 직사각형이나 원을 만들거나 원하는 경우 이와 같은 본격적인 멀티 플레이어 애니메이션 게임을 만들 수 있습니다. 1.

Orbit을 사용하여 Bonsai가 실사에서 어떻게 작동하는지 느끼거나 인상적인 몇 가지 사례를 확인할 수 있습니다. 5 영감을 얻습니다.

svg 분재700 × 380

3. 속도

속도 4빠른 애니메이션을 위해 만들어진 JavaScript 라이브러리입니다. 애니메이션을 렌더링 할 때 Velocity의 속도는 엄청나게 빠릅니다. 비교에서 jQuery 및 심지어 CSS보다 성능이 뛰어납니다.

이 키워드 별칭을 사용하는 것을 제외하고 속도의 API는 jQuery를에 애니메이션과 유사한 작동 $.velocity()대신 $.animate(). 그 옆으로, 당신은 같은 동일한 애니메이션 키워드를 사용 fadeIn하고 fadeOut.

svg 속도700 × 380

4. 라파엘

RaphaelJS 1웹 페이지에서 벡터 그래픽 SVG를 그리고 애니메이션화 할 수있는 라이브러리입니다. 광범위한 브라우저를 지원하므로 Raphael은 틈새 시장에서 가장 신뢰할 수있는 JavaScript 라이브러리가되었습니다.

RaphaelJS를 사용하면 Counter Strike와 유사한 대화 형 분석 차트, 세계지도 및 게임 상호 작용을 구축 할 수 있습니다.

svg 라파엘700 × 380

5. 스냅

SnapSVG 삼 Raphael 개발자 인 Dmitry Baranovskiy와 Adobe Web Platform Team이 처음부터 개발 한 또 다른 인기있는 SVG 애니메이션 용 JavaScript 라이브러리입니다.

Raphael과 달리 SnapSVG는 최신 브라우저만을위한 것입니다. 따라서 라이브러리가 Raphael보다 훨씬 작을 수 있으며 클리핑 및 마스킹과 같은 SVG 기능을 지원할 수 있습니다.

svg snapjs700 × 380

6. 레이지 라인 페인터

레이지 라인 페인터 삼 Vivus와 유사하게 SVG 경로를 애니메이션화하여 그리기 시퀀스를 애니메이션화하는 jQuery 플러그인입니다.

나쁜 소식은이 플러그인이 매우 특정한 작업 만 수행한다는 것입니다. 따라서 Illustrator 또는 Inkscape와 같은 앱에서 SVG를 가져올 때 SVG에 채우기 색상이 남아 있지 않고 경로 만 남아 있는지 확인하십시오.

svg lazyline700 × 380

7. SVG.js

SVG.js 2SVG를 조작하고 애니메이션화하기위한 경량 라이브러리입니다. 이 라이브러리를 사용하면 SVG 요소 내에서 크기, 위치 또는 색상을 애니메이션 할 수 있습니다.

하지만 애니메이션뿐만 아니라 추가 기능을 추가하기 위해 추가 플러그인 을 적용 할 수도 있습니다 . 이 예제 에서는 svg.filter.js 플러그인 을 사용하여 가우시안 흐림, 채도 감소, 대비, 세피아 등과 같은 필터를 이미지에 적용합니다.

svg svgjs700 × 380

8. 산책로

보도 2지지체 요소의 세 가지 유형은 path, line및 polylineSVG 라인 묘화에 사용. 다음은 예입니다. 삼 PlayStation 4 콘솔 라인 애니메이션을 보여주는 Polygon에서.

svg 산책로700 × 380

Source: hongkiat

즐거운 학습 되세요!