En el YUI 3 Galería: Extensiones para SVG, SVG Creado para Wow! »Yahoo! interfaz de usuario de blog (YUIBlog)

En el YUI 3 Galería: Extensiones para SVG, SVG Creado para Wow!

18 de octubre 2010 a las 11:18 am por Vincent Hardy | En Desarrollo , YUI 3 Galería | 2 Comentarios

Introducción

SVG ( Scalable Vector Graphics ) proporciona una sintaxis declarativa para gráficos interactivos, animación 2D: formas, imágenes y texto. SVG es parte de la HTML 5 y la especificación SVG es implementado por todos los principales navegadores, incluido Internet Explorer de Microsoft en la versión 9 .

El svg-wow.org muestra el sitio web que se puede hacer con SVG en la actualidad. Las demos en este sitio web fueron creados para el SVG Open de conferencias, donde el SVG Wow! sesiones han sido una tradición desde hace varios años. El SVG Wow! sesiones iniciadas por Dean Jackson, a continuación, en colaboración con el mismo y luego continuada por Erik Dahlstrom . Erik y yo hemos collorated en la sesión para el 2009 y 2010 las ediciones de la conferencia.

Durante los últimos dos años, el demos se utiliza cada vez más los marcos de AJAX, la aplicación de sus funciones para SVG en lugar de (o además) de HTML. YUI es el marco más utilizado en el sitio web, que utiliza tanto YUI 2 y 3 YUI .

Voy a empezar con una visión SVG rápida y luego discutir el tipo de demostraciones que YUI apoyo y las extensiones que he añadido a la YUI 3 Galería de hacer que funcione con SVG. (Estas extensiones son ahora libres para su uso bajo los términos de la licencia BSD de YUI .)

SVG visión

Al igual que HTML, SVG es una especificación W3C. Se proporciona una sintaxis para describir las formas básicas (rectángulos, círculos, líneas, polígonos, elipses, polilíneas), formas arbitrarias (que se describe en términos de segmentos de trazado que puede ser líneas, curvas cuadráticas o cúbicas Bézier), texto e imágenes.

La siguiente imagen es una captura de pantalla del ejemplo de estilos alternativos en svg-wow.org y muestra algunas características de SVG en juego: la representación ricos (los efectos de sombra, gradientes, patrones) y las formas simples y complejas.

Como las imágenes SVG se definen en términos de geometría y los atributos de representación, es posible que los conviertan en cualquier resolución. Como resultado, las imágenes SVG se pueden ampliar a cualquier tamaño sin perder la calidad de representación alta, por ejemplo cuando se imprime (sin bordes más irregulares).

Los siguientes zoom en la imagen muestra la misma imagen SVG se mostró anteriormente, pero se extraigan a una mayor resolución, preservando la alta calidad.

Al igual que HTML, SVG compatible con la interactividad: es posible añadir detectores de eventos de objetos gráficos para el ratón o el teclado interacciones. Por supuesto, soporta SVG Document Object Model, lo que hace que sea fácil de manipular las distintas propiedades de los objetos gráficos, como su geometría o estilo de representación.

Hay mucho a la especificación SVG: estilos avanzados de renderizado (caricias, de relleno, patrones, gradientes), efectos de filtro (manchas, sombras, las matrices de color), de estilo CSS, características avanzadas de texto (como texto en un trazado) y la animación declarativa . Usted puede consultar las referencias al final de este mensaje para obtener más información acerca de las características de formato SVG.

SVG y HTML

Con HTML5 , SVG puede ser entre líneas en los documentos HTML sin más trámite. Navegadores están empezando a apoyar esa característica (por ejemplo, Firefox 4 ). Por el momento, todos los principales navegadores de apoyo SVG inline en XHTML, que proporciona la misma funcionalidad. SVG en XHTML sólo requiere que los espacios de nombres están correctamente declarados.

 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         ....
     </ Head>
     <body>
         <h1> línea 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">
             <-! Contenido svg aquí ->
         </ Svg>
     </ Body>
 </ Html>

