SVG 애니메이션

SVG animation

Scalable Vector Graphics 애니메이션, XML 기반의 오픈 표준 벡터 그래픽 포맷은 다음과 같은 다양한 방법으로 가능합니다.

  • 설명: ECMAScript는 SVG 내에서 애니메이션 및 대화형 사용자 인터페이스를 만드는 주요 수단입니다.
  • 스타일링:2008년 이후 WebKit의 기능으로서 CSS 애니메이션을 개발함으로써 Document Object Model(DOM; 문서 객체 모델) 내에서 SVG 파일의 스타일시트 기반의 암묵적인 애니메이션이 가능해졌다.
  • SMIL:동기화 멀티 미디어 통합 언어, 사람을 활기 차게 하SVG-based 하이퍼 미디어의 추천 means[1][2][3][4]은 아마야(2003년)[5]오페라에서 지원하는(2006년)[6]모질라 파이어 폭스(2011년)[7]구글 크롬(2016년)과 사파리(2017년)웹 browsers,[8]고 브라우저고자 하는 대량을 건네주Acid3 웹 표준 시험의 2008년(i.e.기 전에 시험의``s2011년 implification")테스트 75 및 76에 대한 SMIL 지원이 필요하기 때문입니다.

라이브러리는 또한 현재의 SVG [9]지원 브라우저 SMIL을 지원하기 위해 shim으로 작성되었습니다.이 메서드는 SVG+[citation needed]Time이라고도 합니다.

SVG는 PNG(Portable Network Graphics) JPEG 래스터 이미지를 지원하므로 APNG 및 MNG(Multiple-image Network Graphics) 대신 이러한 이미지를 애니메이션화할 수 있습니다.

역사

SVG 애니메이션 요소는 SMIL(Synchronized Multimedia Integration Language)의 여러 버전을 출판한 작업 그룹과 협력하여 개발되었습니다.SYMM Working Group(SVG 워킹 그룹)은 범용 XML 애니메이션 기능 세트를 나타내는 SMIL 애니메이션 사양을 개발했습니다.SVG는 SMIL 애니메이션 사양에 정의된 애니메이션 기능을 통합하고 SVG 고유의 확장을 제공합니다.

1998년 6월 World Wide Web Consortium(W3C) 내의 Synchronized Multimedia Working Group(SYMM)[10]은 SMIL 1.0으로 [11][12]알려진 사양의 첫 번째 권장 버전을 발표했습니다.1998년에 SMIL 1.0을 발표한 직후, Microsoft가 이끄는 기업 그룹은 「Timed Interactive Multimedia Extensions for HTML (HTML+TIME); Web Browser로 SMIL 확장[13]을 발표했습니다.이후 2년간 HTML+TIME의 주 집필자(Patrick Schmitz)는 SYMM 워킹그룹과 함께 SVG 워킹그룹과 함께 작업했습니다.SMIL 2.0의 발행 직후, Schmitz와 공동 저자인 Aaron Cohen(인텔 출신)은 2001년 [14][15]9월 4일에 SMIL 애니메이션을 발행했습니다.또한 SVG 1.0은 2001년 9월 4일에 W3C 권장사항이 되었습니다.

Amaya를 포함한 일부 웹 브라우저는 2000년대에 SVG 애니메이션을 지원했지만 SVG 애니메이션은 2010년대부터 널리 사용되는 브라우저, 특히 Firefox 4(2011)에서만 지원되었습니다.Internet Explorer는 ECMAScript 애니메이션을 지원하며 후속 Microsoft Edge는 버전 42.17134에서 ECMAScript 및 CSS 애니메이션을 지원합니다.

다음 코드 조각은 호환되는 브라우저에서 애니메이션 SVG 이미지를 만드는 세 가지 기술을 보여 줍니다.관련 부품은 노란색으로 강조 표시됩니다.애니메이션 버전을 보려면 이미지의 미리 보기를 클릭합니다.

SMIL을 사용한 SVG 애니메이션

SVG animation using SMIL.svg
About this image
<!DOSCTYPE svg PUBLIC -//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">    <138g>버전="1.1"xmlns="http://www.w3.org/2000/svg"xmlns: xlink="http://www.w3.org/1999/xlink"    폭="100%"높이="100%"viewBox="-4 -4 8 8">  <title> SMIL을 사용한SVG 애니메이션 </title>       <클라이언트>cx="0"cy="1"r="2"스트로크="빨간색"채우기="없음">   <애니메이트 변환>    attributeName="실패"    기여하다타입="XML"    입력="실패"    송신원="0"    =에게"360"    시작="0s"    지속시간='1s'    repeat Count ="무한"/>  </filters> </httpg> 

CSS를 사용한 SVG 애니메이션

SVG animation using CSS.svg
About this image
<!DOSCTYPE svg PUBLIC -//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">    <138g>버전="1.1"xmlns="http://www.w3.org/2000/svg"xmlns: xlink="http://www.w3.org/1999/xlink"    폭="100%"높이="100%"viewBox="-4 -4 8 8">  <title> CSS를 사용한SVG 애니메이션 </title>  <스타일> 입력="텍스트/CSS"> @keyframes rot_kf {{transform: 회전(0°); }에서{ 변환: 회전(360°); }}.rot {애니메이션: rot_kf 1s 선형 무한대;} </style>   <클라이언트>클래스="회전"        cx="0"cy="1"r="2"스트로크='파랑'채우기="없음"/> </httpg> 

ECMAScript를 사용한 SVG 애니메이션

A drawing of a streetlight that can be interactive
SVG 애니메이션과 Javascript를 사용하여 애니메이션화된 신호등.파일 참조:자세한 내용은 Ampel.svg를 참조하십시오.
<!DOSCTYPE svg PUBLIC -//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <138g> 버전="1.1" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" 폭="100%" 높이="100%" viewBox="-4 -4 8 8" 온로드="오디오(evt)">  <title> ECMAScript를 사용한SVG 애니메이션 </title>  <스크립트> 입력="텍스트/ecmascript"> 함수 회전(evt) {var 객체 = evt.target.ownerDocument.getElementById('rot');setInterval(함수) {var now = new Date();var 밀리초 = now.getTime() % 1000;가변 도수 = 밀리초 * 0.36; // 1000 밀리초 동안 360도물건.setAttribute('transform', 'rotate('+도+')');}, 20);} </script>  <클라이언트> id="회전"    cx="0" cy="1" r="2" 스트로크="녹색" 채우기="없음"/> </httpg> 

위의 예는 동작하지만 최적의 구현은 아닙니다.애니메이션은 50프레임/초(FPS)로 제한됩니다.사용.requestAnimationFrame퍼포먼스가 향상되어 최대 60FPS에 도달할 수 있습니다.

<!DOSCTYPE svg PUBLIC -//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <138g> 버전="1.1" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" 폭="100%" 높이="100%" viewBox="-4 -4 8 8" 온로드="init()">   <title> request Animation Frame() </title>을 사용한SVG 애니메이션   <스크립트> var 객체    함수 init() {개체 = document.getElementById('rot');window.request Animation Frame(회전);}    함수 회전(수직) {var milliseconds = 타임스탬프 % 1000;가변 도수 = 밀리초 * 0.36; // 1000 밀리초 동안 360도물건.setAttribute('transform', 'rotate('+도+')');window.request Animation Frame(회전);}  </script>   <클라이언트> id="회전" cx="0" cy="1" r="2" 스트로크="녹색" 채우기="없음"/> </httpg> 


타겟 애트리뷰트를 식별하는 SMIL 애트리뷰트

다음은 시간이 지남에 따라 값이 변화하는 특정 대상 요소의 대상 속성을 식별하는 애니메이션 속성입니다. attributeName = "<attributeName>"는 타겟 Atribute의 이름을 지정합니다.XMLNS 프리픽스를 사용하여 Atribute의 XML 네임스페이스를 나타낼 수 있습니다.접두사는 현재 애니메이션 요소의 범위에서 해석됩니다.

attributeType = "CSS XML auto"는 타깃 Atribut과 관련된 값을 정의하는 네임스페이스를 지정합니다. CSS는, 「attributeName」의 값이 이 사양으로 애니메이션 가능한 것으로 정의되고 있는 CSS 속성의 이름임을 지정합니다. XML에는, 「attributeName」의 값이 타겟 요소의 디폴트의 XML 네임스페이스에 정의되어 있는 XML 어트리뷰트의 이름을 지정합니다.특성은 이 규격에서 애니메이션 가능한 것으로 정의되어야 합니다. auto기본값은 'auto'입니다.구현은 '속성 이름'을 대상 요소의 속성과 일치시켜야 합니다.실장에서는 먼저 CSS 속성 목록에서 일치하는 속성 이름을 검색해야 합니다.또한 일치하는 속성이 발견되지 않으면 기본 XML 네임스페이스를 검색합니다.

MediaWiki Wiki 소프트웨어는 SVG 이미지의 정적인 비애니메이션 섬네일을 자동으로 생성합니다.각 설명 페이지에서 실제 .svg 이미지를 표시하면 호환되는 브라우저에 애니메이션이 표시됩니다.

라이브러리

SVG 애니메이션을 사용하기 위한 몇 가지 JavaScript 라이브러리가 있습니다.이러한 라이브러리를 사용하는 것의 장점은 이러한 라이브러리가 종종 추상화를 통해 브라우저의 비호환성 문제를 해결한다는 것입니다.라이브러리의 예로는 Raphael과 Velocity.js가 있습니다.

「 」를 참조해 주세요.

레퍼런스

  1. ^ "Scalable Vector Graphics (SVG) 1.1 Specification". World Wide Web Consortium. January 2003 – April 2009. Retrieved 4 February 2010.
  2. ^ Festa, Paul (9 January 2003). "W3C releases scripting standard, caveat". CNet. Retrieved 24 February 2010.
  3. ^ Bulterman, D.C.A.; Lloyd Rutledge (November 2008). SMIL 3.0: Interactive Multimedia for the Web, Mobile Devices and Daisy Talking Books. X.media.publishing (2nd ed.). New York: Springer. p. 508. ISBN 9783540785460.
  4. ^ SMIL 3.0.
  5. ^ "SVG Animation support in Amaya". World Wide Web Consortium. 15 April 2003. Retrieved 4 February 2010.
  6. ^ McCathieNevile, Charles (31 October 2006). "Animating Your SVG". Opera Developer Community. Opera Software. Archived from the original on 7 March 2010. Retrieved 24 February 2010.
  7. ^ "SVG animation with SMIL". 29 March 2011.
  8. ^ "When can I use SVG SMIL animation?".
  9. ^ Dahlström, Erik (August 2008). "Tricks of javascript, SVG and SMIL". Opera Software at SVG Open. Retrieved 24 February 2010.
  10. ^ "W3C Synchronized Multimedia Home page". www.w3.org. Retrieved 2022-03-20.
  11. ^ Hoschka, Philipp, ed. (1998-06-15). "Synchronized Multimedia Integration Language (SMIL) 1.0 Specification". W3C. SYMM Working Group. Retrieved 2021-04-09.
  12. ^ Khudairi, Sally; Jacobs, Ian; Mitchell, Ned; Lloyd, Andrew; Matsubara, Yumiko (1998-06-15). "Press Release: W3C Issues SMIL as a W3C Recommendation". W3C. W3C. Retrieved 2021-04-09.
  13. ^ Schmitz, Patrick; Yu, Jin; Santangeli, Peter (1998-09-18). "Timed Interactive Multimedia Extensions for HTML (HTML+TIME); Extending SMIL into the Web Browser". World Wide Web Consortium (w3.org). Retrieved 2022-03-20.
  14. ^ "Synchronized Multimedia Integration Language (SMIL 2.0)". www.w3.org. 7 August 2001. Retrieved 2022-03-20.
  15. ^ Schmitz, Patrick; Cohen, Aaron (4 September 2001). "SMIL Animation". www.w3.org. Retrieved 2022-03-20.

외부 링크