Mecánica de animación svg en js. Creando animación en capas con SVG. Controlar la distancia de la animación desde la ruta de movimiento usando puntos clave
Un pequeño experimento que explora el uso de animaciones de arte lineal SVG que preceden a la aparición de elementos gráficos o del sitio, simulando su carga.
Fuentes de demostraciónEntonces, ¿qué concepto estamos explorando? La primera es dibujar líneas de animación que desaparecen en la imagen o ilustración "real" tan pronto como la forma correspondiente está en el área de visualización. Este puede ser un gran efecto para cualquier tipo de ilustración de sitio web. El segundo concepto explora el uso de la animación SVG para simular la carga de un sitio web: partes del sitio se representan mediante dibujos planos de contornos animados, y una vez finalizada la animación se muestran los elementos "reales". La técnica en sí se implementa de forma estática, donde utilizamos SVG para cada uno de los elementos que desaparecen. Las ideas para el diagrama del sitio provienen de un impresionante tiro de Dribbble de Chris Bannister.
Hermosas ilustraciones de los dispositivos están hechas por Pixeden, archivos PSD que puedes encontrar aquí:
Los dibujos lineales SVG de estas ilustraciones fueron creados cuidadosamente por el talentoso Emanuel Serbanoiu. Consulta su perfil de Dribbble o visita su sitio web.
La primera demostración se realiza dibujando líneas de animación con una ilustración que aparece gradualmente:
La segunda demostración dibuja líneas para la animación atenuada del sitio web:
Y la tercera demostración, similar a la demostración 2, solo la animación y el desvanecimiento de los elementos ocurren secuencialmente, pero en un intervalo de tiempo aleatorio:
¡Esperamos que te hayan gustado los efectos y encuentres inspiración en ellos!
Fuentes de demostraciónTraducido para el sitio wordpress-club.com: Alejandro Ovcharenko
En lecciones anteriores de la serie, analizamos el uso de gráficos vectoriales. SVG en HTML. Ahora es el momento de mirar la animación. SVG.
Lo esencial
La animación SVG se realiza utilizando el elemento.
Agregamos un elemento
nombre del atributo: Esto define el atributo que participará en la animación.
de: atributo opcional. Define el valor inicial; el valor actual se utiliza de forma predeterminada.
a: Este atributo especifica la dirección de la animación. Dependiendo del valor especificado en el atributo atributoName, el resultado puede variar. En el ejemplo anterior, la altura del elemento cambiará.
durante: Determina la duración de la animación. El valor debe especificarse en el formato de sintaxis del valor del reloj. Por ejemplo, 02:33 corresponden a 2 minutos y 33 segundos, y 3h corresponden a 3 horas. Para nuestro ejemplo, definimos la duración de la animación como 3 segundos.
Hacemos lo mismo con el elemento.
Elementos móviles
Para mover elementos SVG solo necesita especificar las coordenadas xey:
En el ejemplo movemos el rectángulo de 0 a 200 en 3 segundos. También agregamos el atributo de relleno al elemento.
Lo mismo se aplica al elemento
Animar múltiples atributos
Por supuesto, en el elemento
Aquí estamos animando el atributo del elemento.
En lecciones anteriores de la serie, analizamos el uso de gráficos vectoriales. SVG en HTML. Ahora es el momento de mirar la animación. SVG.
Lo esencial
La animación SVG se realiza utilizando el elemento.
Agregamos un elemento
nombre del atributo: Esto define el atributo que participará en la animación.
de: atributo opcional. Define el valor inicial; el valor actual se utiliza de forma predeterminada.
a: Este atributo especifica la dirección de la animación. Dependiendo del valor especificado en el atributo atributoName, el resultado puede variar. En el ejemplo anterior, la altura del elemento cambiará.
durante: Determina la duración de la animación. El valor debe especificarse en el formato de sintaxis del valor del reloj. Por ejemplo, 02:33 corresponden a 2 minutos y 33 segundos, y 3h corresponden a 3 horas. Para nuestro ejemplo, definimos la duración de la animación como 3 segundos.
Hacemos lo mismo con el elemento.
Elementos móviles
Para mover elementos SVG solo necesita especificar las coordenadas xey:
En el ejemplo movemos el rectángulo de 0 a 200 en 3 segundos. También agregamos el atributo de relleno al elemento.
Lo mismo se aplica al elemento
Animar múltiples atributos
Por supuesto, en el elemento
Aquí estamos animando el atributo del elemento.
Prometimos durante mucho tiempo hacer un video sobre la animación de elementos SVG en páginas, pero de alguna manera no funcionó. Hoy finalmente tenemos el placer de presentarles el primer vídeo de la serie, en el que les contaremos sobre las opciones de animación SVG: usando CSS, SMIL y JavaScript (usando Snap.svg como ejemplo).
De hecho, con este vídeo fue como con los Mistral. No hubo circunstancias para grabar. Bueno, ahora finalmente ha funcionado.
animaciones SVG
Intentemos una vez más juntar todo con enlaces. Hay tres formas de animar elementos SVG en una página, dos de las cuales también se aplican a elementos HTML. Por supuesto, estoy hablando de animaciones CSS y JavaScript. Pero para SVG también puedes usar animaciones SMIL (lenguaje de integración multimedia sincronizada).
animaciones SONRISA
Esta es una tecnología genial si necesitamos animar rutas y al mismo tiempo almacenarlo todo en un archivo SVG. Sí, las animaciones CSS también se pueden incluir en el archivo, pero no se pueden usar para animar el atributo d de las rutas, por lo que SMIL resulta ser una tecnología mucho más interesante. En realidad, JavaScript también se puede incluir directamente en archivos SVG, pero la compatibilidad con el navegador es un poco diferente, por lo que debes pensar qué y cómo usarlo.
SMIL ha sido compatible con todos los navegadores desde tiempos inmemoriales (primeras versiones), excepto Internet Explorer, que hasta ahora no admite estas animaciones.
Animaciones CSS
Aquí todo está muy claro; hace tiempo que estamos acostumbrados a usar CSS para pequeñas animaciones de elementos HTML. Se puede hacer lo mismo con SVG: la mayoría de los atributos se pueden animar y la compatibilidad con el navegador es mucho mejor. Bueno, porque al menos Internet Exporter 10 aprendió sobre un fenómeno como las animaciones CSS.
animaciones javascript
La solución más confiable y conveniente, como siempre, es JavaScript, no hay escapatoria a esto. Cuando se trabaja con interfaces, esta es la única opción para escribir algo. Afortunadamente, ya existen muchas bibliotecas para trabajar con SVG.
Algunos incluso incluyen capacidades de animación, como Snap.svg. Recomendaría esta biblioteca a todos, aunque muchos están acostumbrados a trabajar con Velocity.js, este enfoque también tiene derecho a existir.
Los gráficos SVG se pueden animar utilizando elementos de animación. Estos elementos se definieron originalmente en la especificación de animación SMIL; estos incluyen:
— le permite configurar la animación para atributos y propiedades escalares durante un período de tiempo determinado; es una abreviatura conveniente para animación que le permite asignar valores de animación a atributos y propiedades no numéricos, como propiedades de visibilidad; — mueve el elemento a lo largo de la ruta de movimiento; - cambia el valor del color de atributos o propiedades específicas durante un cierto período de tiempo. Tenga en cuenta que utilizando el elemento Es una práctica obsoleta en comparación con el uso de un elemento de animación para definir propiedades que pueden adoptar valores de color. Aunque todavía está presente en la especificación SVG 1.1, esa misma especificación indica claramente que ha quedado obsoleta; se eliminó por completo de la especificación SVG-2.
Además de los elementos de animación definidos en la especificación SMIL, SVG incluye extensiones compatibles con la especificación de animación SMIL; estas extensiones incluyen atributos que amplían la funcionalidad del elemento
Las extensiones SVG incluyen:
— le permite configurar la animación en uno de los atributos de transformación SVG durante un período de tiempo determinado, por ejemplo para el atributo de transformación; - ruta (atributo): permite especificar cualquier función de sintaxis de datos de ruta SVG en el atributo de ruta de un elemento animateMotion ( La animación SMIL permite utilizar solo un conjunto subordinado de sintaxis de datos de ruta SVG en el atributo de ruta).
Hablaremos de animateMotion en la siguiente sección:
- se usa junto con el elemento animateMotion para referirse a una ruta de movimiento que debe usarse, como una ruta de movimiento. El elemento mpath se incluye dentro del elemento animateMotion, antes de la etiqueta de cierre; - puntos clave (atributo): se utilizan como atributo de animateMotion para proporcionar un control preciso sobre la velocidad a la que el elemento animado se mueve a lo largo del camino;
- rotar (atributo): se utiliza como atributo de animateMotion para controlar si el objeto gira automáticamente de modo que los puntos de su eje x giren en la misma (u opuesta) dirección que la dirección del vector tangente de la ruta de movimiento. Este atributo es la clave para crear un movimiento a lo largo del camino que funcione como usted desea. Más sobre esto en la sección animateMotion.
Las animaciones SVG pueden ser similares a las animaciones y transiciones CSS debido a su naturaleza. Se crean cyframes, todo se mueve, los colores cambian, etc. Sin embargo, puede hacer algunas cosas que las animaciones CSS no pueden. Cubriré esto en esta guía.
¿Para qué se utiliza la animación SVG?
SVG se puede diseñar y animar usando CSS (diapositivas). Básicamente, cualquier animación de transformación o transición que se pueda aplicar a un elemento HTML también se puede aplicar a un elemento SVG. Pero hay algunas propiedades de SVG que no se pueden animar mediante CSS; sin embargo, se puede hacer directamente a través de SVG.
Una ruta SVG, por ejemplo, está definida por un conjunto de datos (atributo d="") que definen la forma de esa ruta. Estos datos se pueden cambiar y animar a través de SMIL, pero no a través de CSS.
Esto se debe a que los elementos SVG se describen utilizando un conjunto de atributos conocidos como atributos de presentación SVG. Algunos de estos atributos se pueden configurar, modificar y animar usando CSS, mientras que otros no.
Por lo tanto, muchos efectos de animación actualmente simplemente no se pueden implementar usando CSS. Este vacío se puede llenar con JavaScript o con animación SVG declarativa derivada de SMIL.
Si prefiere utilizar JavaScript, le recomiendo snap.svg de Dmitry Baranovsky, que se llama "jQuery para SVG".
O, si prefieres un enfoque más refinado de la animación, puedes usar elementos SVG, que cubriremos en este tutorial.
Otra ventaja de SMIL sobre la animación JS es que JS no funciona cuando el SVG está incrustado como una imagen o se usa como imagen de fondo en CSS. La animación SMIL funciona en ambos casos ( o se espera que pronto sea compatible con los navegadores).
En mi opinión, esta es una ventaja significativa. Puede encontrar otras razones para elegir SMIL. Este artículo es una guía que le ayudará a empezar a utilizar SMIL hoy.
Soporte y alternativas del navegador
SMIL es ampliamente compatible con los navegadores. Funciona en todos los navegadores excepto Internet Explorer y Opera Mini. Para obtener información completa sobre la compatibilidad del navegador, puede consultar tabla de compatibilidad o “¿Puedo usar”?.
Si necesita proporcionar un respaldo para las animaciones SMIL, puede verificar la compatibilidad del navegador usando Modernizr. Si SMIL no es compatible, puede proporcionar algún tipo de alternativa ( Animación JavaScript, enfoque alternativo, etc..).
Especificación de un objetivo de animación usando xlink:href
Independientemente de cuál de los cuatro elementos de animación elija, debe especificar la animación de destino definida por ese elemento.
Para especificar el objetivo, puede utilizar el atributo xlink:href. El atributo toma una referencia URI al elemento objeto de esta animación y que, por tanto, cambiará con el tiempo. El elemento de destino debe ser parte del fragmento SVG actual del documento:
Si ha trabajado con elementos de animación SVG antes, probablemente los haya encontrado como elementos anidados dentro de otro elemento que se supone que deben animar. Esto lo proporciona la especificación.
Si no se utiliza el atributo xlink:href, entonces el elemento de destino será el elemento principal del primer nivel desde el elemento de animación actual:
Así, si quieres " encapsular»animación en el elemento al que se aplica, puedes hacer precisamente eso. Y si desea que los elementos de animación se almacenen en otra parte del documento, puede hacerlo especificando un destino para cada elemento de animación usando xlink:href; ambos métodos funcionan igual de bien.
Especificación de la propiedad de destino de una animación mediante nombre de atributo y tipo de atributo
Todos los elementos de animación también interactúan con un atributo más: atributoName. atributoName se utiliza para especificar el nombre del atributo que está animando.
Por ejemplo, si desea establecer una animación para la posición central
atributoName solo acepta un valor, pero no una lista de valores, ya que solo puedes animar un atributo a la vez. Si desea definir una animación para más de un atributo, debe definir más de un efecto de animación para ese elemento.
Esto es algo que no me gusta del todo y creo que aquí es donde CSS tiene una ventaja sobre SMIL. Pero nuevamente, debido a los valores posibles para otros atributos de animación ( más sobre eso más adelante), tiene sentido definir solo un nombre de atributo a la vez; de lo contrario, si define varios valores de atributo más, se volverán demasiado complejos para trabajar con ellos.
Al especificar un nombre de atributo, puede agregar un prefijo XMLNS ( abreviatura de espacio de nombres XML) para indicar el espacio de nombres del atributo.
El espacio de nombres también se puede especificar utilizando el atributo atributoType. Por ejemplo, algunos atributos pertenecen al espacio de nombres CSS. (lo que significa que el atributo también se puede encontrar como una propiedad CSS), otros: solo espacio de nombres XML.
Aquí hay una tabla que enumera estos atributos. Esta tabla no cubre todos los atributos SVG, solo aquellos que se pueden configurar mediante CSS. Algunos ya están disponibles hoy como propiedades CSS.
Si el valor de atributoType no se establece explícitamente o se establece en automático, el navegador primero debe buscar en la lista de propiedades CSS y, si no encuentra nada, buscar en el espacio de nombres XML predeterminado del elemento.
Por ejemplo, el siguiente fragmento establece una animación para la opacidad de un rectángulo SVG. Dado que el atributo de opacidad también está disponible como propiedad CSS, el tipo de atributo se establece en el espacio de nombres CSS:
Veremos otros atributos de animación en los siguientes ejemplos. Todos los atributos de animación son comunes a todos los elementos de animación a menos que se indique lo contrario.
Establece una animación para cambiar el atributo de un elemento de un valor a otro a lo largo del tiempo, indicando el estado final: desde, por, hasta, dur y relleno.
Empecemos moviendo el círculo de un lugar a otro. Haremos esto cambiando el valor de su atributo cx ( que determina la posición de su centro a lo largo del eje x).
Para esto utilizamos el elemento
Para cambiar un valor de un valor a otro durante un período de tiempo, se utilizan los atributos from, to y dur. Además de estos, también puedes especificar cuándo debe comenzar la animación usando el atributo de inicio:
En el ejemplo anterior, definimos un círculo y luego llamamos una animación en ese círculo. El centro del círculo se mueve desde su posición original en las coordenadas 50 unidades hasta un punto en las coordenadas 450 unidades a lo largo del eje x.
Configuramos el atributo de inicio para hacer clic. Esto significa que el círculo comenzará a moverse después de presionar el cursor del mouse. Puede establecer este atributo en una hora específica. Por ejemplo, comenzar="0s" iniciará la animación inmediatamente después de que se cargue la página.
Puede retrasar el inicio de la animación estableciendo un valor de tiempo positivo; por ejemplo, comenzar="2s" iniciará la animación dos segundos después de que se cargue la página.
Lo que es aún más interesante es que puedes definir el atributo de inicio con un valor como click + 1s, que iniciará la animación un segundo después de hacer clic con el mouse.
Además, puedes utilizar otros valores que te permitan sincronizar la animación sin tener que calcular con precisión la duración y el retraso de otras animaciones. Más sobre esto más adelante.
El atributo dur es similar al atributo de duración de la animación CSS.
Los atributos desde y hasta son similares a los fotogramas clave desde y hasta del bloque de animación CSS @keyframe:
@keyframes moveCircle (de ( /* valor inicial de la animación */ ) a ( /* valor final de la animación */ ) )
relleno de atributo ( que, desafortunadamente, tiene el mismo nombre que otro atributo de relleno que especifica el color de relleno del elemento) es similar a la propiedad Animation-fill-mode, que determina si el elemento debe volver a su estado original una vez completada la animación.
Sus significados en SVG son similares a los utilizados en CSS, excepto por el uso de nombres diferentes:
- congelar: un valor que especifica congelar el estado del efecto en el estado en el que se encontraba en el último valor de duración de la animación. El efecto de animación se congela hasta que se cierra el documento ( o hasta que se reinicie la animación);
- eliminar: se elimina el efecto de animación ( ya no aplica), al finalizar la acción de animación especificada por la duración. Una vez que se completa la animación, ya no se aplica al elemento de destino ( a menos que se reinicie la animación).
Intente cambiar los valores en esta demostración para ver cómo afecta la animación:
HTML:
CSS:
Resultado
El atributo by se utiliza para especificar un desplazamiento relativo para la animación. Como sugiere el nombre, puede usarlo para especificar un valor que hará que la animación cambie.
Este efecto solo se nota principalmente cuando cambias la duración de la animación de un ciclo al siguiente, de forma similar a cómo funciona la función CSS step().
El equivalente SVG de la función CSS step() es calcMode="discrete" . Llegaremos al atributo calcMode="discrete" un poco más adelante.
Reiniciar una animación usando reiniciar
Es posible que tengas que bloquear la animación para que no se reinicie mientras esté activa. Para ello, SVG proporciona el atributo de reinicio.
Puede configurarlo en uno de tres valores posibles:
- siempre: la animación se puede reiniciar en cualquier momento. Este es el valor predeterminado;
- whenNotActive: La animación solo se puede reiniciar cuando está inactiva ( es decir, al finalizar el período de duración de la animación). Se ignoran los intentos de reiniciar la animación mientras está en progreso;
- nunca: el elemento no se puede reiniciar hasta que se reinicie su contenedor principal. ( En el caso de SVG, dado que el contenedor principal es un fragmento de documento SVG, la animación no se puede reiniciar hasta que se vuelva a cargar el documento.).
Nombres de animaciones y su tiempo.
Digamos que queremos animar la posición y el color del círculo para que el color cambie al final de la animación del movimiento. Podemos hacer esto configurando el valor inicial de la animación de cambio de color para que sea igual a la duración de la animación de movimiento; Esto es lo que normalmente hacemos en CSS.
Sin embargo, SMIL tiene una excelente función de manejo de eventos. Ya mencioné que el atributo de inicio acepta valores como clic + 5s. Este valor se llama " el significado del evento“, y en este caso consiste en un evento seguido de “el valor del reloj”.
La parte más interesante aquí es la segunda parte: "el significado del reloj". ¿Por qué no se llama simplemente " valor del tiempo"? La respuesta es que puedes usar este valor literalmente, como un reloj: puedes configurarlo en "10min" o "01:33", lo que equivaldría a " 1 minuto y 33 segundos", o incluso "02:30:03" ( 2 horas, 30 minutos y 3 segundos). Al momento de escribir este artículo, los valores del reloj no están completamente implementados en la mayoría de los navegadores.
Entonces, si en la demostración anterior usamos clic + 01:30, entonces si se implementó la compatibilidad con el navegador, la animación comenzaría 1 minuto y 30 segundos después del clic del mouse.
Otro tipo de valor que puede tomar este atributo es el ID de otra animación seguido del designador del evento. Si tiene dos (o más) efectos de animación ( ¡sin importar si se aplican al mismo elemento o no!), y deseas sincronizarlos para que uno comience dependiendo de la etapa de ejecución del otro, puedes hacerlo sin siquiera saber la duración de la otra animación.
Por ejemplo, en el siguiente ejemplo, el rectángulo azul comienza a moverse 1 segundo después de que comienza la animación del círculo. Esto se hace dándole a cada elemento de animación una ID y luego usando esa ID con el evento de inicio, como se muestra en el siguiente código:
comenzar="circ-anim.comenzar + 1s" le dice al navegador que comience a animar el rectángulo 1 segundo después de que comience la animación del círculo.
Puedes verlo todo en esta demostración:
HTML:
Haga clic en el círculo para iniciar su animación y la animación del rectángulo 1 segundo después.
CSS:
Resultado
También puedes iniciar la animación del rectángulo cuando la animación del círculo haya terminado usando el evento final:
Incluso puedes ejecutarlo antes de que se complete la animación del círculo:
Repetir animación usando repetirCount
Si desea ejecutar la animación más de una vez, puede hacerlo utilizando el atributo repetirCount. Puede especificar cuántas veces desea repetirla o utilizar la palabra clave indefinida para repetir la animación indefinidamente.
Entonces, si queremos repetir la animación del círculo dos veces, el código debería verse así:
Puedes ver esto en la demostración. Establecí el número de repeticiones para el círculo en 2 y para el cuadrado en indefinido.
HTML:
CSS:
svg ( borde: 3px sólido #eee; pantalla: bloque; margen: 1em auto; ) p ( color: #aaa; alineación de texto: centro; margen: 2em 0; )
Resultado
Tenga en cuenta que la animación se reinicia desde el valor original de , no desde el valor que alcanzó cuando finalizó el ciclo. Desafortunadamente, SMIL no nos permite definir una ruta de ida y vuelta entre los valores inicial y final como podemos hacerlo con la animación CSS.
En CSS, la propiedad de dirección de animación determina si la animación debe reproducirse en la dirección opuesta o comenzar cada ciclo desde el punto cero.
Significado dirección de animación: alternativa significa que los bucles de animación pares se reproducen en la dirección normal y los impares se reproducen en la dirección inversa. Esto significa que el primer bucle se reproducirá de principio a fin, el segundo bucle se reproducirá de principio a fin, el tercer bucle se reproducirá nuevamente de principio a fin, y así sucesivamente.
Para hacer esto en SMIL, tendrás que usar JavaScript para cambiar los valores de los atributos from y to. John McPartland de Big Bite Creative hace un tiempo publicó un artículo, que describe cómo hizo esto para una animación de ícono de menú en la que estaba trabajando.
Aquí hay una animación excelente y simple que se repite indefinidamente usando retardo, creada por Miles Elam:
HTML:
CSS:
svg ( borde: 3px sólido #eee; pantalla: bloque; margen: 1em auto; ) p ( color: #aaa; alineación de texto: centro; margen: 2em 0; )
Resultado
Si solo desea especificar una función de ajuste de velocidad general para toda la animación, sin valores intermedios, aún debe especificar los fotogramas clave usando el atributo keyTimes, pero solo necesitará especificar los fotogramas clave de inicio y fin, que son 0; 1 - sin valores intermedios.
Animaciones añadidas y acumuladas: aditivas y acumuladas.
A veces necesitamos definir una animación que comience donde terminó la animación anterior; o una animación que utiliza la suma acumulada de animaciones anteriores como valor para comenzar a reproducir. Para hacer esto, hay dos atributos en SVG, nombrados apropiadamente: aditivo y acumulado.
Digamos que tienes un elemento cuyo ancho deseas aumentar, o una línea cuya longitud deseas aumentar. O digamos que tienes un elemento que deseas mover paso a paso, en ciertos intervalos. Esta característica es especialmente útil para repetir animaciones.
Al igual que con cualquier otra animación, es necesario especificar los valores desde y hasta. Al mismo tiempo, cuando configura el atributo aditivo en suma, cada uno de estos valores se asociará con el valor original del atributo que se está animando.
Así que volvamos a nuestro círculo. Para ello, la posición inicial cx es 50. Si establece los valores de "0" a "100", entonces cero en realidad significa el valor inicial de 50 y 100 significa el valor inicial de 50+100. Es decir, en la práctica resulta que configuraste “de="50″ a="150" .
Hecho esto obtendremos el siguiente resultado:
HTML:
Haga clic en el círculo para iniciar la animación.
CSS:
svg ( borde: 3px sólido #eee; pantalla: bloque; margen: 1em auto; ) p ( color: #aaa; alineación de texto: centro; margen: 2em 0; )
Resultado
Eso es todo lo que hace el atributo aditivo. Simplemente determina si los valores desde y hasta se asociarán con el valor del atributo actual o no. El atributo toma uno de dos valores: suma y reemplazo.
El último valor es el predeterminado, y esto generalmente significa que los valores desde y hasta dados anulan los valores actuales/originales, lo que puede terminar causando que el elemento animado cambie repentinamente de posición al comienzo de la animación.
(Intente reemplazar suma con reemplazar en el ejemplo anterior y verá lo que sucede).
Sin embargo, ¿qué pasa si queremos que se agreguen los valores para que el segundo bucle de animación comience donde terminó el primero? El atributo de acumulación nos ayudará con esto.
El atributo de acumulación controla si se tiene en cuenta el valor final anterior del atributo. Por defecto su valor es none, lo que significa que cuando la animación se repite, lo hace desde el principio, sin contar el final de la iteración anterior.
Sin embargo, puede configurarlo para que sume. Esto significará que cada nuevo ciclo de animación está vinculado al lugar donde terminó el ciclo anterior.
Entonces, si volvemos a la animación anterior y especificamos acumular="suma" obtendremos el siguiente resultado:
HTML:
Haga clic en el círculo para iniciar la animación.
CSS:
svg ( borde: 3px sólido #eee; pantalla: bloque; margen: 1em auto; ) p ( color: #aaa; alineación de texto: centro; margen: 2em 0; )
Resultado
Tenga en cuenta que el atributo de acumulación se ignora si el valor del atributo de destino no admite la adición o si el elemento de animación no se repite. También se ignorará si la función de animación se especifica con solo uno para atribuir.
Especificar el final de una animación usando end
Además de especificar cuándo debe comenzar la animación, también puede especificar cuándo debe finalizar mediante el atributo de finalización. Por ejemplo, puede configurar la animación para que se repita indefinidamente y luego detenerla cuando otro elemento comience a animarse.
El atributo final tiene los mismos valores que el atributo inicial. Puede especificar valores/intervalos de tiempo absolutos o relativos, valores de repetición, valores de eventos, etc.
Por ejemplo, en la siguiente demostración, el círculo naranja se mueve lentamente durante 30 segundos hacia el otro lado del lienzo. El círculo verde también está animado, pero la animación sólo comienza cuando haces clic en él.
La animación del círculo naranja terminará cuando comience la animación del círculo verde, por lo que cuando hagas clic en el círculo verde, el círculo naranja se detendrá.
HTML:
CSS:
svg (borde: 3px sólido #eee; pantalla: bloque; margen: 1em automático;)
Resultado
Por supuesto, se puede realizar la misma sincronización de animación para dos animaciones aplicadas al mismo elemento. Por ejemplo, digamos que configuramos una animación de color circular donde el color cambia indefinidamente de un valor a otro.
Y luego una animación que hace que el círculo se mueva cuando haces clic en él con el cursor del mouse. Ahora configuraremos el cambio de color para que se detenga después de hacer clic en el elemento y comience a moverse.
HTML:
CSS:
svg (borde: 3px sólido #eee; pantalla: bloque; margen: 1em automático;)
Resultado
Definir intervalos de animación utilizando múltiples valores de inicio y fin.
De hecho, tanto los atributos de inicio como de fin aceptan una lista de valores separados por comas. Cada valor en el atributo inicial tendrá un valor correspondiente en el atributo final, creando intervalos de animación activos e inactivos.
Se puede considerar como un automóvil en movimiento cuyas ruedas están activas o inactivas durante algún tiempo, dependiendo de si el automóvil está en movimiento o parado.
Incluso puedes crear una animación de un auto en movimiento aplicando los efectos apropiados: uno para mover el auto o moverlo a lo largo de un camino que usa animación agregada y acumulativa; el segundo es girar las ruedas a intervalos que estarán sincronizados con el movimiento.
Un ejemplo de configuración de múltiples tiempos de inicio y finalización de animación (es decir, intervalos) es la siguiente demostración, donde se gira un rectángulo en intervalos específicos, pasando de activo a inactivo.
(Reinicia la demostración si te perdiste la animación.).
HTML:
CSS:
svg (borde: 3px sólido #eee; pantalla: bloque; margen: 1em automático;)
Resultado
Cabe señalar que en el ejemplo anterior utilicé el elemento
También tenga en cuenta que incluso si configura repetirCount en indefinido, los valores finales lo anularán y la animación no se repetirá indefinidamente.
Limitar la duración de un elemento usando min y max
Así como puedes limitar el número o el tiempo que se repite una animación, puedes limitar la duración de una animación.
Los atributos min y max especifican la duración mínima y máxima de la animación, respectivamente. Nos dan la posibilidad de ajustar los límites superior e inferior de la duración de un elemento. Ambos atributos aceptan horas.
min especifica el valor mínimo de duración de la animación, medido por la duración del elemento. El valor de este atributo debe ser mayor o igual a 0 ( valor predeterminado donde la duración de la acción no está limitada en absoluto).
En max, el valor de horas indica el valor del valor máximo de la duración de la acción, medido por la duración del elemento. Su valor también debe ser mayor que 0. El valor predeterminado para max es indefinido. No limita en absoluto la duración de la acción.
Si se especifican ambos atributos, entonces el valor máximo debe ser mayor o igual que el valor mínimo. Si no se cumple este requisito, se ignoran ambos atributos.
Pero ¿qué determina la duración de la acción de un elemento? Mencionamos anteriormente que hay una duración para las repeticiones de la animación, esto es aparte de " duración simple", que es la duración de la animación sin repetirse ( indicado con dur).
Entonces, ¿cómo funciona todo en conjunto? ¿Qué es mayor prioridad? ¿Y qué pasa con el atributo final, reasigna valores o simplemente finaliza la animación?
Todo funciona así. El navegador primero calcula la duración de la actividad en función de los valores de dur, repetirCount, repetirDur y finalizar. Después de esto, el cálculo de la duración comienza según los valores mínimo y máximo.
Si el resultado de la primera etapa del cálculo está dentro del intervalo calculado durante la segunda etapa, entonces la duración calculada primero permanece vigente y no cambia. De lo contrario, son posibles dos escenarios:
- Si la primera duración calculada es mayor que el valor máximo, se determina que la duración del elemento es igual al valor máximo;
- Si la primera duración calculada es menor que el valor mínimo, la duración del elemento será igual al valor mínimo y el comportamiento del elemento será el siguiente;
- Si la duración de las repeticiones ( o duración simple si el elemento no se repite) del elemento es mayor que min , entonces el elemento se reproduce en el tiempo estándar (incluido min ) de la duración de la acción;
- De lo contrario, el elemento se reproduce durante la duración de repetición estándar ( o duración simple si el elemento no se repite), y luego se congela y no se muestra en absoluto, según el valor del atributo de relleno.
Esto nos lleva a la pregunta de cómo calcula realmente el navegador la duración de una actividad. En aras de la brevedad, no entraré en detalles.
Pero la especificación contiene una tabla muy detallada que muestra las diferentes combinaciones de dur, repetirCount, repetirDur y end atributos y cómo se determinará la duración de la animación en función de cada combinación.
Puede ver esta tabla y obtener más información en esta sección de la especificación.
Finalmente, si el elemento está definido para comenzar antes de que comience el elemento padre ( por ejemplo, simplemente usando un valor de compensación negativo), la duración mínima estará determinada por el valor calculado en la primera etapa, y no se incluirá en el intervalo de validez del elemento padre.
Esto significa que el valor mínimo no tendrá un efecto perceptible en la animación del elemento.
Ejemplo : transformar caminos
Uno de los atributos que se pueden animar a través de SMIL ( pero para el cual no puedes configurar la animación a través de CSS), es un atributo de
El atributo d contiene datos que definen el contorno de la forma o forma que estás creando. Estos datos de contorno consisten en un conjunto de comandos y coordenadas que le indican al navegador dónde y cómo dibujar los puntos, arcos y líneas que conforman el contorno final.
Al animar este atributo, podemos transformar contornos SVG y crear efectos. metamorfosis de figuras.
Pero, para poder transformar formas, el inicio, el final y todas las formas intermedias deben tener el mismo número de vértices/puntos y deben aparecer en el mismo orden. Si el número de vértices de diferentes formas no coincide, la animación no funcionará.
La razón de esto es que la transformación de formas en realidad se realiza moviendo los vértices e interpolando sus posiciones. Entonces, si falta un vértice o no coincide con el orden de salida general, el contorno no se puede interpolar.
Para animar un esquema SVG, necesitamos establecer el atributo NombreAtributo en d y luego establecer los valores desde y hasta, que definen las formas inicial y final. También puede utilizar el atributo de valores para definir cualquier valor intermedio que la ruta debe tomar cuando se transforma.
En aras de la brevedad, no entraré en detalles sobre cómo hacer esto. En cambio, puedes leer este excelente artículo de Noah Blon, en el que explica cómo creó la figura transformadora utilizando
HTML:
CSS:
cuerpo ( altura: 100vh; alineación de texto: centro; tamaño de caja: cuadro de borde; parte superior de relleno: calc(50vh - 56px); ) img, svg ( pantalla: bloque en línea; alineación vertical: medio; ) svg (alto: 38px; ancho: 38px; pantalla: bloque en línea;)
// Inyectar la imagen ayuda a mantenerlas sincronizadas $(document).ready(function())( $("img").attr("src", "http://dab1nmslvvntp.cloudfront.net/wp-content/ cargas /2014/08/1407310358spinner-cropped.gif"); ));
Resultado
Y aquí hay otro ejemplo de transformación de Felix Ornoy:
HTML:
CSS:
Resultado
Incluso puedes usar una ruta de transformación para recortar el fondo circundante y definir una figura específica. Aquí hay un ejemplo de Heather Bushel:
HTML:
SCSS:
$base: #C8C8A9; $primaria: #FE4365; cuerpo (fondo: $base; alineación de texto: centro;) svg (posición: absoluta; arriba: 50%; izquierda: 50%; margen superior: -60px; margen izquierdo: -60px;) .logo (relleno: $primario; ) .clip ( animación: diapositiva 8s infinita; ) @keyframes diapositiva ( de ( transformar: traducirY(-135px); ) 50% ( transformar: traducirY(-5px); ) a ( transformar: traducirY(-135px) ; ) )
Resultado
Animación a lo largo de un camino libre: elemento
Elemento
Especificación de una ruta de movimiento utilizando el atributo de ruta
El atributo de ruta se utiliza para indicar la ruta de movimiento. Se representa en el mismo formato y se interpreta de la misma manera que el atributo d para el elemento de ruta.
El efecto de animar el movimiento a lo largo de una ruta es agregar una matriz de transformación adicional a la matriz actual del objeto asociado, lo que hace posible especificar el movimiento del objeto a lo largo de los ejes x e y del sistema de coordenadas del usuario actual calculando el Valores X e Y para cada momento en el tiempo.
En otras palabras, la ruta especificada se calcula en relación con la posición actual del elemento, utilizando los datos de la ruta para transformar el elemento en copias del mismo correspondientes a diferentes posiciones de la ruta.
Queremos animar nuestro círculo para que se mueva a lo largo de un camino que se ve así:
El código necesario para hacer que el círculo se mueva por este camino es el siguiente:
Hay una cosa sobre la que quiero llamar su atención: las coordenadas en los datos de la ruta. El camino comienza desplazándose (M) hasta un punto de coordenadas (0, 0), tras lo cual comienza a describir una curva (c) hasta otro punto.
Es importante que comprenda que el punto (0, 0) es en realidad la posición inicial del círculo, independientemente de dónde esté al inicio de la animación de movimiento; NO es la esquina superior izquierda del sistema de coordenadas. Como mencionamos anteriormente, las coordenadas del atributo de ruta están vinculadas a la posición actual del elemento.
La salida del código anterior será la siguiente:
HTML:
CSS:
* ( tamaño de caja: border-box; ) .cont ( altura: 100vh; relleno: 20vmin; -webkit-filter: contraste(10); color de fondo: blanco; ) svg ( ancho: 100%; altura: 100% ; opacidad: 0,9; -filtro webkit: desenfoque (3px);)
Resultado
Si especificó el comienzo de la ruta en un punto con coordenadas distintas a (0, 0), entonces el círculo daría un salto brusco al punto en las coordenadas especificadas antes de que comenzara la animación.
Por ejemplo, digamos que dibujó una ruta en Illustrator y luego exportó los datos de esa ruta para usarlos como ruta de movimiento ( esto es lo que hice la primera vez que trabajé con este elemento); la ruta exportada podría verse así:
El punto de partida del camino en este caso será (100.4, 102.2). Si usáramos estos datos como ruta de movimiento, el círculo saltaría repentinamente aproximadamente 100 unidades hacia la derecha y 102 unidades hacia abajo antes de que comenzara la animación, y luego comenzaría a moverse a lo largo de la ruta en relación con la nueva posición. Por lo tanto, verifique los datos cuidadosamente al preparar la ruta de movimiento para la animación.
Los atributos de, por, hasta y valores ( si se usa) indican la forma del lienzo actual, que representa la ruta de movimiento.
Especificación de una ruta de movimiento utilizando un elemento
También hay otra forma de especificar la trayectoria del movimiento. En lugar de utilizar el atributo de ruta asociado, puede hacer referencia a una ruta externa utilizando el elemento
Trayectoria de movimiento
Tenga en cuenta que según la especificación:
Los diversos puntos (x, y) de la forma proporcionan una matriz de transformación CTM adicional para relacionarse con el objeto, lo que da como resultado un movimiento a lo largo de los ejes x e y del sistema de coordenadas actual del usuario mediante el cálculo de los valores de la forma (x, y). para cada segmento de tiempo. De esta manera, el objeto asociado se mueve durante un período de tiempo, con la trayectoria de movimiento del objeto desplazada al sistema de coordenadas original del usuario actual. Se aplican transformaciones adicionales en la transición de cualquier transformación, gracias a la propiedad transform del elemento de destino, o en la transición de cualquier animación de ese atributo, gracias al elemento animateTransform del elemento de destino.
Nuevamente, el círculo se "multiplica" o "transforma" en otros círculos en otros puntos, según las coordenadas de los datos del camino.
En el siguiente ejemplo tenemos un camino en el medio del lienzo. El círculo se coloca al inicio del camino. Sin embargo, cuando se aplica esta ruta, el círculo no comienza a moverse desde su posición actual. Para una mejor comprensión, mire la versión de demostración. Haga clic en el círculo para animarlo.
HTML:
Haga clic en el círculo para iniciar la animación.
CSS:
svg ( borde: 3px sólido #eee; pantalla: bloque; margen: 1em auto; ) p ( color: #aaa; alineación de texto: centro; margen: 2em 0; )
Resultado
¿Ves cómo el círculo sigue la misma forma pero en una ubicación diferente? Esto se debe a que la posición del círculo se convierte según los valores de los datos de la ruta.
Una forma de resolver este problema es establecer el círculo en (0, 0) de modo que cuando se utilicen los datos de la ruta para transformarlo, comience a moverse y se mueva como se esperaba.
Otra forma es aplicar una transformación que "restablece" las coordenadas del círculo para que se establezcan en cero antes de aplicar la ruta.
A continuación se muestra una versión modificada de la demostración anterior que utiliza un camino cerrado y repite la animación de movimiento un número infinito de veces.
HTML:
CSS:
svg ( borde: 3px sólido #eee; pantalla: bloque; margen: 1em auto; ) p ( color: #aaa; alineación de texto: centro; margen: 2em 0; )
Resultado
Redefiniendo las reglas
Dado que hay varias formas de hacer lo mismo con animateMotion, solo tiene sentido anular las reglas para especificar qué valores se reemplazan por otros valores.
Anular reglas para animateMotion:
- Cuando se trata de definir una ruta de movimiento, el elemento mpath anula el atributo de ruta, que a su vez anula los valores, y los valores anulan desde, por y hasta;
- En cuanto a definir el punto correspondiente a los atributos keyTimes, el atributo keyPoints anula el atributo de ruta, la ruta anula los valores y los valores anulan desde, por y hasta.
Establecer la orientación de un elemento a lo largo de una ruta de movimiento usando rotar
En nuestro ejemplo anterior, el elemento para el cual configuramos la animación para que se moviera a lo largo de un camino era un círculo. Pero, ¿qué pasa si animamos un elemento que tiene una orientación específica, como, por ejemplo, el ícono de un automóvil?
El icono del coche del siguiente ejemplo fue creado por Freepik.
En este ejemplo, reemplacé el círculo con un grupo con el identificador "auto", que contiene el elemento que conforma el grupo.
Luego, para evitar los problemas de movimiento de trayectoria mencionados anteriormente, apliqué una transformación al automóvil que lo mueve una cierta distancia para que la posición inicial se establezca en (0, 0).
Los valores dentro de las transformaciones son en realidad las coordenadas del punto en el que comienza la primera trayectoria del coche ( inmediatamente después del comando de movimiento M).
Entonces el coche comienza a moverse a lo largo de la trayectoria. Pero... así es como se ve este movimiento:
HTML:
CSS:
svg ( borde: 3px sólido #eee; pantalla: bloque; margen: 1em auto; ) p ( color: #aaa; alineación de texto: centro; margen: 2em 0; )
Resultado
La orientación del vehículo es fija y no cambia en ningún punto de la trayectoria. Para cambiar esto necesitamos usar el atributo de rotación.
El atributo de rotación toma uno de tres valores:
- auto: indica que el objeto se gira en un ángulo con respecto a la dirección ( aquellos. vector tangente) trayectorias de movimiento;
- inversión automática: indica que el objeto se gira en un ángulo con respecto a la dirección ( aquellos. vector tangente) trayectoria de movimiento más 180 grados;
- número: especifica que se aplica una transformación de rotación constante al elemento de destino, donde el ángulo de rotación es igual al número especificado en grados.
Para ajustar la orientación del automóvil en el ejemplo anterior, comenzaremos configurando el valor de rotación en auto. Y obtenemos el siguiente resultado:
HTML:
CSS:
svg ( borde: 3px sólido #eee; pantalla: bloque; margen: 1em auto; ) p ( color: #aaa; alineación de texto: centro; margen: 2em 0; )
Resultado
Si desea que el automóvil se mueva hacia el exterior del área del camino, esto se hace usando el valor de retroceso automático.
Haga clic en el círculo para animarlo.
CSS:
svg ( borde: 3px sólido #eee; pantalla: bloque; margen: 1em auto; ) p ( color: #aaa; alineación de texto: centro; margen: 2em 0; )
Resultado
Esto es mucho mejor, pero todavía tenemos un problema: ¡el coche circula al revés! Para cambiar esto, debemos girarlo a lo largo de su propio eje y. Esto se puede hacer escalando por un factor de "-1" a lo largo de este eje.
Entonces, si aplicamos una transformación a g con ID car, el auto se moverá como queramos. La transformación de escala solo debe alternarse con la transformación que aplicamos anteriormente.
Y la demostración final se verá así:
HTML:
CSS:
svg ( borde: 3px sólido #eee; pantalla: bloque; margen: 1em auto; ) p ( color: #aaa; alineación de texto: centro; margen: 2em 0; )
Resultado
Controlar la distancia de la animación desde la ruta de movimiento usando puntos clave
El atributo keyPoints nos permite especificar la distancia desde la ruta de movimiento para cada uno de los valores keyTimes especificados. Si se especifica el atributo keyPoints, esto hace que keyTimes se aplique a los valores de keyPoints en lugar de a los puntos especificados en la matriz de atributos de valores o los puntos de atributos de ruta.
keyPoints toma una lista de valores decimales separados por punto y coma de 0 a 1 y especifica qué tan lejos de la ruta de movimiento debe moverse el objeto en el momento especificado por los valores keyTimes correspondientes.
Los cálculos de distancia están determinados por algoritmos del navegador. Cada valor subsiguiente en la lista corresponde a un valor en la lista de atributos thekeyTimes. Si se especifica la lista de puntos clave, debe contener exactamente la misma cantidad de valores que la lista de momentos clave.
El atributo keyPoints no es compatible con Chrome y Firefox en el momento de escribir este artículo. Aún no está implementado, al igual que las otras partes de la especificación que mencioné anteriormente.
Mover texto a lo largo de una ruta arbitraria
Mover texto a lo largo de una ruta personalizada es diferente a mover otros elementos SVG a lo largo de una ruta. Para animar el texto necesitarás usar el elemento.
Primero, coloquemos algo de texto a lo largo del camino. Esto se puede hacer anidando un elemento.
El texto que se colocará a lo largo del camino se definirá dentro del elemento.
Luego, textPath hará referencia a la ruta real que queremos usar, tal como lo hicimos en los ejemplos anteriores. De manera similar, la ruta puede mostrarse en el lienzo o definirse internamente.
HTML:
CSS:
Resultado
Para animar el movimiento del texto a lo largo de este camino, usaremos el elemento
startOffset muestra el desplazamiento del texto a lo largo del camino. 0% es el inicio del viaje; 100% es el final. Entonces, si, por ejemplo, el desplazamiento se establece en 50%, el texto comenzará en el medio del trazado. Creo que ya has adivinado lo que haremos a continuación.
Al animar startOffset crearemos el efecto del texto moviéndose a lo largo del camino. Eche un vistazo al código de la siguiente demostración.
HTML:
CSS:
svg (borde: 3px sólido #eee; pantalla: bloque; margen: 1em automático;) texto (relleno: rosa profundo; tamaño de fuente: 2em;)
Resultado
Transformar animación: elemento
Elemento
El atributo type se utiliza para especificar el tipo de transformación que estamos animando. Se necesita uno de cinco valores: traducir, escalar, rotar, sesgarX y sesgado.
Los atributos from, by y to toman valores expresados usando la misma sintaxis disponible para este tipo de conversión:
- + Para type="translate" , cada valor individual se expresa como
[, ]; - + Para type="scale" , cada valor individual se expresa como
[, ]; - + Para type="rotate", cada valor individual se expresa como [
]; - + Para type="skewX" y type="skewY" , cada valor individual se expresa como
.
Volvamos a la demostración anterior donde rotamos el rectángulo rosa usando el elemento
Los atributos desde y hasta especifican el ángulo de rotación (inicio y final) y el centro de rotación. Para ambos, el centro de rotación sigue siendo el mismo, por supuesto. Si no especifica un centro, será la esquina superior izquierda del lienzo SVG. La demostración del código anterior se ve así:
HTML:
CSS:
svg (borde: 3px sólido #eee; pantalla: bloque; margen: 1em automático;)
Resultado
A continuación se muestra otro ejemplo divertido con un único animateTransform creado por Gabriel:
HTML:
CSS:
* ( margen: 0; relleno: 0; ) html, cuerpo ( altura: 100%; ) cuerpo ( fondo: #FC0; ) svg ( posición: fijo; arriba: 20%; altura: 60%; izquierda: 20%; ancho: 60%);
Resultado
Animar una única transformación es bastante sencillo, sin embargo las cosas pueden volverse realmente complicadas y confusas cuando tenemos múltiples transformaciones habilitadas. Especialmente porque un elemento animateTransform puede anular a otro, por lo que en lugar de una serie consistente de efectos podríamos terminar con algo completamente opuesto.
Esto se suma a lo complejos que son el sistema de coordenadas SVG y las transformaciones. Puede haber una gran cantidad de casos especiales diferentes y su consideración está fuera del alcance de este artículo.
Para transformar SVG, recomiendo usar transformaciones CSS. Las últimas soluciones funcionan muy bien con SVG, por lo que es posible que no necesite SMIL para animar transformaciones en SVG.
Elemento
El elemento set proporciona un medio sencillo para establecer el valor de un atributo durante un tiempo específico. Admite todo tipo de atributos, incluidos aquellos que no se pueden interpolar, como cadenas y booleanos.
El elemento establecido no se puede agregar. Los atributos agregados y acumulados no están permitidos y se ignorarán si se especifican.
Porque
Para un elemento establecido, puede especificar el elemento de destino, el nombre y tipo del atributo, el valor de destino y una animación de tiempo, que se puede controlar con: comenzar, dur, finalizar, min,max, reiniciar, repetirCount, repetirDur y llenar.
A continuación se muestra un ejemplo que establece el color de un rectángulo giratorio en azul después de hacer clic con el mouse. El color permanece azul durante 3 segundos y luego vuelve a su valor original. Cada vez que hagas clic en el rectángulo, se iniciará una animación y el color cambiará durante 3 segundos.
HTML:
CSS:
svg (borde: 3px sólido #eee; pantalla: bloque; margen: 1em automático;)
Resultado
Elementos, atributos y propiedades que se pueden animar.
No todos los atributos SVG se pueden animar y no todos los atributos que se pueden animar se pueden animar utilizando todos los elementos de animación.
Para obtener una lista completa de todos los atributos que se pueden animar y qué elementos se pueden usar para animarlos, consulte esta sección de la especificación de animación SVG.
Conclusión
SMIL tiene mucho potencial y sólo he arañado la superficie de algunos de los principios básicos y aspectos técnicos. Puedes crear muchos efectos impresionantes usando la especificación, especialmente con morphing y transformación de formas.