Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Animation

Cómo Utilizar Variables CSS para Animación

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Jean Perez (you can also view the original English article)

Cuando mencionamos CSS en las discusiones a menudo hablamos de él como una lengua medio tonto. Un lenguaje declarativo, que carecen de lógica y conocimiento; pero eso no es la verdadera realidad. Durante años, los desarrolladores han tenido antojo de variables en CSS estándar, despojando los procesadores como menos y Sass para no sea tan de largo. No sólo son variables CSS una opción real y tangible para los desarrolladores, también pueden ser utilizados en escenarios de animación. ¿Todavía escéptico? ¡Seguir para averiguar más!

Variable Básicas

CSS las variables son valores almacenados destinados a reutilizar a lo largo de una hoja de estilo. Que están accesible mediante la función var() personalizado y utilizando la notación de propiedad personalizada.

Las variables definidas dentro de :root son globales, mientras que las variables definidas dentro de un selector son específicas para ese selector.

En el ejemplo anterior cualquier div aceptará la variable, pero podríamos conseguir más específicas con nombres de métodos objetivos como la class y id por ejemplo.

La función var() también puede aceptar valores de reserva.

Esto puede ser útil en situaciones cuando una variable no está definida aún, o cuando se trabaja con elementos personalizados y la sombra DOM.

Variables CSS no absolutamente listas para el prime time, pero las perspectivas para el futuro son muy brillante con muchos navegadores principales ya implementando la especificación. Es sólo cuestión de tiempo hasta que pueden ser utilizados sin ningún tipo de preocupaciones, y se acerca rápidamente.

Variables para Animación

Hay muchas opciones para combinar variables CSS con animación. Pensar en contextos tales como visualizaciones de audio, escenarios de eventos de JavaScript y CSS incluso impulsada por eventos como el hoverfocus y target. En teoría, un Apple Watch podría conectarse a un API que usa animación basada en la variable CSS de un corazón que late. Entonces tenemos acelerómetros, inclinación del dispositivo APIs y gamepad incluso APIs, pero ¿por qué deberíamos considerar animación con CSS Variables en todo? Aquí están algunas razones:

  • Fácilmente depurable.
  • Sin excesiva manipulación del DOM.
  • Nodo DOM independiente.
  • Tematización
  • Funciona con SVG.

Operaciones de CSS son realmente la pieza clave para el rompecabezas entero con animaciones. Funciones CSS como calc pueden aceptar un valor en tiempo de ejecución y ejecutar operadores tales como multiplicación, división, adición, sustracción, mutando los valores en un nuevos. Esto ayuda a que las variables CSS dinámico.

Variables CSS en JavaScript

Ahora que sabemos qué aspecto variables CSS y lo que pueden hacer es la hora de comprender cómo JavaScript encaja en todo esto.

Los métodos descritos se utilizan para establecer, conseguir y sacar valores de propiedad. Pueden ser utilizados para nuestras típicas propiedades CSS (background-colorfont-size etcetera), pero puede también utilizar para las variables de la CSS también. Estas opciones establecerá un nuevo valor para la propiedad definida a nivel mundial si no conocido como :root en CSS.

También son el verdadero secreto para animar con variables CSS, ya que nuestros métodos JS pueden obtener, fijar o quitar dinámicamente variable en tiempo de ejecución.

También puede establecer un nuevo valor para un elemento específico si lo desea. En el ejemplo de fragmento sobre el está manipulando una variable que se une a un selector div versus está conectado a nivel mundial.

Demos en la Selva

Hay un montón de impresionantes y extremadamente talentosos desarrolladores construir y experimentar con los conceptos de reactivos y temáticas animaciones utilizando variables CSS. Aquí están unos pocos corrales para descubrir lo que está sucediendo debajo de la campana.

Puesta de Sol/Amanecer

Por David Khourshid.

Este ejemplo muestra el poder de animaciones variable CSS de forma temática. Generalmente sería dos veces más código para ejecutar esta demo sin CSS variables y muchas veces más si se desea superar dos temas.

