Introducción a SVG 2d de HTML5: 11-User Interacción (Animación) Introducción y aplicación

SVG tiene una buena interactividad del usuario, como:

1. SVG puede responder a la mayoría de los eventos DOM2.

2. SVG puede capturar bien el movimiento del mouse del usuario a través del cursor.

3. Los usuarios pueden lograr fácilmente la escala y otros efectos estableciendo el valor de la propiedad Zoomandpan del elemento SVG.

4. Los usuarios pueden combinar fácilmente animaciones y eventos para completar algunos efectos complejos.

Al adjuntar eventos a elementos SVG, podemos completar fácilmente algunas tareas interactivas utilizando lenguaje de secuencias de comandos. SVG admite la mayoría de los eventos DOM2, como Onfocusin, Onfocusou, OnClick, Onmousedown, OnMouseUp, OnmouseMove, OnMouseOut, Onload, Onresize, Onscroll y otros eventos. Además de estos, SVG también proporciona eventos únicos relacionados con la animación, como: Onroom, Onbegin, Onend, OnRpeat, etc.

Todos están familiarizados con el incidente, así que no hablaré de eso.

SVG usa texto para definir gráficos, y esta estructura de documentos es muy adecuada para crear animaciones. Para cambiar la posición, el tamaño y el color de la figura, solo necesita ajustar las propiedades correspondientes. De hecho, SVG tiene propiedades especialmente diseñadas para diversos procesos de eventos, y muchos de ellos incluso están hechos a medida para animaciones. En SVG, hay varias formas de implementar la animación:

1. Use los elementos de animación de SVG. Esto se resaltará a continuación.

2. Use el script. El uso de operaciones DOM para iniciar y controlar animaciones ya es una tecnología madura, y hay un pequeño ejemplo a continuación.

3. SMIL (lenguaje de integración multimedia sincronizado). Si está interesado, consulte: http://www.w3.org/tr/2008/rec-smil3-20081201/.

<svgviewbox = "0 0 800 300"

xmlns = "http://www.w3.org/2000/svg" versión = "1.1">

<Edc> Elementos de animación básicos </ descreno>

<rect x = "1" y = "1"

relleno = "Ninguno" Stroke = "Blue" Stroke-width = "2" />

<!-Animación de la posición y el tamaño del rectángulo->

<rect id = "rectelement" x = "300" y = "100"

relleno = "RGB (255,255,0)">

<Animate AttributeName = "x" attributessype = "xml"

begin = "0s" dur = "9s" fill = "congele" de = "300" a = "0" />

<Animate AttributeName = "Y" attributeType = "xml"

begin = "0s" dur = "9s" relleno = "congelamiento" de = "100" a = "0" />

<Animate AttributeName = "Width" AttributeType = "XML"

begin = "0s" dur = "9s" relleno = "congelamiento" de = "300" a = "800" />

<Animate AttributeName = "Height" AttributeType = "XML"

begin = "0s" dur = "9s" fill = "congele" de = "100" a = "300" />

</rect>

<

<g transform = "traducir (100,100)">

<!- ​​Los siguientes usos establecidos para animar la visibilidad y luego usa animatemoción,

Animate y Animatetransform. Realice otros tipos de animaciones ->

<Text id = "TextElement" x = "0" y = "0"

font-family = "verdana" font-size = "35.27" Visibility = "Hidden">

¡Está vivo!

<set attributeName = "Visibility" attributeType = "css" a = "visible"

begin = "3s" dur = "6s" relleno = "congelamiento" />

<AnimateMotion Path = "M 0 0 L 100 100"

begin = "3s" dur = "6s" relleno = "congelamiento" />

<Animate AttributeName = "Fill" AttributeType = "CSS"

from = "rgb (0,0,255)" to = "rgb (128,0,0)"

begin = "3s" dur = "6s" relleno = "congelamiento" />

<AnimateTransform AttributeName = "Transform" attributeteType = "xml"

type = "Rotate" from = "-30" a = "0"

begin = "3s" dur = "6s" relleno = "congelamiento" />

<AnimateTransform AttributeName = "Transform" attributeteType = "xml"

type = "escala" from = "1" a = "3" adicional = "suma"

begin = "3s" dur = "6s" relleno = "congelamiento" />

</ext>

</g>

</svg>

Coloque este código en el cuerpo del documento HTML y ejecútelo para conocer el efecto de la animación.

xlink: href

Esto debería ser muy familiar, señalando los elementos que ejecutan la animación. Este elemento debe definirse en el fragmento de documento SVG actual. Si no se especifica este atributo, la animación se aplicará a su elemento principal.

attributeName = <AttributeName>

