Dans le YUI 3 Galerie: Extensions pour SVG, SVG Créé pour Wow! »Yahoo! Blog de l'interface utilisateur (YUIBlog)

Dans le YUI 3 Galerie: Extensions pour SVG, SVG Créé pour Wow!

18 octobre 2010 à 11:18 par Vincent Hardy | Dans le développement , YUI 3 Galerie | 1 Commentaire

Introduction

SVG ( Scalable Vector Graphics ) fournit une syntaxe déclarative pour interactifs, animés 2D graphiques: formes, des images et du texte. le support de SVG est partie de l' HTML 5 et les spécifications SVG est mis en œuvre par tous les principaux navigateurs, y compris Microsoft Internet Explorer en version 9 .

Le svg-wow.org site Web présente ce qu'on peut faire avec SVG aujourd'hui. Les démos sur ce site web ont été créés pour le SVG Open conférence, où l'SVG Wow! sessions ont été une tradition depuis plusieurs années. Le SVG Wow! sessions ont été ouvertes par Dean Jackson, puis en collaboration avec moi-même et ensuite poursuivie par Erik Dahlstrom . Erik et moi avons collorated sur la session pour les 2009 et 2010 éditions de la conférence.

Pour les deux dernières années, les démos ont de plus en plus utilisé des cadres AJAX, l'application de ses fonctions afin de SVG au lieu de (ou en plus) HTML. YUI est le cadre le plus largement utilisé sur le site web, qui utilise à la fois YUI 2 et YUI 3 .

Je vais commencer par un aperçu rapide et SVG alors discuter du type de démos que YUI pris en charge et les extensions que j'ai ajouté à la YUI 3 Galerie de le faire fonctionner avec SVG. (Ces extensions sont désormais libres d'utiliser selon les termes de la licence BSD YUI .)

aperçu SVG

Comme HTML, SVG est une spécification du W3C. Il fournit une syntaxe de description des formes de base (rectangles, cercles, lignes, polygones, ellipses, polylignes), des formes arbitraires (décrites en termes de segments de chemin qui peuvent être des lignes, quadratique ou cubique courbes de Bézier), texte et images.

L'image suivante est une capture d'écran de l' exemple alternate stylesheet sur svg-wow.org et montre quelques fonctionnalités SVG en jeu: le rendu riche (effets d'ombre, dégradés, des motifs) et des formes simples et complexes.

Parce que les images SVG sont définis en termes de géométrie et les attributs de rendu, il est possible de les rendre à n'importe quelle résolution. En conséquence, les images SVG peut être adapté à n'importe quelle taille tout en conservant une haute qualité de rendu, par exemple lors de l'impression (pas de bords plus irréguliers).

Ce qui suit zoom-in vue montre l'image SVG même montré plus tôt, mais rendu à une résolution supérieure tout en préservant la qualité.

Tout comme HTML, SVG l'interactivité: il est possible d'ajouter des écouteurs d'événements sur des objets graphiques pour les interactions de la souris ou le clavier. Bien sûr, SVG supporte le Document Object Model, qui le rend facile à manipuler les différentes propriétés des objets graphiques, tels que leur géométrie ou le style de rendu.