Todos los ejemplos de código en esta página usar este medio de procesos en línea SVG en XHTML.

SVG y YUI

SVG soporta animación declarativa. Por ejemplo, puede animar el radio de un <circle> elemento de esta manera:

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

El <animate> etiqueta es tomado de la SMIL especificación y, junto con los elementos de animación de otro modo, proporciona un motor de animación muy poderoso para SVG.

Por desgracia, hasta hace poco, el apoyo del navegador para la animación SVG era escasa. Se ha mejorado en los últimos dos años, pero Microsoft ha dejado claro que no apoyará la animación SVG declarativa de IE 9.

Como resultado, la mayoría de los demos en la página web svg-wow.org utilizar la animación con guión en lugar de animaciones declarativa. Por un lado, esto es lamentable, porque animaciones declarativas son más eficientes que las animaciones mediante scripts. En el lado positivo, animaciones mediante scripts pueden ser muy flexibles, y trabajan a través de implementaciones muy bien.

La necesidad de una solución buena animación mediante scripts es lo que impulsó el uso de YUI en el svg-wow demos. Sin embargo, las demostraciones también utilizar otras funciones de YUI, en particular, el cargador y el Nodo de módulos.

Animación SVG con YUI

Las demos en svg-wow utilizar YUI para crear ritmos de batería elástica , morphing formas o texto de rotación y las formas , por ejemplo. Utilizando YUI con SVG requiere unos pocos extensiones de YUI, voy a describir estos en un momento.


texto de rotación y las formas	formas morphing

elástica tambor late

El siguiente ejemplo ilustra cómo YUI viene muy bien para animar simple y manipular gráficos SVG.

La animación de la SVG `transform` atributo

Todos los elementos gráficos SVG tiene una transform los atributos. Que especifica una 2D transformación afín en los elementos, que puede ser usado para escalar, sesgar, rotar o traducir.

Las extensiones de SVG-wow.org YUI de SVG permite la animación de la transform atributos de esta manera:

 var anim = new Y. Anime ({
     nodo: '# circleA,
     a partir de: {
         transform: {tx: 0, ty: 0, sx 2, sy: 2}
     },
     a: {
         transform: {tx: 20, ty: 20, sx: 1, sy: 1}
     },
     transformTemplate: "traducir (# tx, ty #) escala (# sx, sy #)",
     duración: 1
 });

Ver la transformación de animaciones pruebas.

Usted notará que los valores de transformación se define en términos de "componentes" (por ejemplo, tx o ty ) que se combinan para formar un valor de uso de la transformTemplate encuentra en el objeto de configuración de la animación.

La plantilla es un mecanismo flexible para la construcción de transformar los valores, mientras que los componentes por separado que sea fácil de calcular los valores de animación. Este es un ejemplo en el modelo de animación YUI permite una mayor flexibilidad (y más poder expresivo) que el elemento de animación SVG SMIL ( animateTransform ). Con el fin de crear la animación se ha descrito anteriormente, la declaración de SMIL equivalente habría sido:

 <circle ...>
     <AnimateTransform attributeName = "transformar" type = "traducir"
                       from = "0,0" a = "20,20" durante = "1" comienza = "scaleAnim.begin" />
     <AnimateTransform id = "scaleAnim" attributeName = "transformar" type = "escala"
                       from = "2,2" a = "1" comienza = "1,1" durante = "indefinida" />
 </ Círculo>

Observe cómo el código anterior requiere múltiples animateTransform elementos que tienen que ser sincronizados: el begin atributo de la primera animación está en scaleAnim.begin para sincronizar el inicio de las dos animaciones. Una buena característica del motor de animación de YUI es que el momento de la animación (es decir, de inicio, fin y duración) se pueden compartir a aplicar a las propiedades de elementos múltiples.