Esta propiedad especifica las propiedades para aplicar la animación. Si esta propiedad tiene un espacio de nombres (no lo olvide, SVG es esencialmente un documento XML), este espacio de nombres también debe agregarse. Por ejemplo, en el siguiente ejemplo, XLink recibe alias diferentes. Aquí, cuando Animate especifica el atributo, se incluye el espacio de nombres:

<svg versión = "1.1" xmlns = "http://www.w3.org/2000/svg"

xmlns: xlink = "http://www.w3.org/1999/xlink">

<title> Demostración de la resolución de espacios de nombres para la animación </title>

<g xmlns: a = "http://www.w3.org/1999/xlink">

<Animate attributename = "a: href" xlink: href = "#foo" dur = "2s" a = "two.png" relleno = "congelamiento"/>

</g>

<g xmlns: b = "http://www.w3.org/1999/xlink" xmlns: xlink = "http://example.net/bar">

<Imagen xml: id = "foo" b: href = "one.png" x = "35" y = "50"/>

</g>

</svg>

attributessype = CSS | XML | Auto (valor predeterminado)

Esta propiedad especifica el espacio de nombres donde se toman los valores de la propiedad. Los significados de estos valores son los siguientes:

CSS: El atributo especificado en nombre de AttributeName es el atributo CSS.

XML: El atributo especificado por AttributeName es el atributo en el espacio de nombres predeterminado de XML (tenga en cuenta que el documento SVG es esencialmente un documento XML).

Auto: significa buscar primero el atributo especificado por AttributeName en el atributo CSS. Si no se encuentra, buscará el atributo en el espacio de nombres XML predeterminado.

Las siguientes propiedades son los atributos de tiempo de animación; Controlan la línea de tiempo de la ejecución de la animación, incluyendo cómo comenzar y terminar la animación, si la animación se ejecuta repetidamente, si la animación termina, etc.

Begin = Begin-Value-List

Esta propiedad define la hora de inicio de la animación. Puede ser una serie de valores de tiempo separados por semicolones. También puede ser algún otro valor que desencadena el comienzo de la animación. Por ejemplo, eventos, teclas de acceso directo, etc.

Dur = Valor de reloj | Medios | indefinido

Define la duración de la animación. Se puede configurar en un valor que se muestra en formato de reloj. También se puede establecer en los siguientes dos valores:

Medios: Especifica que el tiempo de la animación es la duración del elemento multimedia interno.

Indefinito: especifique el tiempo de animación para ser infinito.

El formato del reloj se refiere a los siguientes formatos de valor legal:

: 30: 03 = 2 horas, 30 minutos y 3 segundos

: 00: 10.25 = 50 horas, 10 segundos y 250 millones de segundos

: 33 = 2 minutos y 33 segundos

: 10.5 = 10.5 segundos = 10 segundos y 500 millones de segundos

.2H = 3.2 horas = 3 horas y 12 minutos

min = 45 minutos

s = 30 segundos

MS = 5 millones de segundos

.467 = 12 segundos y 467 millones de segundos

.5s = 500 millones de segundos

: 00.005 = 5 millones de segundos

final = lista de valor final

Define la hora final de la animación. Puede ser una serie de valores separados por semicolones.

min = valor de reloj | medios de comunicación

Max = Valor de reloj | medios de comunicación

Establece el valor máximo y mínimo de la duración de la animación.

reiniciar = siempre | When Notactive | nunca

Configure la animación para comenzar de nuevo en cualquier momento. Siempre significa que la animación puede comenzar en cualquier momento. When Notactive significa que solo puedes comenzar de nuevo cuando no hay reproducción, como los fines de reproducción anteriores. Nunca significa que la animación no se pueda comenzar de nuevo.

repetircount = valor numérico | indefinido

Establezca el número de veces que se repite la animación. Indefinito significa repetición infinita.

repiteDur = Valor de reloj | indefinido

Establece el tiempo total de animación de repetido. Indefinito significa repetición infinita.

relleno = congelamiento | Eliminar (predeterminado)

Establece el estado del elemento después de finalizar la animación. Freeze significa que el elemento permanece en el último estado de la animación después de que termine la animación. Eliminar significa que el elemento regresa al estado antes de la animación después del final de la animación, que es el valor predeterminado.

Categoría 3: Defina los atributos de los valores de animación

Estas propiedades definen el valor de las propiedades que se ejecutan. De hecho, algunos algoritmos que definen los fotogramas clave e interpolación.

calcMode = discreto | lineal (predeterminado) | ritmo | ranura

Defina el método de interpolación de animación: discreto: discreto, sin interpolación; Lineal: interpolación lineal; ritmo: interpolación del tamaño del paso; Spline: Interpolación de spline. El valor predeterminado es lineal (interpolación lineal), pero si el atributo no admite la interpolación lineal, se utilizará la interpolación discreta.

