In de YUI 3 Gallery: Extensies voor SVG, gemaakt voor SVG Wow! »Yahoo! User Interface Blog (YUIBlog)

In de YUI 3 Gallery: Extensies voor SVG, gemaakt voor SVG Wow!

18 oktober 2010 om 11:18 uur door Vincent Hardy | In Ontwikkeling , YUI 3 Galerij | 2 Commentaren

Introductie

SVG ( Scalable Vector Graphics ) is een declaratieve syntax voor interactieve, geanimeerde 2D afbeeldingen: vormen, afbeeldingen en tekst. SVG ondersteuning is onderdeel van de HTML 5 -specificatie en SVG wordt uitgevoerd door alle grote browsers, inclusief Microsoft's Internet Explorer in versie 9 .

De svg-wow.org website vitrines wat kan worden gedaan met SVG vandaag. De demo's op deze website zijn gemaakt voor de SVG Open conferentie, waar de SVG Wow! sessies zijn een traditie voor meerdere jaren. De SVG Wow! sessies werden die gestart zijn door Dean Jackson, vervolgens in samenwerking met mezelf en daarna voortgezet door Erik Dahlstrom . Erik en ik hebben collorated op de sessie voor de 2009 en 2010 edities van de conferentie.

In de afgelopen twee jaar zijn de demo's steeds vaker gebruikt AJAX frameworks, het toepassen van functies, waarmee het SVG in plaats van (of naast) HTML. YUI is het meest gebruikte raamwerk op de website, die zowel gebruik maakt van YUI 2 en YUI 3 .

Ik zal beginnen met een snel SVG overzicht en vervolgens ingaan op de aard van de demo's die YUI ondersteund en de uitbreidingen die ik heb toegevoegd aan de YUI 3 Galerij te laten werken met SVG. (Deze uitbreidingen zijn nu gratis te gebruiken onder de voorwaarden van BSD-licentie YUI's .)

SVG overzicht

Net als HTML, SVG is een W3C specificatie. Het biedt een syntax voor het beschrijven van basisvormen (rechthoeken, cirkels, lijnen, polygonen, ellipsen, polylijnen), willekeurige vormen (beschreven in termen van padsegmenten die kunnen worden lijnen, kwadratische of kubieke Bezier-curves), tekst en afbeeldingen.

De volgende afbeelding is een screenshot van de alternatieve stylesheet bijvoorbeeld op SVG-wow.org en toont enkele SVG-functies in het spel: rijke rendering (schaduw effecten, verlopen, patronen) en de eenvoudige en complexe vormen.

Omdat SVG-afbeeldingen worden gedefinieerd in termen van geometrie en rendering eigenschappen, is het mogelijk om ze te maken bij elke resolutie. Hierdoor kan SVG beelden worden geschaald naar elke grootte behoud van een hoge renderingkwaliteit, bijvoorbeeld bij het afdrukken (geen scherpe randen).

De volgende ingezoomde weergave toont hetzelfde beeld SVG eerder getoond, maar zijn verkregen bij een hogere resolutie met behoud van de hoge kwaliteit.

Net als HTML, SVG ondersteunt interactiviteit: het is mogelijk om gebeurtenislisteners toe te voegen op grafische objecten voor de muis of het toetsenbord interacties. Natuurlijk, SVG ondersteunt het Document Object Model, waardoor het makkelijk te manipuleren de verschillende eigenschappen van grafische objecten, zoals de geometrie of rendering stijl.

Er is veel aan de SVG specificatie: geavanceerde rendering stijlen (strelen, vulling, patronen, verlopen), filter-effecten (vlekken, schaduwen, kleur matrices), CSS styling, geavanceerde tekst-functies (zoals tekst op een pad) en declaratieve animatie . U kunt kijken op de referenties aan het einde van dit bericht voor meer informatie over de SVG-formaat functies.

SVG en HTML