Il ya beaucoup à la spécification SVG: styles de rendu avancé (caresses, de remplissage, motifs, dégradés), des effets de filtre (flou, ombres, des matrices de couleur), feuilles de style CSS, fonctions avancées du texte (tel que le texte sur un chemin d'accès) et de l'animation déclarative . Vous pouvez vérifier les références à la fin de ce post pour en savoir plus sur les fonctionnalités format SVG.

SVG et HTML

Avec HTML 5 , SVG peuvent être enligne dans les documents HTML, sans plus tarder. Navigateurs commencent à en charge cette fonctionnalité (par exemple, Firefox 4 ). Pour le moment, tous les principaux navigateurs supportent SVG inline en XHTML, qui fournit les mêmes fonctionnalités. SVG dans XHTML exige simplement que les espaces de noms sont correctement déclarés.

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

         <Xmlns svg = "http://www.w3.org/2000/svg" version = "1.1"
          xmlns: xlink = "http://www.w3.org/1999/xlink"
          width = "100%" height = "100%" id = "backgroundSVG">
             <! - Contenu svg ici ->
         </ Svg>
     </ Body>
 </ Html>

Tous les exemples de code sur cette page utiliser cette façon de inlining SVG dans XHTML.

SVG et YUI

SVG gère l'animation déclarative. Par exemple, vous pouvez animer le rayon d'un <circle> élément comme ceci:

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

Le <animate> tag est emprunté à la SMIL cahier des charges et, avec les autres éléments d'animation, il offre une animation très puissant moteur de SVG.

Malheureusement, jusqu'à tout récemment, en charge des navigateurs pour l'animation SVG était clairsemée. Il s'est amélioré au cours des deux dernières années, mais Microsoft a clairement fait savoir qu'il ne supporte pas d'animation de SVG dans IE 9 déclarative.

En conséquence, la plupart des démos sur l'utilisation du site web svg-wow.org script d'animation au lieu d'animations déclarative. D'une part, ce qui est regrettable car les animations déclaratifs sont plus efficaces que les animations scriptées. A la hausse, des animations scriptées peuvent être très flexibles, et ils travaillent à travers les implémentations très bien.

La nécessité d'une solution d'animation scriptée est bonne ce qui a conduit l'utilisation de YUI sur le svg-wow démos. Cependant, les démos aussi utiliser d'autres fonctions YUI, en particulier le Loader et Node modules.

Animation SVG avec YUI

Les démos sur svg-wow utiliser YUI pour créer élastique battements de tambour , morphing des formes ou de texte de rotation et de formes , par exemple. Utilisation de YUI avec SVG nécessaire quelques extensions YUI, je vais décrire en quelques instants.


rotation du texte et les formes	morphing formes

élastiques battements de tambour

Le tableau suivant illustre la façon dont YUI est très pratique pour tout simplement animer et de manipuler des graphiques SVG.

Animer le SVG `transform` attribut

Tous les éléments graphiques SVG une transform attribut. Cet attribut spécifie une 2D transformation affine sur les éléments, qui peuvent être utilisés à l'échelle, incliner, pivoter ou traduire.

Le-wow.org YUI extensions svg pour SVG permet l'animation de la transform l'attribut comme ceci:

 var anim = new Y. Animate ({
     noeud: '# circleA,
     à partir de: {
         {Sy 2,:: tx:: 0, ty: 0, sx 2} transformer
     },
     à: {
         transformer: {sx 20,:: tx: 20, ty 1, sy: 1}
     },
     transformTemplate: "translate (# tx, ty #) échelle (# sx, sy #)",
     durée: 1
 });

Voir le transformer animations tests.

Vous remarquerez que les valeurs de transformation sont définis en termes de «composants» (tels que tx ou ty ), qui sont combinés pour former une valeur en utilisant la transformTemplate trouvé sur l'objet de configuration d'animation.

Le modèle est un mécanisme souple pour la construction de transformer les valeurs en éléments séparés rendent facile à calculer les valeurs d'animation. Ceci est un exemple où le modèle d'animation YUI a permis une plus grande flexibilité (et expressif plus de puissance) que l'élément d'animation SMIL SVG ( animateTransform ). Afin de créer l'animation ci-dessus, la déclaration SMIL équivalent aurait été:

 ...> <circle
     <AttributeName animateTransform = "transformer" type = "translate"
                       from = "0,0" à = "20,20" dur = "1" begin = "scaleAnim.begin" />
     <AnimateTransform id = "scaleAnim" attributeName = "transformer" type = "échelle"
                       from = "2,2" à = "1,1" dur = "1" begin = "indefinite" />
 <Cercle />

Notez comment l'extrait ci-dessus nécessite plusieurs animateTransform éléments qui doivent être synchronisés: le begin d'attribut de la première animation est fixé à scaleAnim.begin pour synchroniser le début des deux animations. Une fonctionnalité intéressante du moteur d'animation YUI est que le moment d'une animation (par exemple, début, fin et durée) peuvent être partagées à appliquer à plusieurs propriétés de l'élément.

L'extension de YUI pour animer transforme SVG est largement utilisé, comme dans la caméra et d'animation lyrics exemples. Le premier utilise une extension de YUI 3 tandis que le second utilise une extension de YUI 2.

Animer la géométrie

Géométrie de base

Animer la géométrie SVG avec YUI est assez simple. L'exemple suivant anime un <rect> de largeur de l'élément, la hauteur et des rayons d'angle:

 var anim = new Y. Animate ({
     noeud: '# recta »,
     à partir de: {
         largeur: 200,
         hauteur: 100,
         rx: 5,
         RY: 5
     },
     à: {
         largeur: 300,
         hauteur: 100,
         rx: 10,
         RY: 10;
     },
     durée: 2,
     easing: Y.Easing.elasticOut
 });

Voir les animations de forme tests.

Comme nous l'avons par la suite, quelques modifications sous le capot YUI fait ce travail. Mais du point de vue du développeur, cette animation fonctionne exactement la même manière que l'animation de tout autre attribut HTML ou propriété CSS.

Le `<path>` 's `d` attribut

Un attribut géométrie est un peu particulière: la d attribut sur l' <path> élément. Le <path> élément est utilisé pour la géométrie complexe arbitraire. Un <path> peut décrire n'importe quelle forme. Son d attribut décrit sa géométrie en termes de segments de chemin qui peuvent être des lignes, arcs, quadratique ou cubique courbes de Bézier (il ya plus de quelques commandes, mais ils ont tous la carte en courbes de Bézier).

Animer le d attribut aussi besoin d'un peu d'extension à l'animation du moteur YUI, mais avec cette extension, le d attribut peut être animé comme les autres, comme le montre ci-dessous.

 var anim = new Y. Animate ({
     noeud: "# patha",
     à partir de: {d: "M 0 0 50 0 C 100 50 100 100 C 50 100 0 50 0 0 Z"},
     à: {d: "M 0 0 C 100 0 100 0 100 100 0 100 0 C 100 0 0 Z"},
     1s durée,
     easing: Y.Easing.bounceBack
 });

Voir les animations chemins tests, ce qui montre, entre autres, une coche se transformer en une croix au fil du temps, comme représenté sur les images suivantes.

Le Gandhi cite démo utilise cette technique d'animation de la d attribut de se transformer en des formes de la figure de Gandhi.

Animation SVG d'autres attributs

Bien sûr, les animations YUI ne sont pas limités à des attributs de la géométrie. N'importe quel attribut SVG peuvent être animés. Par exemple, l'animation suivante anime le rayon de flou sur un filtre de flou horizontal.

 / Snippet SVG /
 <Filtre ..
     feGaussianBlur <id = "BlurFilter" stdDeviation = "10 10" ...  />
 </ Filter>

 / / Animation JavaScript
 var anim = new Y. Animate ({
     noeud: '# BlurFilter,
     à partir de: {stdDeviation: [0, 20]},
     à: {stdDeviation: [0, 0]}
 });

Voir le filtre animations tests. L'image suivante montre comment animer un flou gaussien peut être utilisé pour la transition entre les états de bouton.

Ce type d'effet est utilisé dans le rapide effet de flou démo, même si cette démo ne pas utiliser d'animation YUI mais déclarative les éléments d'animation SMIL (au détriment de la seule course dans les navigateurs supportant cette fonction, comme expliqué précédemment).

Animer les propriétés CSS

Comme HTML, SVG éléments ont des attributs et des propriétés CSS. SVG a des propriétés CSS spécifiques . Ces propriétés peuvent être animés, parfois à créer des effets surprenants. Par exemple, la stroke-dashoffset propriété peut être utilisée pour simuler une forme de dessin.

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

 / / JavaScript
 var anim = new Y. Animate ({
     noeud: "# recta",
     à: {'stroke-dashoffset ": 0},
     durée: 0,25
 });

Voir la course animations tests.

Les graffitis démo utilise cette technique (même si sans animation YUI) et fait l' appareil de démonstration (cette fois avec animation YUI).

YUI et SVG: Sous le capot

Le site web svg-wow.org utilise à la fois YUI YUI 2 et 3 et a des extensions SVG spécifiques pour les deux. La section suivante du présent article se concentre sur les 3 YUI extensions.

Des prolongations ont été nécessaires pour:

rendre le travail YUI avec des spécificités DOM de SVG
tenir compte des différences de mise en œuvre
ajouter le support de nouveaux types d'attributs tels que SVG transforme
ajouter minutage de l'animation et de caractéristiques supplémentaires de synchronisation

Comptabilisation des DOM SVG Spécificités

Comme indiqué précédemment, les attributs SVG peuvent être animés avec des éléments déclaratifs "tels que <animate> . Afin de soutenir l'animation modèle SVG, SVG valeurs d'attribut tenir à la fois une animation et une valeur de base. Par exemple, le r attribut sur un <circle> élément est un SVGAnimatedLength définis comme suit:

 interface SVGAnimatedLength {
   readonly attribute SVGLength baseVal;
   readonly attribute SVGLength animVal;
 };

Par conséquent, même dans les implémentations qui ne supportent pas l'animation déclarative, nous avons besoin pour atteindre le bas de la baseVal de lire la valeur d'un attribut:

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

Des prolongations ont été nécessaires pour permettre au moteur d'animation pour tenir compte de modéliser les attributs SVG "valeur inhabituelle. Heureusement, YUI 3 a une notion de comportements d'animation. Les comportements sont essentiellement les attributs spécifiques crochets, et il était assez facile d'ajouter le support SVG pour gérer les valeurs d'attribut. Par exemple, SVGAnimatedLength attributs sont traitées comme suit:

 lengthBehavior var = {
     ensemble: function (anim, att, de, à, écoulé, la durée, le plaisir) {
         / / SVG traitement spécifique
     },

     obtenir: function (anim, attr) {
         / / SVG traitement spécifique
     }
 };

 Attribut / / sr poignée <cercle> '
 Y.Animate.behaviors.r = lengthBehavior;

Il existe plusieurs extensions pour SVG autres valeurs des attributs tels que la transform d'attributs, les valeurs des attributs de couleur (comme fill , stroke ou stop-color ) et des attributs tels que stdDeviation mentionné plus tôt.

Un peu de bricolage similaires ont été requis, par exemple dans le Y.Node.prototype.toString méthode, encore une fois pour tenir compte de SVG baseVal (cette fois sur le className propriété noeud). Un autre exemple est le compositeur de noeud par défaut dans le Node module.

Explication de la différence navigateur

Bien que les extensions précédentes sont nécessaires en raison des différences de spécifications entre HTML et SVG, les éléments suivants sont nécessaires en raison des variations de mise en œuvre entre les navigateurs.

SVG est une catégorie spéciale d'attributs appelés attributs de présentation . Dans les implémentations soutient également un style CSS (qui l'appui de tous les navigateurs), ces attributs de présentation sont vraiment juste une autre façon de spécifier une propriété CSS avec une faible spécificité . De la spécification SVG:

Les attributs de présentation va donc participer à la cascade CSS2 comme si elles étaient remplacées par des règles de style CSS correspondant placé au début de la feuille de style de l'auteur avec une spécificité de zéro. En général, cela signifie que les attributs de présentation ont moins prioritaire que d'autres règles de style CSS spécifiées dans les feuilles de style de l'auteur ou de 'style' attributs.

Malheureusement, certains navigateurs ne prennent pas en œuvre la spécification correcte et window.getComputedStyle ne pas toujours tenir compte de toutes les sources possibles pour le réglage du SVG propriétés CSS: les sélecteurs CSS, attribut de style et attributs de présentation.

YUI est arrivé à la merci de sauvetage à l' Node module qui pourrait être étendu à masquer ces différences navigateur. Le Y.DOM.CUSTOM_STYLES et le Y.Node.prototype.getComputedStyle pourrait être étendu à offrir d'une manière uniforme à lire SVG propriétés de style.

L'extension `Y.DOM`

YUI enveloppe tout accès DOM à travers le Node d'interface. Par conséquent, certaines méthodes spécifiques DOM de SVG, comme getBBox (utilisé pour calculer les limites d'un élément SVG), ne sont pas accessibles sur l'objet enveloppé.