valores = <list>

Define una lista de valores para los cuadros de animación separados por semicolones. Apoyo al valor del vector.

keyTimes = <In List>

Define una lista de tiempo de los cuadros de animación separados por las semicolones. Esto corresponde a los valores uno por uno. Este valor se ve afectado por el algoritmo de interpolación. Si es una interpolación lineal y de spline, el primer valor de KeyTimes debe ser 0 y el último valor debe ser 1. Para la no interpolación discreta, el primer valor de KeyTimes debe ser 0. Para la interpolación del tamaño del paso, es obvio que no se necesitan keytims. Y si la duración de la animación se establece en indefinido, se ignoran los keytimes.

keySplines = <Inlist>

Esta propiedad define el punto de control cuando la interpolación de spline (interpolación de Betzel), y obviamente solo funciona si el modo de interpolación se selecciona como spline. Los valores en esta lista varían de 0 a 1.

de = <value>

a = <valor>

por = <valor>

Define los valores de inicio, final y paso del atributo de animación. Nota aquí: si los valores ya han formulado los valores relevantes, se ignorará cualquiera de/to/por valor.

A veces, es muy útil establecer el valor relevante en lugar del valor absoluto, pero el valor incremental, usar la propiedad aditiva puede lograr este objetivo.

adition = reemplazar (valor predeterminado) | suma

Esta propiedad controla si la animación es incremental. La suma significa que la animación tendrá un valor de atributo relacionado más grande u otras animaciones de baja prioridad. Reemplazar es el valor predeterminado, lo que indica que la animación sobrescribirá el valor de atributo relevante u otras animaciones de baja prioridad. Ver un pequeño ejemplo:

<rect ...>

<Animate AttributeName = "Width" from = "0px" a = "10px" dur = "10s"

adition = "sum"/>

</rect>

Este ejemplo demuestra el efecto de animación de incrementar el ancho del rectángulo.

A veces, también es muy útil si los resultados de animación repetidos se superponen, y el uso de la propiedad de acumulación puede lograr este objetivo.

acumular = ninguno (predeterminado) | suma

Esta propiedad controla si el efecto de animación es acumulativo. Ninguno es el valor predeterminado, lo que indica que las animaciones duplicadas no se acumulan. La suma significa que se acumulan los efectos de animación repetidos. Para una animación de ejecución única, esta propiedad no tiene sentido. Ver un pequeño ejemplo:

<rect ...>

<Animate AttributeName = "Width" from = "0px" a = "10px" dur = "10s"

adicional = "Sum" Acumulación = "Sum" RepetCount = "5"/>

</rect>

Este ejemplo demuestra que la longitud del rectángulo aumenta en cada iteración.

SVG proporciona los siguientes elementos de animación:

Este es el elemento de animación más básico, que puede proporcionar directamente los valores de diferentes puntos de tiempo para los atributos relacionados.

Esta es la abreviatura del elemento animado y admite todos los tipos de atributos, especialmente cuando los atributos animados (como la visibilidad). El elemento establecido no es incremental, y los atributos relevantes no son válidos. El tipo de valor final de animación especificado debe cumplir con el tipo de valor del atributo.

Lu Jin Elementos de animación. La mayoría de las propiedades de este elemento son las mismas que anteriores, con solo las siguientes diferencias ligeramente diferentes:

calcMode = discreto | lineal | ritmo | ranura

El valor predeterminado de esta propiedad es diferente, y el valor predeterminado en este elemento está ritmo.

ruta = <PathData>

La ruta del elemento de animación que se mueve es el mismo que el formato del valor del atributo D del elemento de ruta.

keyPoints = <List-of-Numbers>

El valor de esta propiedad es una serie de valores de puntos flotantes dados por semicolones, y el rango de valor de cada valor es 0 ~ 1. Estos valores representan la distancia a la que se mueve el punto de tiempo correspondiente por el atributo KeyTimes. La distancia específica aquí está determinada por el navegador mismo.

Rotar = <número> | Auto | reverso automático

Esta propiedad especifica el ángulo en el que el elemento gira cuando se mueve. El valor predeterminado es 0, el número representa el ángulo de rotación, y el auto representa el cuerpo animal que gira en la dirección de la fuerza de la carretera. Auto-Reverse indica la dirección en la que la dirección es opuesta a la dirección del movimiento.

Además, los valores del elemento animatemoción de, por, a, a, los valores están compuestos de pares de coordenadas; El valor x y el valor Y están separados por comas o espacios, y cada par de coordenadas está separado por un punto y coma, como de = 33, 15, lo que significa que la coordenada del punto X de partida es 33 y la coordenada y es 15.