Met HTML5 , kan SVG tussen de tekst in HTML-documenten zonder meer. Browsers beginnen om die functie (bijvoorbeeld ondersteuning van Firefox 4 ). Op dit moment zijn alle grote browsers ondersteunen SVG inline in XHTML, die dezelfde functionaliteit biedt. SVG in XHTML vereist alleen dat namespaces goed worden gedeclareerd.

 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         ....
     </ Head>
     <body>
         <h1> Inline SVG </ h1>

         <Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"
          xmlns: XLink = "http://www.w3.org/1999/xlink"
          width = "100%" height = "100%" id = "backgroundSVG">
             <- SVG inhoud hier ->
         </ Svg>
     </ Body>
 </ Html>

Alle codevoorbeelden op deze pagina te gebruiken deze manier van inlining SVG in XHTML.

SVG en YUI

SVG ondersteunt declaratieve animatie. Zo kunt u een animatie van de straal van een <circle> element zoals dit:

 <circle cx="50" cy="100" r="40">
     <animate attributeName="r" values="40,60,20,40" dur="1.5s" />
 </ Cirkel>

De <animate> tag is ontleend aan de SMIL -specificatie en, samen met de andere animatie-elementen, biedt het een zeer krachtige animatie engine naar SVG.

Helaas, tot voor kort, browser ondersteuning voor SVG-animatie was schaars. Het is verbeterd de afgelopen twee jaar, maar Microsoft heeft duidelijk gemaakt dat het niet ondersteunt declaratieve SVG animatie in IE 9.

Als gevolg daarvan het grootste deel van de demo's op de svg-wow.org website te gebruiken gescripte animatie in plaats van declaratieve animaties. Aan de ene kant is dit jammer, want declaratieve animaties zijn efficiënter dan scripted animaties. Op de kop, kan gescript animaties zijn zeer flexibel, en ze werken heel implementaties erg goed.

De behoefte aan een goed script animatie oplossing is wat dreef het gebruik van YUI op de svg-wow demo's. De demo ook andere YUI eigenschappen, met name de lader en Node modules.

Animeren SVG met YUI

De demo's op de svg-wow gebruiken YUI te maken elastische drum beats , morphing vormen of roterende tekst en vormen bijvoorbeeld. Met behulp van YUI met SVG nodig een paar YUI extensies, ik zal deze te beschrijven in slechts een moment.


draaiende tekst en vormen	morphing vormen

elastische drum beats

Het volgende illustreert hoe YUI is handig om gewoon te animeren en SVG-afbeeldingen te manipuleren.

Animeren van de SVG `transform` attribuut

Alle SVG grafische elementen hebben een transform attribuut. Dat attribuut geeft aan een 2D- affiene transformatie op elementen, die gebruikt kan worden op te schalen, scheeftrekken, roteren of te vertalen.

De svg-wow.org YUI extensies voor SVG laat het animeren van de transform attribuut als volgt uit:

 var anim = new Y.Animate ({
     knooppunt: '# circleA',
     van: {
         transformeren: {tx: 0, ty: 0, sx: 2, SY: 2}
     }
     tot: {
         transformeren: {tx: 20, Ty: 20, sx: 1, SY: 1}
     }
     transformTemplate: "vertalen (# tx, # ty) schaal (# sx, sy #)",
     duur: 1
 });

Zie de transformatie animaties tests.

U zult merken dat de transformatie waarden worden gedefinieerd in termen van "componenten" (zoals tx of ty ), die worden gecombineerd tot een waarde in met de te vormen transformTemplate vinden op de animatie configuratie object.

De sjabloon is een flexibel mechanisme voor het bouwen van transformeren waarden, met afzonderlijke componenten maken het gemakkelijk om de geanimeerde waarden te berekenen. Dit is een voorbeeld waar de YUI animatie model toegestaan meer flexibiliteit (en meer expressieve kracht) dan SVG's SMIL animatie element ( animateTransform ). Om de animatie hierboven beschreven maken het equivalent SMIL verklaring zijn:

 <circle ...>
     <AnimateTransform attributeName = "transform" type = "translate"
                       from = "0,0" to = "20,20" tijdens = "1s" begin = "scaleAnim.begin" />
     <AnimateTransform id = "scaleAnim" attributeName = "transform" type = "schaal"
                       from = "2,2" to = "1,1" tijdens = "1s" begin = "onbepaalde tijd" />
 </ Cirkel>