Pour rendre les choses plus faciles à programmer pour SVG, les extensions du Y. DOM module par défaut (qui Node utilise) ont été ajoutés au exposer SVG fonctionnalités DOM ou ajouter des méthodes pratiques, souvent nécessaires lors de la manipulation de contenu:

firstElement/lastElement/prevElement/nextElement/removeAllChildren (non spécifiques SVG)
getMatrix/setMatrix . Fournit un moyen facile de manipuler des transformations sur les éléments SVG, quelque chose de particulièrement difficile avec les standards DOM SVG
getBBox/getViewportBBox fournir des moyens simples d'accéder à la boîte englobante de l'élément de coordonner le système ou dans l'espace de visualisation.

loadContent . Un utilitaire pour insérer un fragment DOM décrit en utilisant un objet JavaScript littérale. Par exemple:

 myNode.loadContent ({
     tag: «g»,
     remplir: «rouge»,
     AVC: 'none',
     enfants: [{
         tag: "rect",
         x: 10,
         y: 10,
         largeur: 200,
         hauteur: 300
     }, {
         tag: "cercle",
         r: 10,
         cx: 105,
         CY: 155
     }, {
         tag: "image",
         "Xlink: href ':' images / photo.png,
         largeur: 200,
         hauteur: '300px '
     }, PrevSibling);

est un raccourci permettant d'effectuer divers appels DOM (comme createElementNS , setAttributeNS et appendChild ) pour créer un g élément et de ses enfants et de l'insérer avant prevSibling sous myNode . Les offres de services publics avec les espaces de noms pour les attributs et les éléments.

Ajouts au moteur d'animation pour la synchronisation et la synchronisation

Beaucoup, sinon la plupart des effets d'animation impliquant besoin de plusieurs instances d'animation chorégraphié. En règle générale, plusieurs animations sont nécessaires pour créer un effet désiré, et le début ou la fin d'animations dépendent les uns des autres, parfois avec un décalage temporel: animations doivent être synchronisés.

Par exemple, si vous avez un ensemble de formes qui doivent disparaître l'un après l'autre, vous aurez besoin pour créer un fondu d'animation pour chaque élément de la chaîne, puis l'heure de début avec un léger décalage.

 var = Y.all enchaînés ('# cercle enchaîné »),
     firstAnim, previousAnim;

 chained.each (function (cercle) {
     var anim = new Y. Animate ({
         noeud: cercle,
         à partir de: {'fill': 'blanc'},
         à: {«remplir»: «grise»},
         durée: 0,25
     });
     if (previousAnim! == undefined) {
         / / Synchrnoize le début de l'ANIM à 0,15 secondes après le début
         / / De l'animation du cercle précédent (previousAnim).
         previousAnim.onBegin (anim, 0,15);
     } Else {
         firstAnim = anim;
     }
     previousAnim = anim;
 });

 / / Démarre le 1s première animation après un clic sur l'un des cercles.
 / / Notez que ceci est une extension de la méthode d'exécution par défaut YUI qui ne
 / / Prendre un temps de décalage.
 chained.on ('clic', function () {
     firstAnim.run (1);
 });

Voir les décalages temporels tests.

La méthode onBegin , il est facile de synchroniser le démarrage de deux animations, avec un temps de décalage optionnel. En fait, onBegin pouvez également appeler une fonction avec un décalage temporel. De même, le onEnd extension, il est facile de se synchroniser avec la fin d'une animation.

Par défaut, les animations ont YUI événements qui constituent un moyen de synchroniser. Le onBegin et onEnd méthodes exprimer la synchronisation de manière plus concise (un exemple similaire de concision est indiqué ci-dessous).

En outre, il est parfois nécessaire de synchroniser une animation avec un événement, encore une fois avec un décalage temporel. Le beginOn et endOn extensions nous permettent d'exprimer cela. Par exemple:

 anim.beginOn (Y.one ("# bouton '),' clic ', 0,5);

va commencer l'animation 0.5s après l'élément avec le bouton '' id a été cliquée. Il s'agit d'un raccourci pour:

 Y.one ("# bouton '). Sur (' clic ', function () {
     fonction setTimeout (500 / * ms * /, () {anim.run ();});
 });

Une dernière extension faite à la classe d'animation a été la capacité de faire un objet d'animation appliquer l'état de sa première image avant qu'il ne soit effectivement commencé. Cela est souvent nécessaire lors de la création des effets d'animation impliquant de multiples animations qui commencent à décalages temporels différents.

 var anim = new Y. Animate ({
     noeud: Y.one ("# bouton '),
     à partir de: {r: 30, 'fill-opacity': 0, la couleur: «pourpre»},
     à: {r: 80, 'fill-opacity': 1, couleur: «or»},
     durée: 0,25
 });

 / / Ce qui suit va définir l'état désiré sur l'objet cible avant
 / / Fait de commencer l'animation.
 anim.applyStartFrame ();
 anim.run (2);

Le shuffle image démo utilise les compensations d'animation pour l'effet qui se propage dans la pile d'images ou met les photos en arrière dans une pile.

Conclusion

Travailler avec SVG et YUI, et en particulier YUI 3, a été une expérience très agréable: un grand nombre de fonctionnalités YUI s'applique à des droit SVG de la boîte et de l'architecture extensible de YUI a permis de contourner des problèmes occasionnels et d'ajouter des fonctionnalités souhaitées .

Bien sûr, un soutien accru pour les normes SVG dans YUI serait utile, en particulier les travaux YUI faire avec SVG autonome documents et de faire le Node envelopper SVG éléments de la classe, sans solutions de contournement.

Il ya aussi quelques améliorations qui pourraient être utiles. Par exemple, il serait utile que des animations pourraient cibler de multiples éléments. De même, l'appui des valeurs multiples (comme dans le <animate> élément SVG par exemple) serait utile pour créer des effets sophistiqués plus.

Les démos sur svg-wow.org ont été écrites pour YUI 3.1 et porté à 3,2 pour le but de ce blog. En 3.2, les transitions ont été introduites qui font usage de maternelle transitions CSS si elles sont disponibles dans le navigateur. Il pourrait être possible pour le moteur d'animation YUI à faire de même animation SMIL levier lorsqu'elles sont disponibles (Opera, Firefox et WebKit au moment d'écrire ces lignes) qui devrait également conduire à des améliorations de performance.

Les extensions SVG sur le site web wow.org-svg sont disponibles en tant que YUI module 3 Galerie pour ceux qui veulent profiter du plaisir de travailler avec YUI et SVG.

Références

SVG Wow!
SVG Spécification
SVG Tutoriel
Adobe SVG Zone (un peu daté, mais il a encore de bons exemples)
exemples carto.net
KevLinDev

Partager et prolonger: Ajouter aux Favoris del.icio.us | Digg it! | reddit!

1 Commentaire »

Flux RSS pour les commentaires sur ce post.

SVG Wow en effet!
Grande écrire, des exemples et le code est disponible pour une utilisation ... très cool!
Merci.
Commentaire de Oudyk Dylan - 19 Octobre 2010 #

Laissez un commentaire

Propulsé par WordPress sur Yahoo! Web Hosting .

Interface utilisateur Blog Yahoo! (YUIBlog)