SVG animace - SVG animation

Škálovatelná vektorová grafika
	sXBL; Pracovní skupina SVG; Účinky filtru SVG; Přesný značkovací jazyk grafiky; Vektorový značkovací jazyk; XHTML + MathML + SVG; SVG animace; Porovnání rozvržení motorů (SVG);

Animace Škálovatelná vektorová grafika, otevřené XML - standardní vektorová grafika formátu, je možné různými způsoby:

Skriptování: ECMAScript je primárním prostředkem vytváření animací a interaktivních uživatelských rozhraní v rámci SVG.
Styling: Od roku 2008 je vývoj Animace CSS jako funkce v WebKit umožnil možnou implicitní animaci šablon stylů poháněnou soubory SVG zevnitř Model objektu dokumentu (DOM).
SMIL: Synchronized Multimedia Integration Language, doporučený prostředek^[1]^[2]^[3] animace založené na SVG hypermediální, podporováno Amaya (2003)^[4] Opera (2006),^[5] Mozilla Firefox (2011),^[6] Google Chrome (2016) a Safari (2017) internetové prohlížeče,^[7] a jakýkoli prohlížeč, jehož cílem je předat Kyselina3 webové standardy test z roku 2008 (tj. před „zjednodušením“ testu v roce 2011), protože to vyžaduje podporu SMIL pro testy 75 a 76.

Knihovny byly také napsány jako podložka poskytnout současným prohlížečům podporujícím SVG podporu SMIL.^[8] Tato metoda je známá také jako SVG + čas.^{[Citace je zapotřebí ]}

Protože SVG podporuje Přenosná síťová grafika (PNG) a JPEG rastrových obrázků, lze jej použít k animaci těchto obrázků jako alternativu k APNG a Síťová grafika s více obrázky (MNG).

Dějiny

Animační prvky SVG byly vyvinuty ve spolupráci s World Wide Web Consortium (W3C) Synchronizovaná multimediální pracovní skupina, vývojáři Synchronizovaný jazyk integrace multimédií, jehož první verze byla vydána v roce 1999. SVG 1.0 se stal a Doporučení W3C dne 4. září 2001. Určité internetové prohlížeče přidána podpora pro animaci SVG během 2000s, včetně Amaya již v roce 2003, ale animace SVG byla podporována pouze široce používanými prohlížeči od roku 2010, zejména pak Firefox 4 (2011). internet Explorer podporuje animaci ECMAScript a její nástupce Microsoft Edge podporuje animace ECMAScript a CSS od verze 42.17134.

Autorem je pracovní skupina SYMM ve spolupráci s pracovní skupinou SVG^{[rok potřebný ]} specifikace animace SMIL, která představuje obecný účel XML sada funkcí animace. SVG zahrnuje funkce animace definované ve specifikaci SMIL Animation a poskytuje některá rozšíření specifická pro SVG.

Příklady

Následující fragmenty kódu ukazují tři techniky vytváření animovaného SVG v kompatibilních prohlížečích. Příslušné části jsou zvýrazněny žlutě.

Animace SVG pomocí SMIL

 1 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 2  verze ="1.1" xmlns =„http://www.w3.org/2000/svg“ xmlns: xlink =„http://www.w3.org/1999/xlink“ 3  šířka ="100%" výška ="100%" viewBox ="-4 -4 8 8"> 4  <title>Animace SVG pomocí SMIL</title> 5   cx ="0" cy ="1" r ="2" zdvih ="Červené" vyplnit ="žádný"> 6    7    atributName ="přeměnit" 8    attributeType =„XML“ 9    zadejte ="točit se"10    od ="0"11    do ="360"12    začít =„0 s“13    dur =„1 s“14    repeatCount ="neurčitý"/>15  </circle>16 </svg>