Merk op hoe de bovenstaande fragment meerdere vereist animateTransform elementen worden gesynchroniseerd: het begin kenmerk van de eerste animatie op scaleAnim.begin het begin van de twee animaties synchroniseren. Een leuke feature van de YUI animatie motor is dat de timing van een animatie (dat wil zeggen, begin, einde en duur) gedeeld kunnen worden toe te passen op meerdere element eigenschappen.

De YUI-extensie voor het animeren SVG-transformaties wordt op grote schaal gebruikt, zoals in de camera en geanimeerde teksten voorbeelden. Eerstgenoemde gebruikt verlenging van YUI 3 de andere is een uitbreiding van YUI 2.

Animeren geometrie

Basisgeometrie

Animeren SVG geometrie met YUI is heel simpel. In het volgende voorbeeld wordt de animatie een <rect> element breedte, hoogte en hoek stralen:

 var anim = new Y.Animate ({
     knooppunt: '# recta',
     van: {
         width: 200,
         hoogte: 100,
         RX: 5,
         Ry: 5
     }
     tot: {
         width: 300,
         hoogte: 100,
         RX: 10,
         ry: 10;
     }
     duur: 2,
     easing: Y.Easing.elasticOut
 });

Zie de vorm van animaties tests.

Zoals later besproken, een aantal wijzigingen onder de motorkap YUI maakte dit werk. Maar vanuit het perspectief van een ontwikkelaar, deze animatie werkt op exact dezelfde manier als de animatie van een andere HTML-attribuut of CSS-eigenschappen.

De `<path>` 's `d` -attribuut