Animación de Variables CSS

Por GRAY GHOST.

Este es otro ejemplo usando eventos de mouse en JavaScript que la ubicación de un círculo.

Cada vez que mueves el ratón JavaScript actualiza nuestras variables declaradas, permitiendo que el círculo de posición en relación con el cursor.

Alex el Husky CSS

Por David Khourshid.

Aquí es el mismo principio demostrado arriba, pero en otro contexto.

¿Observe lo que sucede cuando se mueve el ratón? ¿Cool EH?

Animación con Variables CSS

Por Wes Bos.

¿Por qué actualizar los valores de las variables de otras maneras? Echemos un vistazo a la siguiente demo por Wes Bos usando cursores para actualizar la posición de una imagen.

Mueva los controles deslizantes en su tiempo libre. ¿Cuenta de la frescura que resulta? Simple, pero simplemente mágica y todo es hacer es actualizar las variables para la posición de transformación cada vez que se ajustan los controles deslizantes. ¡Suuuuhhhweeet!

Acordeón Div (animado con CSS Variables)

Por Dan Wilson.

¿Qué tal algo un poco diferente a los músicos por ahí? Si deseas este acordeón por Dan Wilson.

¡Whoa! ¡Ver esas teclas mover! Esto puede parecer un poco intimidante para recorrer, pero el núcleo es sólo JavaScript actualizar variables CSS. Nada más y nada menos.

Variables CSS + Transformación = Propiedades Individuales (con entradas)

Por Dan Wilson.

En esta demo, utilizar los rangos de entrada para modificar cada propiedad de transformar y ser testigo de cómo incluso si se cambia una propiedad mediados de transición.

Efectos Secundarios de Variables CSS

Como variables CSS siempre que se puede heredar propiedades, pueden causar un recálculo, afectando negativamente rendimiento en el proceso. Se trata de algo que tiene que medir, en lugar de adivinar dependiendo de su contexto.

Aquí es un demo Shaw publicada en el grupo Animation at Work que se utilizó para la prueba: Prueba de Estilo CSS Variables Recalc

Durante las pruebas (Chrome 58. Mac 10.12) se descubrió que cuando se activa el botón de Set CSS Var hasta el momento el navegador pinta el fondo hay 52.84ms de tiempo recalc y 51.8ms representación. Cambio de engranajes para la prueba de la propiedad CSS es descubierto un resultado muy diferente. Desde que el botón  Establece la Propiedad del CSS se dispara hasta las pinturas de fondo es aproximadamente 0.43ms de recalc y 0.9ms prestación.

Si cambia el background a color obtendrás medidas equivalentes desde currentColor podría o no podría existir en los hijos (Preguntado por David Khourshid). Cualquier propiedad que se puede heredarble siempre hará un estilo recalc para cualquier y todos los hijos. El background-color de la propiedad no es heredable, por lo tanto, la gran diferencia con las variables de la CSS que siempre son heredables. Por lo general propiedades CSS que por defecto inherit será en la mayoría de los casos causan un recalc de estilos largos. Sigue siendo importante tener en cuenta que cambiar continuamente variables CSS puede ser un drenado de rendimiento. Una buena práctica para evitar esto es para animar variables CSS nivel a lo más específico (o nivel más profundo), con el fin de evitar una multitud de hijos afectados. Usted puede leer más acerca de Reducir el alcance y la Complejidad de los Cálculos de Estilo via Fundamentos Web de Google.

Conclusión

Animo todos a bucear en esta demo de prueba por vosotros mismos y hacer sus propias pruebas de conclusión/cambios/custom y compartir sus resultados en los comentarios. El punto principal en todo esto es que las variables CSS ofrecen gran flexibilidad, pero habrá implicaciones de rendimiento para la configuración de variables CSS en un padre con una gran cantidad hijos.

Agradecimiento especial a la banda en el canal de Animations At Work de curso pruebas, comentarios y discusiones (David Khourshid, Joni Korpi, Dan Wilson y Shaw).

Recursos

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.