Animace SVG pomocí CSS

 1 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 2  verze ="1.1" xmlns =„http://www.w3.org/2000/svg“ xmlns: xlink =„http://www.w3.org/1999/xlink“ 3  šířka ="100%" výška ="100%" viewBox ="-4 -4 8 8"> 4  <title>Animace SVG pomocí CSS</title> 5   zadejte =„text / css“> 6   @keyframes rot_kf {from {transform: rotate (0deg); } 7                       to {transformace: rotace (360deg); }} 8   .rot {animace: rot_kf 1 s lineární nekonečno; } 9  </style>10   třída ="trouchnivění" 11   cx ="0" cy ="1" r ="2" zdvih ="modrý" vyplnit ="žádný"/>12 </svg>

Animace SVG pomocí ECMAScript

 1 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 2  verze ="1.1" xmlns =„http://www.w3.org/2000/svg“ xmlns: xlink =„http://www.w3.org/1999/xlink“ šířka ="100%" výška ="100%" viewBox ="-4 -4 8 8"  3  onload =„otočit (evt)“> 4  <title>Animace SVG pomocí ECMAScript</title> 5   zadejte =„text / ekmascript“> 6   funkce otočit (evt) { 7    var object = evt.target.ownerDocument.getElementById ('rot'); 8    setInterval (funkce () { 9      var now = new Date ();10      var miliseconds = now.getTime ()% 1000;11      var stupňů = milisekundy * 0,36; // 360 stupňů za 1000 ms12      object.setAttribute ('transform', 'rotate (' + levels + ')');13     }, 20);14   }15  </script>16   id ="trouchnivění"17   cx ="0" cy ="1" r ="2" zdvih ="zelená" vyplnit ="žádný"/>18 </svg>

Ačkoli výše uvedený příklad funguje, nejde o optimální implementaci, animace je omezena na 50 snímků za sekundu (FPS). Použitím requestAnimationFrame poskytuje lepší výkon a může dosáhnout 60 FPS:

 1 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 2  verze ="1.1" xmlns =„http://www.w3.org/2000/svg“ xmlns: xlink =„http://www.w3.org/1999/xlink“ šířka ="100%" výška ="100%" viewBox ="-4 -4 8 8"  3  onload =„init ()“> 4   <title>Animace SVG pomocí requestAnimationFrame ()</title> 5   <script> 6     var objekt; 7  8     funkce init () { 9       object = document.getElementById ('rot'); 10       window.requestAnimationFrame (otočit);11     }12 13     funkce otočit (časové razítko) {14       var milisekundy = časové razítko% 1000;15       var stupňů = milisekundy * 0,36; // 360 stupňů za 1000 ms16       object.setAttribute ('transform', 'rotate (' + levels + ')');17       window.requestAnimationFrame (otočit);18     }19   </script>20    id ="trouchnivění" cx ="0" cy ="1" r ="2" zdvih ="zelená" vyplnit ="žádný"/>21 </svg>

Atributy SMIL k identifikaci cílového atributu

Následuje atribut animace, který identifikuje cílový atribut pro daný cílový prvek, jehož hodnota se časem mění.attributeName = "" určuje název cílového atributu. Předponu XMLNS lze použít k označení XML jmenný prostor pro atribut. Předpona bude interpretována v rozsahu aktuálního prvku animace.

attributeType = "CSS | XML | auto" Určuje jmenný prostor, ve kterém jsou definovány cílový atribut a jeho přidružené hodnoty. CSS určuje, že hodnota atributu „attributeName“ je název vlastnosti CSS definované v této specifikaci jako animovatelná. XML určuje, že hodnota atributu „attributeName“ je název atributu XML definovaného ve výchozím oboru názvů XML pro cílový prvek. Atribut musí být v této specifikaci definován jako animovatelný. autoVýchozí hodnota je „auto“. Implementace by měla odpovídat atributu ‘název atributu’ atributu pro cílový prvek. Implementace musí nejprve prohledat seznam vlastností CSS pro odpovídající název vlastnosti, a pokud žádný není nalezen, prohledat element ve výchozím oboru názvů XML.