Een geometrie attribuut is een beetje speciaal: de d -attribuut op de <path> element. De <path> element wordt gebruikt voor willekeurige complexe geometrie. Een <path> kunnen beschrijven elke gewenste vorm. De d eigenschap beschrijft de geometrie op het gebied van padsegmenten die kunnen worden lijnen, bogen, kwadratische of kubieke Bezier-curven (er zijn een paar commando's, maar ze hebben allemaal kaart om Bezier-curves).

Animeren van de d -attribuut ook nodig een beetje uitbreiding van animatie YUI de motor, maar met die extensie, de d -attribuut kunnen worden geanimeerd als ieder ander, zoals hieronder afgebeeld.

 var anim = new Y.Animate ({
     node: "# Patha",
     uit: {d: "M 0 0 C 50 0 100 50 100 100 C 50 100 0 50 0 0 Z"},
     tot: {d "M 0 0 C 100 0 100 0 100 100 C 0 100 0 100 0 0 Z '}
     duur 1s,
     easing: Y.Easing.bounceBack
 });

Zie de paden animaties tests, waaruit blijkt, onder andere, een vinkje verandert in een kruis in de tijd, zoals weergegeven in de volgende beelden.

De Gandhi citaten demo gebruikt deze techniek van het animeren van de d attribuut om morph vormen in de figuur van Gandhi.

Animeren andere SVG-attributen

Uiteraard zijn de YUI animaties niet beperkt tot geometrie eigenschappen. Elke SVG attribuut kan worden geanimeerd. Bijvoorbeeld, de volgende animatie bezielt de blur radius op een horizontale blur filter.

 / / SVG snippet
 <Filter ..
     <FeGaussianBlur id = "BlurFilter" stdDeviation = "10 10" ...  />
 </ Filter>

 / / JavaScript animatie
 var anim = new Y.Animate ({
     knooppunt: '# BlurFilter',
     van: {stdDeviation [0, 20]}
     tot: {stdDeviation [0, 0]}
 });

Zie de filter animaties tests. De volgende afbeelding laat zien hoe animaties met een Gaussiaanse vervaging kan worden gebruikt om de overgang tussen de knop staten.

Dit type effect wordt gebruikt in de fast blur effect demo, ook al is die demo niet YUI animatie, maar declaratieve SMIL-animatie elementen niet te gebruiken (ten koste van en draait alleen bekijken in browsers die die functie, zoals eerder uitgelegd).

Animeren CSS-eigenschappen

Net als HTML, SVG-elementen hebben attributen en ook CSS eigenschappen. SVG heeft een aantal specifieke CSS-eigenschappen . Deze eigenschappen kunnen worden geanimeerd, soms tot verrassende effecten te creëren. Bijvoorbeeld, de stroke-dashoffset kan worden eigenschap te simuleren tekenen van een vorm.

 / / SVG snippet
 <rect id="rectA" width="100" height="50" stroke-dasharray="300 300" stroke-dashoffset="300" />

 / / JavaScript
 var anim = new Y.Animate ({
     node: "# recta",
     naar: {'stroke-dashoffset ": 0},
     duur: 0,25
 });

Zie de slag animaties tests.

De graffiti demo gebruikt deze techniek (ook al zonder YUI animatie) en dat doet de camera demo (deze keer met YUI animatie).

YUI en SVG: Onder de motorkap

De svg-wow.org website maakt gebruik van zowel YUI 2 en 3 en YUI heeft SVG-specifieke uitbreidingen voor beide. De volgende sectie van dit artikel richt zich op de YUI 3 extensies.

Verlengingen nodig:

maken YUI werk met SVG's DOM specifieke kenmerken
rekening voor de uitvoering verschillen
toe te voegen ondersteuning voor nieuwe attribuut typen, zoals SVG-transformaties
voeg extra animatie timing en synchronisatie functies

De verantwoording van SVG DOM Bijzonderheden

Zoals eerder beschreven, kan SVG attributen worden tot leven gebracht met declaratieve elementen zoals <animate> . Om SVG de animatie model te ondersteunen, SVG attribuutwaarden houd beide een geanimeerde en een basiswaarde. Bijvoorbeeld, de r attribuut op een <circle> element een SVGAnimatedLength als volgt gedefinieerd:

 -interface SVGAnimatedLength {
   readonly schrijven SVGLength baseVal;
   readonly schrijven SVGLength animVal;
 };

Als gevolg daarvan, ook in implementaties die geen ondersteuning bieden declaratieve animatie, moeten we reiken naar de baseVal om een attribuut de waarde van lezen:

 var cirkel = document.getElementById ('# myCircle');
 var rValue = circle.getAttribute ('r') baseVal.value.;

Extensies nodig waren om de animatie te motor te laten houden bij de SVG-attributen 'ongebruikelijke waarde model. Gelukkig, YUI 3 heeft een concept van animatie gedrag. Gedrag zijn in wezen attribuut-specifieke haken, en het was vrij gemakkelijk om ondersteuning toe te voegen aan SVG attribuutwaarden af te handelen. Bijvoorbeeld, SVGAnimatedLength zijn attributen behandeld als volgt:

 var lengthBehavior = {
     set: functie (Anim, att, van, naar, verstreken, duur, plezier) {
         / / SVG specifieke behandeling
     }

     te krijgen: functie (Anim, attr) {
         / / SVG specifieke behandeling
     }
 };

 / / Handle <circle> 'sr attribuut
 Y.Animate.behaviors.r = lengthBehavior;

Er zijn meer extensies voor andere SVG attributen waarden, zoals de transform attribuut, kleur attribuutwaarden (zoals fill , stroke of een stop-color ) en attributen, zoals stdDeviation eerder genoemde.

Enkele soortgelijke aanpassingen nodig waren, bijvoorbeeld in de Y.Node.prototype.toString methode weer te verantwoorden SVG de baseVal (deze tijd de className knooppunt eigenschap). Een ander voorbeeld is de standaardnaam voor het knooppunt setter in de Node module.

Accounting voor browser verschillen

Terwijl de vorige uitbreidingen zijn nodig omdat de specificatie verschillen tussen HTML en SVG, is het volgende vereist als gevolg van de uitvoering verschillen tussen browsers.

SVG heeft een speciale categorie van attributen genoemd presentatie attributen . In implementaties ondersteunt ook CSS styling (die alle browsers ondersteunen), deze presentatie attributen zijn echt gewoon een andere manier om een CSS-eigenschappen te geven met een lage specificiteit . Vanaf de SVG specificatie:

De presentatie eigenschappen zal dus aan de CSS2 cascade alsof ze vervangen door overeenkomstige CSS regels gesteld aan het begin van de auteur typogram specificiteit nul. In het algemeen betekent dit dat de presentatie attributen hebben een lagere prioriteit dan andere CSS-stijlregels die in auteur style sheets of 'stijl' attributen.

Helaas hebben sommige browsers niet correct uitvoeren van de specificatie en window.getComputedStyle dat niet altijd voor alle mogelijke bronnen voor het instellen van de SVG CSS-eigenschappen: CSS selectors, stijl attribuut en presentatie attributen.

YUI kwam te hulp dankzij de Node module die kan worden uitgebreid tot deze browser verschillen te verbergen. De Y.DOM.CUSTOM_STYLES en de Y.Node.prototype.getComputedStyle kan worden uitgebreid tot een uniforme manier om SVG stijleigenschappen gelezen te bieden.

Uitbreiding `Y.DOM`

YUI wraps alle DOM toegang via de Node -interface. Hierdoor aantal SVG specifieke DOM methoden, zoals getBBox (gebruikt om de grenzen van een SVG element berekenen) niet toegankelijk voor de omwikkelde voorwerp.

Om de zaken eenvoudiger te programmeren voor SVG, uitbreidingen van de standaard Y.DOM module (die Node werden gebruikt) toegevoegd aan een bloot SVG DOM functies of het gemak methoden, vaak nodig voor het manipuleren van de inhoud toe te voegen:

firstElement/lastElement/prevElement/nextElement/removeAllChildren (niet SVG specifiek)
getMatrix/setMatrix . Biedt een eenvoudige manier om transformaties op de SVG-elementen te manipuleren, iets wat erg moeilijk met de standaard SVG DOM
getBBox/getViewportBBox bieden eenvoudige manieren om toegang te krijgen selectiekader in coördinaten van het element systeem of in viewport ruimte.

loadContent . Een programma om een DOM-fragment te voegen beschreven met behulp van een JavaScript-object letterlijk. Bijvoorbeeld:

 myNode.loadContent ({
     tag: 'g',
     te vullen: 'rood',
     slag: 'none',
     kinderen: [{
         tag: "rect",
         x: 10,
         y: 10
         width: 200,
         Hoogte: 300
     }, {
         tag: 'cirkel',
         r: 10,
         cx: 105,
         cy: 155
     }, {
         tag: 'beeld',
         'XLink: href': 'images / photo.png',
         width: 200,
         hoogte: '300px '
     } PrevSibling);

is een afkorting voor het maken van diverse DOM oproepen (zoals createElementNS , setAttributeNS en appendChild ) om een te creëren g element en de kinderen en het invoegen van het al eerder prevSibling onder myNode . Het nut gaat over namespaces voor de attributen en elementen.

Toevoegingen aan de Animation motor voor timing en synchronisatie

Veel, zo niet de meeste Effecten met betrekking tot animatie vereisen meerdere choreografie animatie gevallen. Meestal worden verschillende animaties nodig om het gewenste effect te creëren, en het begin of het einde van animaties van elkaar afhankelijk zijn, soms met offset tijd: animaties moeten worden gesynchroniseerd.

Bijvoorbeeld, als je een set van vormen die moeten verdwijnen in de ene na de andere, moet u een fade animatie voor elk element maken en vervolgens keten hun starttijd met offset een lichte.

 var geketend = Y.all ('# geketend cirkel'),
     firstAnim, previousAnim;

 chained.each (function (cirkel) {
     var anim = new Y.Animate ({
         knooppunt: cirkel,
         uit: {'vullen': 'wit'},
         naar: {'vullen': 'grijze'},
         duur: 0,25
     });
     if (previousAnim! == ongedefinieerd) {
         / / Synchrnoize begin Anim aan 0,15 seconde na het begin
         / / Van de animatie van de vorige cirkel (previousAnim).
         previousAnim.onBegin (Anim, 0,15);
     } Else {
         firstAnim = Anim;
     }
     previousAnim = Anim;
 });

 / / Start de eerste animatie 1 na een klik op een van de cirkels.
 / / Merk op dat dit een uitbreiding op de standaard YUI run methode die geen
 / / Neem de tijd te compenseren.
 chained.on ('klik', function () {
     firstAnim.run (1);
 });

Zie de tijd offsets tests.

De werkwijze onBegin eenvoudig aan het begin van twee animaties synchroniseren met een offset facultatieve. Eigenlijk onBegin kan ook beroep doen op een functie met offset per keer. Ook de onEnd extensie maakt het gemakkelijk om te synchroniseren met het einde van een animatie.

Standaard YUI animaties zijn gebeurtenissen die een manier om te synchroniseren bieden. De onBegin en onEnd methoden drukken de synchronisatie meer bondig (een vergelijkbaar voorbeeld van de beknoptheid is hieronder te zien).

Bovendien is het soms nodig de animatie synchroniseren met een gebeurtenis, weer met offset tijd. De beginOn en endOn extensies ons in staat stellen om die uit te drukken. Bijvoorbeeld:

 anim.beginOn (Y.one ('# knop'), 'klik', 0,5);

start de animatie 0,5 s na het element met 'button' id is geklikt. Dit is een korte-hand voor:

 Y.one ('# button'). Op ('klik', function () {
     setTimeout (500 / * ms * /, function () {anim.run ();});
 });

Een laatste uitbreiding gemaakt om de animatie klasse was de mogelijkheid om een animatie object van toepassing zijn eerste frame de staat voordat het werd daadwerkelijk begonnen. Dit is vaak nodig bij het maken van animatie-effecten met meerdere animaties die starten op verschillende tijdstippen offsets.

 var anim = new Y.Animate ({
     knooppunt: Y.one ('# knop'),
     uit: {R: 30, 'fill-dekking': 0, color: 'Crimson'},
     aan: {R: 80, 'fill-dekking': 1, color: 'goud'},
     duur: 0,25
 });

 / / De volgende zal de gewenste staat op het doelobject voorafgaand aan de
 / / Eigenlijk het starten van de animatie.
 anim.applyStartFrame ();
 anim.run (2);

De foto shuffle demo maakt gebruik van animatie compensatie voor het effect dat de stapel foto's verspreidt of zet de foto's terug in een stapel.

Conclusie

Werken met SVG en YUI, en in het bijzonder YUI 3, was een zeer plezierige ervaring: veel van de YUI functionaliteit geldt voor SVG direct uit de doos en uitbreidbare architectuur YUI maakte het mogelijk om te werken rond occasionele problemen en de gewenste functionaliteit toe te voegen .

Natuurlijk, meer standaard ondersteuning voor SVG in YUI zou nuttig zijn, in het bijzonder het maken van YUI werken met stand-alone SVG documenten en het maken van de Node class wrap SVG-elementen zonder oplossingen.

Er zijn ook een aantal verbeteringen die zou nuttig zijn. Bijvoorbeeld, kan het helpen als animaties kunnen richten op meerdere elementen. Ook ondersteuning van meerdere waarden (zoals in <animate> zou SVG element bijvoorbeeld) nuttig meer geavanceerde effecten.

De demo's op de svg-wow.org zijn geschreven voor YUI 3.1 en overgezet naar 3.2 voor de toepassing van deze blog. In 3.2, overgangen werden geïntroduceerd die gebruik maken van inheemse CSS overgangen indien beschikbaar in de browser. Het kan mogelijk zijn dat de YUI animatie motor op dezelfde wijze te benutten SMIL animatie indien beschikbaar (Opera, Firefox en WebKit op het moment van dit schrijven), dat moet ook opleveren prestatieverbeteringen.

De SVG-extensies op de svg-wow.org website zijn beschikbaar als een YUI 3 Galerij module voor diegenen die willen het plezier van het werken met YUI en SVG te genieten.

Referenties

SVG Wow!
SVG-specificatie
SVG Tutorial
Adobe SVG Zone (een beetje gedateerd, maar heeft nog steeds goede voorbeelden)
carto.net voorbeelden
KevLinDev

Delen en uit te breiden: Bookmark met del.icio.us | Digg it! | reddit!

2 Commentaren

SVG Wow inderdaad!
Grote schrijven, voorbeelden, en de code beschikbaar is voor gebruik ... heel cool!
Bedankt.
Reactie door Dylan Oudyk - 19 oktober 2010 #
Leuk bericht en interessant artikel ....
_________
Helen.
Reactie door Builders Manchester - 19 juni 2011 #

Sorry, het reactieformulier op dit moment gesloten.

Yahoo! User Interface Blog (YUIBlog)