Hay dos formas de especificar una ruta de movimiento: una es asignar directamente un valor al atributo de ruta, y el otro es especificar una ruta para usar el elemento mpath como elemento infantil de animatemotionde. Si usa ambos métodos, el elemento MPATH tiene una alta prioridad. Ambos métodos tienen mayor prioridad que los valores, desde, por, hasta.

Ver un pequeño ejemplo:

<? xml versión = "1.0" standalone = "no"?>

<! DOCTYPE SVG Public "-// w3c // dtd svg 1.1 // en"

"http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd">

<svgviewbox = "0 0 500 300"

xmlns = "http://www.w3.org/2000/svg" versión = "1.1"

xmlns: xlink = "http://www.w3.org/1999/xlink">

<rect x = "1" y = "1"

relleno = "Ninguno" Stroke = "Blue" Stroke-width = "2" />

<Path id = "Path1" d = "M100,250 C 100,50 400,50 400,250"

relleno = "Ninguno" Stroke = "Blue" Stroke-width = "7.06"/>

<círculo cx = "100" cy = "250" r = "17.64" relleno = "azul"/>

<círculo cx = "250" cy = "100" r = "17.64" relleno = "azul"/>

<círculo cx = "400" cy = "250" r = "17.64" relleno = "azul"/>

<ruta d = "m-25, -12.5 L25, -12.5 L 0, -87.5 z"

relleno = "Yellow" Stroke = "Red" Stroke-width = "7.06">

<animatemotion dur = "6s" repitCount = "indefinite" rotate = "auto">

<mpath xlink: href = "#path1"/>

</animatemotion>

</prak>

</svg>

Elementos de animación de color. Este es un elemento obsoleto, y básicamente todas las funciones pueden ser reemplazadas por Animate, así que no lo uses.

Transformar elementos de animación. Eche un vistazo a algunas propiedades especiales:

tipo = traducir | escala | girar | skewx | sesgo

Esta propiedad especifica el tipo de transformación, y traducir es el valor predeterminado.

Los valores de, por y corresponden a los parámetros de la transformación, que es consistente con la transformación mencionada anteriormente. Los valores son un conjunto de valores separados por semicolon.

Elementos y propiedades que admiten efectos de animación

Básicamente, todos los elementos gráficos (ruta, rect, elipse, texto, imagen ...) y elementos de contenedores (SVG, G, DEFS, USE, Switch, Clippath, Mask ...) admiten animación. Básicamente, la mayoría de las propiedades admiten efectos de animación. Para obtener instrucciones detalladas, consulte la documentación oficial.

La animación SVG también se puede completar usando scripts. El contenido detallado de DOM se introducirá más adelante. Aquí hay un breve ejemplo:

<? xml versión = "1.0" standalone = "no"?>

<! DOCTYPE SVG Public "-// w3c // dtd svg 1.1 // en"

"http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd">

<SVG ViewBox = "0 0 400 200"

xmlns = "http://www.w3.org/2000/svg"

onload = "startanimation (evt)" versión = "1.1">

<script type = "Application/Ecmascript"> <! [Cdata [

VAR TIMEVALUE = 0;

VAR TIMER_INCRENME = 50;

var max_time = 5000;

var text_element;

función startanimation (evt) {

text_element = evt.target.ownerDocument.getElementById ("TextElement");

Showandgrowelement ();

}

función showandgrowelement () {

TimeValue = TimeValue + Timer_Increment;

if (TimeValue> max_time)

devolver;

// Escala la cadena de texto gradualmente hasta que sea 20 veces más grande

ScaleFactor = (TimeValue * 20.) / max_time;

text_element.setAttribute ("transformar", "escala (" + escalafactor + ")");

// Haz que la cadena sea más opaca

OpacityFactor = TimeValue/max_time;

text_element.setAttribute ("Opacidad", OpacityFactor);

// Llama Showand Growelement nuevamente <Timer_incement> Millionseconds más tarde.

setTimeout ("showandgrowelement ()", timer_incement)

}

Window.Showand GrowElement = showandgrowelement

]]> </script>

<rect x = "1" y = "1"

relleno = "Ninguno" Stroke = "Blue" Stroke-width = "2"/>

<g transform = "traducir (50,150)" relleno = "rojo" font-size = "7">

<text id = "textElement"> svg </ext>

</g>

</svg>

Índice de script: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Centro de desarrollo: https://developer.mozilla.org/en/svg

Referencia popular: http://www.chinasvg.com/

Documento oficial: http://www.w3.org/tr/svg11/

Tecnología de animación SVG: http://msdn.microsoft.com/zh-cn/library/gg589525(v=vs.85).aspx