La extensión de YUI para animar transformaciones SVG se utiliza ampliamente, como en la cámara y canciones de animación ejemplos. El primero utiliza una extensión de YUI 3 y la segunda utiliza una extensión de YUI 2.

Animación de la geometría

La geometría básica

Animación de la geometría SVG con YUI es bastante simple. El siguiente ejemplo se anima un <rect> radios elemento de anchura, altura y ángulo:

 var anim = new Y. Anime ({
     nodo: '# recta,
     a partir de: {
         Ancho: 200,
         altura: 100,
         rx: 5,
         ry: 5
     },
     a: {
         Ancho: 300,
         altura: 100,
         rx: 10,
         RY: 10;
     },
     Duración: 2,
     easing: Y.Easing.elasticOut
 });

Ver la forma de animaciones pruebas.

Como se analiza más adelante, algunos cambios bajo el capó YUI hecho este trabajo. Pero desde la perspectiva de un desarrollador, este trabajo de animación de la misma forma como la animación de cualquier otro atributo HTML o propiedades CSS.

El `<path>` 's `d` atributo

Uno de los atributos de geometría es un poco especial: el d atributo en el <path> elemento. El <path> elemento se utiliza para la geometría y de arbitrariedad compleja. A <path> puede describir cualquier forma. Su d atributo describe su geometría en términos de segmentos de ruta que puede ser líneas, arcos, cuadrática o cúbica curvas de Bezier (hay unos cuantos comandos más, pero todos los mapas de curvas de Bézier).

La animación de la d atributo también se requiere un poco de la extensión de motor de animación de YUI, pero con esa extensión, el d atributo puede ser animada como cualquier otro, como se muestra a continuación.

 var anim = new Y. Anime ({
     nodo: "# Patha",
     a partir de: {d: "M 0 0 50 0 C 100 50 100 100 C 50 100 0 50 0 0 Z"},
     a: {d: "M 0 0 C 100 0 100 0 100 100 C 0 100 0 100 0 0 Z"},
     duración de 1 segundo,
     easing: Y.Easing.bounceBack
 });

Vea la animación caminos pruebas, lo que demuestra, entre otras cosas, una marca de verificación transformándose en una cruz con el tiempo, como se representa en las siguientes imágenes.

La cita de Gandhi demostración se utiliza esta técnica de animación de la d atribuyen a las formas se transforman en la figura de Gandhi.

Animación de otros atributos de SVG

Por supuesto, las animaciones YUI no se limitan a los atributos de la geometría. Cualquier atributo SVG pueden ser animados. Por ejemplo, la siguiente animación anima la falta de definición en el radio de un filtro de desenfoque horizontal.

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

 / / JavaScript animación
 var anim = new Y. Anime ({
     nodo: '# BlurFilter,
     a partir de: {stdDeviation: [0, 20]},
     a: {stdDeviation: [0, 0]}
 });

Vea la animación de filtro pruebas. La siguiente imagen muestra cómo animar a un desenfoque gaussiano se puede utilizar para la transición entre estados de un botón.

Este tipo de efecto se utiliza en el desenfoque rápido efecto de demostración, a pesar de que la demo no utilizar la animación declarativa, pero YUI elementos de animación SMIL (a costa de tan sólo se ejecutan en navegadores que soporten esta característica, como se explicó anteriormente).

Animación de las propiedades CSS

