SVG 애니메이션을위한 8 가지 JavaScript 라이브러리
SVG는 해상도 독립적 인 그래픽입니다. 즉, 품질 저하없이 모든 유형의 화면에서 선명하게 보입니다.. 그 외에도 일부 애니메이션 효과를 사용하여 SVG를 생생하게 만들 수 있습니다..
이전에 SVG 시리즈의 게시물 중 하나에서 우리는 SVG 애니메이션이
Hongkiat.com에 대한 추가 정보 :
- Animate.css - 쉽게 애니메이션을 생성하는 CSS3 라이브러리
- Textillate.js를 사용하여 텍스트에 쉽게 애니메이션 적용
- 포토샵 텍스트를 SVG로 변환하는 방법
- jQuery로 애니메이션 숨기기 및 슬라이드하기
1. 비 부스
Vivus는 SVG에 그려지는 모습을 보여줍니다.. Vivus는 종속성 (예 : jQuery) 없이도 즉시 사용할 수 있습니다. 간단하게 .js 파일을 HTML에 저장하고 애니메이션을 적용 할 SVG 요소를 지정하고 애니메이션을 바로 시작할 수있는 미리 설정된 옵션을 지정하십시오.
예 :
새로운 Vivus ( 'svg-element', type : 'oneByOne', duration : 200);
위의 코드는 SVG 요소에 애니메이션을 적용합니다. svg 요소 ID는 200 밀리 초입니다. 이 SVG의 각 요소는 그 시간 프레임 내에서 차례대로 그려집니다.
2. 분재
Bonsai는 웹 페이지의 그래픽 요소를 그리거나 변형하거나 애니메이션으로 만들 수있는 강력한 JavaScript 라이브러리입니다. HTML5 그래픽 형식의 Canvas와 SVG를 모두 지원합니다. Bonsai를 사용하면 간단한 직사각형이나 원을 만들 수 있습니다. 원한다면 본격적인 멀티 플레이어 이 같은 애니메이션 게임. 궤도를 사용하여 분재가 실전에서 어떻게 작동 하는지를 알아 보거나이 인상적인 몇 가지 예를 통해 영감을 얻으실 수 있습니다..
3. 세기
Velocity는 빠른 애니메이션을 위해 제작 된 JavaScript 라이브러리입니다. 애니메이션 렌더링시 속도의 속도가 매우 빠릅니다. 그것은 jQuery와 심지어 CSS보다 훨씬 뛰어나다. Velocity의 API는 jQuery의 애니메이션과 유사하게 작동하지만 키워드 별칭을 사용한다는 점만 다릅니다. $ .velocity () 대신에 $ .animate (). 그 외에, 다음과 같은 정확한 애니메이션 키워드를 사용할 수 있습니다. 점점 뚜렷해지다 과 사라지다.
4. 라파엘
RaphaelJS는 웹 페이지에 벡터 그래픽 SVG를 그리거나 애니메이션을 적용 할 수있는 라이브러리입니다. IE6에 이르기까지 다양한 브라우저를 지원하기 때문에 Raphael은 틈새 시장에서 가장 신뢰할 수있는 JavaScript 라이브러리입니다. RaphaelJS를 사용하면 상호 작용 분석 차트, 세계지도 및 카운터 스트라이크와 유사한 게임 상호 작용을 구축 할 수 있습니다.
5. 스냅
SnapSVG는 Raphael 개발자 인 Dmitry Baranovskiy가 처음부터 Adobe 웹 플랫폼 팀과 함께 개발 한 SVG 애니메이션을위한 인기있는 JavaScript 라이브러리입니다. 그러나 Raphael과 달리 SnapSVG는 최신 브라우저에만 사용됩니다. 따라서 라이브러리가 Raphael보다 훨씬 작고 클리핑 및 마스킹과 같은 SVG 기능을 지원할 수 있습니다..
6. 게으른 선화
Lazy Line Painter는 Vivus와 비슷한 드로잉 시퀀스를 애니메이션화하기 위해 SVG 경로에 애니메이션을 적용하기위한 jQuery 플러그인입니다. 나쁜 소식은이 플러그인이이 매우 구체적인 작업을 수행한다는 것입니다. 따라서 Illustrator 또는 Inkscape와 같은 응용 프로그램에서 SVG를 가져올 때 SVG에 채움 색상이없고 경로 만 남았는지 확인하십시오.
7. SVG.js
SVG.js는 SVG를 조작하고 애니메이션화하는 가벼운 라이브러리입니다. 이 라이브러리를 사용하면 SVG 요소 내에서 크기, 위치 또는 색상을 애니메이션으로 만들 수 있습니다. 그래도 움직이는 것은 아닙니다. 추가 기능을 추가하기 위해 추가 플러그인을 적용 할 수도 있습니다. 이 예제에서는 svg.filter.js 플러그인을 사용하여 가우시안 블러, 채도 감소, 대비, 세피아 등과 같은 필터를 이미지에 적용합니다..
8. 산책로
워크 웨이는 세 가지 유형의 요소를 지원합니다., 통로, 선, 과 폴리 라인 SVG 라인을 그리는 데 사용됩니다. 다음은 Polygon의 PlayStation 4 콘솔 라인 애니메이션을 보여주는 예입니다..
