SVG animace - SVG animation
![]() | Tento článek má několik problémů. Prosím pomozte vylepši to nebo diskutovat o těchto otázkách na internetu diskusní stránka. (Zjistěte, jak a kdy tyto zprávy ze šablony odebrat) (Zjistěte, jak a kdy odstranit tuto zprávu šablony)
|
Škálovatelná vektorová grafika | |
---|---|
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
![]() | Tato sekce případně obsahuje původní výzkum.Květen 2019) (Zjistěte, jak a kdy odstranit tuto zprávu šablony) ( |
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
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
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
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
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ý. auto
Vý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.