Al igual que HTML, los elementos SVG tienen atributos y propiedades CSS. SVG tiene algunas propiedades específicas de CSS . Estas propiedades pueden ser animados, a veces para crear efectos sorprendentes. Por ejemplo, el stroke-dashoffset propiedad se puede utilizar para simular dibujar una forma.

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

 / / JavaScript
 var anim = new Y. Anime ({
     nodo: "# recta",
     a: {"stroke-dashoffset ': 0},
     Duración: 0,25
 });

Vea la animación golpe pruebas.

Los graffitis demostración se utiliza esta técnica (aunque sin YUI animación) y también lo hace la cámara demo (esta vez con YUI animación).

YUI y SVG: Bajo el capó

El sitio web svg-wow.org utiliza tanto YUI 2 y 3 y YUI ha SVG extensiones específicas para los dos. En la siguiente sección de este artículo se centra en la YUI 3 extensiones.

Extensiones eran necesarias para:

hacer que el trabajo YUI con especificidades de SVG DOM
cuenta de las diferencias de implementación
añadir soporte para los tipos de atributos, tales como transformaciones SVG
añadir el tiempo de animación adicional y características de sincronización

Contabilización de las especificidades SVG DOM

Como se describió anteriormente, los atributos de SVG pueden ser animados con elementos declarativos como <animate> . Para apoyar el modelo de SVG animación, los valores de SVG atributo mantener tanto una animación y un valor base. Por ejemplo, el r atributo de una <circle> elemento es una SVGAnimatedLength define como sigue:

 interfaz SVGAnimatedLength {
   sólo lectura atributo SVGLength baseVal;
   sólo lectura atributo animVal SVGLength;
 };

Como resultado, incluso en las implementaciones que no admiten la animación declarativa, tenemos que llegar hasta el baseVal para leer el valor de un atributo:

 círculo var = document.getElementById ('# myCircle');
 var = valor-circle.getAttribute ('r') baseVal.value.;

Extensiones eran necesarias para permitir que el motor de animación a la cuenta para el modelo de los atributos de SVG "valor inusual. Afortunadamente, YUI 3 tiene un concepto de comportamientos de animación. Los comportamientos son esencialmente atributos específicos de los ganchos, y era bastante fácil de añadir soporte para manejar los valores de SVG atributo. Por ejemplo, SVGAnimatedLength atributos se manejan de esta manera:

 var lengthBehavior = {
     conjunto: function (anim, att, de, para, transcurrido, la duración, la diversión) {
         / / Manejo específico SVG
     },

     obtener: function (anim, attr) {
         / / Manejo específico SVG
     }
 };

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

Hay más extensiones para otros valores de los atributos de SVG como la transform atributos, valores de color atributo (por ejemplo, fill , stroke o stop-color ) y atributos como stdDeviation se mencionó anteriormente.

A pocos ajustes similares se requiere, por ejemplo en el Y.Node.prototype.toString método, una vez más para dar cuenta de SVG baseVal (esta vez en el className propiedad del nodo). Otro ejemplo es la incubadora de nodo predeterminado en el Node del módulo.

Considerar las diferencias de navegador

Mientras que las extensiones anteriores son necesarias debido a las diferencias entre la especificación de HTML y SVG, se requiere lo siguiente debido a las diferencias de implementación entre los navegadores.

SVG tiene una categoría especial de atributos llamados atributos de presentación . En las implementaciones también apoya un estilo CSS (que todos los navegadores de apoyo), los atributos de presentación son en realidad otra forma de especificar una propiedad CSS con una baja especificidad . De la especificación SVG:

Los atributos de presentación por lo tanto participará en la cascada de CSS2, como si fueran reemplazados por los correspondientes reglas de estilo CSS coloca al comienzo de la hoja de estilo del autor, con una especificidad de cero. En general, esto significa que la presentación de los atributos tienen menor prioridad que otros las reglas de estilo CSS se especifica en las hojas de estilo del autor o los atributos de "estilo".

Desafortunadamente, algunos navegadores no implementan la especificación correcta y window.getComputedStyle no siempre tienen en cuenta todas las fuentes posibles para establecer las propiedades CSS SVG: los selectores CSS, atributo de estilo y atributos de presentación.

YUI llegó al rescate gracias a los Node del módulo que se podría ampliar para ocultar estas diferencias navegador. El Y.DOM.CUSTOM_STYLES y el Y.Node.prototype.getComputedStyle podría ampliarse para ofrecer de manera uniforme para leer las propiedades de estilo de SVG.

La extensión `Y.DOM`

YUI envuelve todo el acceso DOM a través del Node de interfaz. Como resultado, algunos de los métodos específicos de SVG DOM, como getBBox (utilizado para calcular los límites de un elemento SVG), no son accesibles en el objeto envuelto.

Para hacer las cosas más fáciles de programar para SVG, extensiones para el módulo por defecto Y. DOM (que Node utiliza) se han añadido a cualquiera de exponer las características de SVG DOM o añadir métodos de conveniencia, que suelen necesitar la hora de manipular el contenido:

firstElement/lastElement/prevElement/nextElement/removeAllChildren (SVG no específico)
getMatrix/setMatrix . Proporciona una manera fácil de manipular transforma en elementos SVG, algo muy difícil con el estándar SVG DOM
getBBox/getViewportBBox ofrecer formas sencillas de acceder a un cuadro delimitador en el sistema de coordenadas del elemento o en el espacio de visualización.

loadContent . Una utilidad para insertar un fragmento de DOM se describe usando un objeto de JavaScript literal. Por ejemplo:

 myNode.loadContent ({
     tag: 'g',
     relleno: 'rojo',
     carrera: 'none',
     hijos: [{
         tag: "rect",
         x: 10,
         y: 10,
         Ancho: 200,
         Altura: 300
     }, {
         tag: "círculo",
         r: 10,
         cx: 105,
         CY: 155
     }, {
         tag: "imagen",
         "Xlink: href": "images / photo.png,
         Ancho: 200,
         altura: '300px '
     }, PrevSibling);

es un atajo para hacer varias llamadas DOM (como createElementNS , setAttributeNS y appendChild ) para crear un g del elemento y sus hijos e insertarlo antes prevSibling en myNode . La utilidad se refiere a espacios de nombres de atributos y elementos.

Adiciones en el motor de animación de temporización y sincronización

Muchos, si no la mayoría de los efectos de la participación de animación requieren múltiples coreografías casos animación. Por lo general, varias animaciones son necesarios para crear el efecto deseado, y el inicio o el final de las animaciones dependen unos de otros, a veces con un desfase de tiempo: animaciones deben ser sincronizados.

Por ejemplo, si usted tiene un conjunto de formas que deben desaparecer en uno después del otro, tendrá que crear una animación de fundido para cada elemento y luego la cadena de su hora de inicio con un ligero desfase.

 var cadena = Y.all ('círculo # encadenado'),
     firstAnim, previousAnim;

 chained.each (function (círculo) {
     var anim = new Y. Anime ({
         nodo: círculo,
         a partir de: {"llenar": "blanco"},
         a: {"llenar": "gris"},
         Duración: 0,25
     });
     if (previousAnim! == undefined) {
         / / Synchrnoize el inicio de anim a 0,15 segundos después del comienzo
         / / De animación del círculo anterior (previousAnim).
         previousAnim.onBegin (anim, 0,15);
     Else {}
         firstAnim = anim;
     }
     previousAnim = anim;
 });

 / / Inicia el 1s primera animación después de un clic en cualquiera de los círculos.
 / / Tenga en cuenta que esto es una extensión del método de ejecución por defecto YUI que no
 / / Tomar un tiempo de desplazamiento.
 chained.on ('click', function () {
     firstAnim.run (1);
 });

Ver el tiempo de compensación pruebas.

El método onBegin hace que sea fácil de sincronizar el inicio de dos animaciones, con un tiempo de desplazamiento opcional. En realidad, onBegin También se puede invocar una función con un desfase de tiempo. Asimismo, el onEnd extensión hace que sea fácil de sincronizar con el final de una animación.

De manera predeterminada, las animaciones YUI tienen eventos que proporcionan una manera de sincronizar. El onBegin y onEnd métodos de sincronización de expresar la forma más concisa (un ejemplo similar de la concisión se muestra a continuación).

Además, es a veces necesario para sincronizar una animación con un acontecimiento, de nuevo con un desfase de tiempo. El beginOn y endOn extensiones nos permiten expresar eso. Por ejemplo:

 anim.beginOn (Y.one (botón '#'), 'click', 0,5);

se iniciará la animación de 0,5 segundos después de que el elemento con el "botón" Identificación se ha hecho clic. Esta es una abreviatura para:

 Y.one (botón '#'). On ('click', function () {
     setTimeout (500 / * m * /, function () {anim.run ();});
 });

Una extensión final a la clase, la animación era la capacidad de hacer que un objeto de animación aplicar el estado de su primer cuadro antes de que se inició en realidad. Esto a menudo es necesaria al crear efectos de animación de la participación de múltiples animaciones, que comenzará a las compensaciones de tiempo diferentes.

 var anim = new Y. Anime ({
     nodo: Y.one (botón '#'),
     a partir de: {r: 30, "fill-opacity": 0, color: 'carmesí'},
     a: {r: 80, "fill-opacity: 1, color: 'oro'},
     Duración: 0,25
 });

 / / Lo siguiente configurará el estado deseado en el objeto de destino antes de
 / / En realidad a partir de la animación.
 anim.applyStartFrame ();
 anim.run (2);

La reproducción aleatoria de imagen demo utiliza compensaciones de animación para el efecto que se extiende la pila de imágenes o las imágenes pone de nuevo en una pila.

Conclusión

Trabajar con SVG y YUI, y en particular YUI 3, ha sido una experiencia muy agradable: una gran parte de la funcionalidad de YUI se aplica a la derecha SVG fuera de la caja y la arquitectura extensible de YUI ha permitido solucionar problemas de vez en cuando y añadir la funcionalidad deseada .

Por supuesto, el aumento de soporte estándar para SVG en YUI sería útil, en particular, hacer que el trabajo con YUI independiente los documentos SVG y hacer que el Node de clase envolver elementos SVG, sin soluciones.

También hay algunas mejoras que pueden ser útiles. Por ejemplo, sería útil que las animaciones podrían dirigirse a varios elementos. Del mismo modo, el apoyo de varios valores (como en el <animate> elemento SVG, por ejemplo) sería útil para crear efectos más sofisticados.

Las demos de SVG-wow.org fueron escritas para YUI 3,1 y portado a 3.2 para el propósito de este blog. En 3.2, las transiciones fueron introducidas que hacen uso de los nativos transiciones CSS si está disponible en el navegador. Podría ser posible que el motor de animación a la animación YUI aprovechar de manera similar cuando se disponga de SMIL (Opera, Firefox y WebKit en el momento de escribir este artículo), que deben producir mejoras en el rendimiento.

La extensión SVG en el sitio web svg-wow.org están disponibles como un módulo de Galería de YUI 3 para aquellos que quieran disfrutar de la diversión de trabajar con YUI y SVG.

Referencias

SVG Wow!
SVG Especificación
SVG Tutorial
Adobe SVG zona (un poco anticuado, pero todavía tiene un buen ejemplo)
carto.net ejemplos
KevLinDev

Compartir y ampliar: Marcar con del.icio.us | Digg it! | reddit!

2 Comentarios »

RSS feed para los comentarios de esta entrada.

SVG Wow de verdad!
Gran escribir, ejemplos y el código está disponible para su uso ... muy bueno!
Gracias.
Comentario por Dylan Oudyk - 19 de octubre 2010 #
Bonito mensaje y el artículo interesante ....
_________
Helen.
Comentario de Constructores de Manchester - 19 de junio 2011 #

Deja un comentario

Desarrollado por WordPress en Yahoo! Web Hosting .

Yahoo! interfaz de usuario de blog (YUIBlog)