Animace SMIL demonstrující změnu transformace (měřítko) a atributů CSS (krytí a posun pomlčky)
Animace SMIL předvádějící pohyb po dráze a simulace 3D
Animace SMIL předvádějící morfing tvarů (cest)
Animace CSS3 demonstrující změny v transformaci (rotaci, měřítko a překlad) a simulaci 3D

The MediaWiki Software wiki automaticky generuje statické, neanimované miniatury obrázků SVG. Prohlížení skutečného obrázku .svg z každé příslušné stránky s popisem zobrazí jeho animaci v kompatibilním prohlížeči.

Knihovny

Existuje několik knihoven JavaScriptu pro práci s animací SVG. Výhodou použití těchto knihoven je, že tyto knihovny často řeší problémy s nekompatibilitou v prohlížečích abstrakce. Mezi příklady knihoven patří Raphaël a Velocity.js

Viz také

Reference

^ „Specifikace škálovatelné vektorové grafiky (SVG) 1.1“. World Wide Web Consortium. Leden 2003 - duben 2009. Citováno 4. února 2010. Citovat deník vyžaduje | deník = (Pomoc)CS1 maint: formát data (odkaz)
^ Festa, Paul (9. ledna 2003). „W3C vydává standard skriptování, upozornění“. CNet. Citováno 24. února 2010.
^ Bulterman, D.C.A.; Lloyd Rutledge (listopad 2008). SMIL 3.0: Interaktivní multimédia pro web, mobilní zařízení a Daisy Talking Books. Publikování X.media (2. vyd.). New York: NY: Springer. str. 508. ISBN 978-3-540-78546-0.
^ „Podpora animace SVG v Amaya“. World Wide Web Consortium. 15. dubna 2003. Citováno 4. února 2010.
^ McCathieNevile, Charles (31. října 2006). „Animace vašeho SVG“. Komunita vývojářů Opera. Software pro operu. Archivovány od originál dne 7. března 2010. Citováno 24. února 2010.
^ „SVG animation with SMIL“. 29. března 2011.
^ „Kdy mohu použít animaci SVG SMIL?“.
^ Dahlström, Erik (srpen 2008). „Triky javascriptů, SVG a SMIL“. Software pro operu na Otevřeno SVG. Citováno 24. února 2010.

externí odkazy

[1] „Specifikace škálovatelné vektorové grafiky (SVG) 1.1“. World Wide Web Consortium. Leden 2003 - duben 2009. Citováno 4. února 2010. Citovat deník vyžaduje | deník = (Pomoc)CS1 maint: formát data (odkaz)

[2] Festa, Paul (9. ledna 2003). „W3C vydává standard skriptování, upozornění“. CNet. Citováno 24. února 2010.

[3] Bulterman, D.C.A.; Lloyd Rutledge (listopad 2008). SMIL 3.0: Interaktivní multimédia pro web, mobilní zařízení a Daisy Talking Books. Publikování X.media (2. vyd.). New York: NY: Springer. str. 508. ISBN 978-3-540-78546-0.

[4] „Podpora animace SVG v Amaya“. World Wide Web Consortium. 15. dubna 2003. Citováno 4. února 2010.

[5] McCathieNevile, Charles (31. října 2006). „Animace vašeho SVG“. Komunita vývojářů Opera. Software pro operu. Archivovány od originál dne 7. března 2010. Citováno 24. února 2010.

[6] „SVG animation with SMIL“. 29. března 2011.

[7] „Kdy mohu použít animaci SVG SMIL?“.

[8] Dahlström, Erik (srpen 2008). „Triky javascriptů, SVG a SMIL“. Software pro operu na Otevřeno SVG. Citováno 24. února 2010.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

Škálovatelná vektorová grafika
sXBL Pracovní skupina SVG Účinky filtru SVG Přesný značkovací jazyk grafiky Vektorový značkovací jazyk XHTML + MathML + SVG SVG animace Porovnání rozvržení motorů (SVG)