Cómo Codificar Imágenes en React con SVG

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

¿Alguna vez necesitaste un ícono de menú de hamburguesa y buscaste uno en una biblioteca de íconos? En realidad, son solo unas pocas líneas de código con SVG. Y los SVGs combinados con React abren todo un nuevo mundo. Puedes generar diagramas, gráficos o animaciones, crear un juego o aplicación interactiva. Vamos a recorrer los conceptos básicos de la sintaxis.

This talk has been presented at React Day Berlin 2024, check out the latest edition of this React Conference.

Hunor Márton Borbély
Hunor Márton Borbély
22 min
16 Dec, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla de hoy trata sobre codificar imágenes en React con SVGs. Los SVGs son poderosos cuando se combinan con JavaScript y se pueden usar para crear elementos interactivos. Comprender la sintaxis y el posicionamiento de SVG es importante, ya que los elementos SVG están limitados a elementos específicos de SVG. El elemento círculo en SVG se puede estilizar y usar para crear formas. El elemento rectángulo se usa comúnmente para gráficos y se puede personalizar. El elemento path ofrece flexibilidad y se puede construir a partir de múltiples segmentos. Las transformaciones y curvas se pueden usar para crear formas complejas y animaciones. Las curvas de Bezier, tanto cuadráticas como cúbicas, son útiles para doblar líneas y crear transiciones suaves. Las características avanzadas como dibujar arcos están disponibles en SVG. Para más ejemplos y casos de uso, visita svgtutorial.com.

1. Introducción a SVG en React

Short description:

Hoy voy a hablar sobre cómo codificar imágenes en React con SVGs. Los SVGs se vuelven muy poderosos una vez que comienzas a combinarlos con JavaScript. También puedes hacer cosas interactivas, como en el caso de este selector de color. Y puedes llevar esto al siguiente nivel y crear un editor, como este simulador de puertas lógicas. El último ejemplo es el juego de Gorillaz, que utiliza HTML canvas. HTML canvas y SVG tienen conceptos bastante similares.

¡Hola a todos! Mi nombre es Hunor y hoy voy a hablar sobre cómo codificar imágenes en React con SVGs. Y si te preguntas por qué decodificamos una imagen, aquí tienes un par de ejemplos.

Los SVGs se vuelven muy poderosos una vez que comienzas a combinarlos con JavaScript. En este ejemplo, estamos uniendo esta esfera de reloj con elementos SVG y luego estamos girando las manecillas del reloj a la posición con JavaScript. También puedes crear animaciones o generar una infografía o un gráfico. En este caso, estamos uniendo esta animación con un componente de React. En caso de que necesites visualizar algunos datos, puedes lograrlo combinando JavaScript y SVGs. También puedes hacer cosas interactivas, como en el caso de este selector de color, si estoy arrastrando estos controladores, entonces los colores están cambiando, los valores están cambiando. Y lo interesante aquí es que estos controladores que estoy arrastrando no son una superposición sobre una imagen. Son parte de la imagen SVG en sí. Así que puedes asignar un controlador de eventos a parte de un SVG de la misma manera que asignarías un controlador de eventos a cualquier otro elemento HTML. Y puedes llevar esto al siguiente nivel y crear un editor, como este simulador de puertas lógicas. Este es completamente interactivo. Así que si hago clic en las entradas, la salida cambiará. Puedo arrastrar cosas, puedo agregar nuevos elementos, puedo romper conexiones y hacer nuevas conexiones. Y todo esto es un gran React, es un gran SVG que se construye a partir de múltiples componentes. Tenemos un componente para esta puerta, para esta puerta, para las conexiones que están conectando las diferentes puertas, para las entradas, para las salidas. Y luego, a partir de estos pequeños componentes que están todos construidos con React, podemos simplemente ensamblar este gran SVG.

Ahora, el último ejemplo que quiero mostrarles hoy es este juego de Gorillaz. Y este es un poco de un huevo de Pascua, porque en realidad no está usando SVG, aparte de este molino de viento que vamos a cubrir. Pero este está usando HTML canvas. La razón por la que todavía quería mostrarles hoy es que HTML canvas y SVG tienen conceptos bastante similares. También tienen formas básicas, como para los edificios en este caso. Y también podemos construir formas más complejas a partir de diferentes segmentos de ruta, como líneas rectas y curvas y arcos. Así que en este caso, el cuerpo del gorila se construye a partir de una ruta que utiliza líneas rectas. Luego, el brazo del gorila es una gran curva que se define como una curva de Bezier cuadrática a partir de diferentes propiedades. Y puedes definir una curva de Bezier cuadrática de la misma manera básicamente en HTML canvas y en SVG, aunque uno está en JavaScript y el otro está en HTML, pero tienen los mismos parámetros. Así que volveremos a esto una vez que estemos hablando de curvas. Y ahora veamos si puedo golpear al enemigo. ¡Y sí! Bien, así que después de esta introducción, veamos el código fuente de un SVG básico y recorramos algunas formas básicas, estilos y algunas formas más avanzadas.

2. Understanding SVG Syntax and Positioning

Short description:

La sintaxis SVG se basa en XML y puede estar en línea en HTML. Los elementos SVG están limitados a elementos específicos de SVG y no pueden usar elementos HTML regulares. El elemento SVG tiene propiedades de ancho, alto y view box. El view box define el sistema de coordenadas para posicionar elementos. Las imágenes dentro del view box se posicionan usando coordenadas.

Así que este está mostrando un círculo, un círculo rojo, y eso es básicamente todo. Como ves, la sintaxis se basa en XML. Y lo genial de esto es que desde HTML5, puedes simplemente incluir todo esto dentro de HTML.

Ahora, por supuesto, hay algunos límites estrictos aquí. Así que dentro del elemento SVG, solo podemos tener elementos específicos de SVG, como el círculo. No podemos tener un header o un párrafo o un div. Si quieres tener un texto, entonces podemos usar el elemento text. Si quieres agrupar cosas, entonces podemos usar el elemento group. Así que hay elementos similares, pero no podemos usar los elementos HTML regulares a los que estamos acostumbrados. Y esto también funciona al revés. Así que no podemos usar el elemento circle fuera del elemento SVG porque para posicionar este círculo, necesitamos tener un sistema de coordenadas y eso lo define el elemento SVG.

Ahora, ¿por qué estamos hablando de esto? Por supuesto, podemos simplemente generar todo esto con un componente de React. Y no solo así, sino que también podemos descomponer un SVG más complejo en múltiples componentes y luego ensamblarlos juntos. Ahora echemos un vistazo más de cerca al elemento SVG. Como vemos, tiene un ancho y un alto, y también tiene una propiedad view box, que también define un ancho y un alto. Así que veamos esto. Aquí tenemos dos imágenes, y tienen el mismo contenido. Ambas imágenes tienen un círculo con una posición central en 100, 100, y el radio de 50.

Esta es la misma definición exacta de círculo. Ahora, la imagen de la izquierda es obviamente más pequeña, y eso es porque el ancho y el alto son más pequeños. Esto está afectando el tamaño real de la imagen. Y luego tenemos esta propiedad view box, que está definiendo el sistema de coordenadas, que ha definido el lienzo en el que podemos dibujar. Y esto dice en ambos casos que el sistema de coordenadas comienza en 0, 0 en ambos casos, y el ancho y el alto es 200, 200 cada uno, lo cual no es una unidad de píxel. Esta es una unidad arbitraria que es utilizada por el elemento de imagen. Así que en ambos casos, estos círculos, piensa en el espacio disponible como un lienzo de 200 por 200 unidades de ancho y alto. Y si posicionamos este círculo en 100, 100, entonces estarán en el centro de la imagen, sin importar cuán grande sea la imagen real. Todo lo que importa para los elementos de imagen es el view box. Usualmente esto está alineado, así que tenemos los mismos números en ambos casos, como en este caso, tenemos 200 en ambos casos. Pero si no coincide, entonces la imagen simplemente se reduce o se agranda.

3. Understanding Circle Element in SVG

Short description:

El elemento circle en SVG tiene una posición central y un radio para definir el tamaño. Por defecto, está relleno de negro, pero el color de relleno se puede cambiar usando CSS. El contorno del círculo se puede lograr usando las propiedades stroke y stroke width. Las propiedades de estilo se pueden mover a CSS, pero las propiedades que definen la forma, como la posición central y el radio, no se pueden mover.

Como vemos, el círculo tiene una posición central. No tenemos alineaciones como alinear a la izquierda o grid o flexbox o las alineaciones habituales de CSS. Necesitamos usar coordenadas.

Ahora, el view box no tiene que comenzar en 0, 0. También podemos comenzar en cualquier otro número. Así que en este caso, comenzamos en menos 100, menos 100 y el ancho y la altura siguen siendo 200. Y en este caso, el centro de la imagen estará en 0, 0. Y ni siquiera tenemos que decir eso para el círculo porque es el valor predeterminado.

Ahora, después de aclarar el view box, hablemos del elemento circle con un poco más de detalle. El elemento circle es una forma muy básica. Solo tiene una posición central como vimos y el radio para definir el tamaño. Ahora, por defecto, como ves, esto se va a llenar con un color negro. Si quieres cambiar eso, puedes establecer el color de relleno. Y aquí lo establecemos en rojo, pero podemos establecerlo en cualquier otro valor que sea válido en CSS para valores de color. Así que también podemos usar un valor de color hash. Podemos usar la función RGB y así sucesivamente.

Ahora, si no quieres llenar esta forma, pero queremos tener el contorno de ella, entonces podemos usar las propiedades stroke y stroke width. Esto es bastante similar a lo que tenemos en CSS para elementos HTML como el color del borde y el ancho del borde, pero dentro de SVG, tenemos que usar las propiedades stroke. Y también tenemos que decir específicamente que no queremos llenar este elemento porque de lo contrario, será negro. Ahora, lo genial de esto, si definimos esto en HTML o en un componente de React, entonces podemos mover todas las propiedades de estilo a CSS. Aquí podemos establecer una clase para el círculo, para el círculo en sí, no para toda la imagen, sino específicamente para cada elemento. Y luego podemos definir las propiedades de estilo en CSS. Solo podemos mover las propiedades de estilo, sin embargo. Así que no podemos mover las propiedades que realmente definen la forma en sí. Así que en el caso de un círculo, no podemos mover la posición central y no podemos mover el radio. Ahora, esto es cierto para el estilo, estas propiedades de estilo son verdaderas para cualquier otra forma también. Así que no voy a repetir cada vez.

4. Understanding Rectangle Element in SVG

Short description:

El rectángulo es otra forma básica en SVG, definida por su posición superior izquierda, ancho y altura. Se utiliza comúnmente para crear gráficos al mapear puntos de datos en rectángulos. Para gráficos más avanzados, se pueden usar bibliotecas como D3, que utilizan SVG. Sin embargo, SVG permite creaciones personalizadas también.

Así que tenemos el fill y el stroke, incluso si tienes un path o un rectangle o un circle.

Ahora veamos otra forma básica, que es un rectangle. Este también es muy simple. En lugar de tener una posición central, tenemos la posición superior izquierda y luego tenemos un width y tenemos un height y eso es todo. Ahora con este conocimiento, ya podemos dibujar un gráfico básico. Aquí hay un código fuente para un componente de React que está mapeando algunos puntos de datos en rectángulos. Y aquí para cada rectángulo, tenemos que averiguar la posición X e Y y el width y el height basado en los puntos de datos. Y eso es todo. Por supuesto, si necesitas un gráfico más avanzado, entonces probablemente vas a usar la biblioteca D3 u otra biblioteca de gráficos, que por cierto, muy probablemente usará SVG en su núcleo. Pero si quieres tener algo personalizado, puedes hacerlo tú mismo con SVGs.

5. Understanding Path Element in SVG

Short description:

Los rectángulos y círculos son agradables, pero el elemento path en SVG ofrece más flexibilidad. Puede construirse a partir de múltiples segmentos de path, incluyendo líneas rectas, curvas y arcos. Cada segmento de path define la posición final, y el segmento moveTo especifica la posición inicial. El path puede ser no continuo, y se pueden aplicar propiedades de estilo como stroke y strokeWidth. También se pueden usar transformaciones para definir la posición de la forma, permitiendo la rotación y reutilización de elementos path.

Ahora los rectángulos y círculos son agradables, pero si estás abriendo cualquier SVG, entonces vas a encontrar un elemento path dentro de él. Y el elemento path es básicamente un elemento de forma libre, que podemos construir a partir de múltiples segmentos de path. Podemos tener líneas rectas y curvas y arcos, etcétera. Así que intentemos desglosarlo y ver qué hay dentro de la definición de un path.

Aquí tenemos una línea simple. Y esta línea ya contiene dos segmentos separados. Primero tenemos un segmento moveTo, y luego tenemos un segmento lineTo. Cada segmento siempre define la posición final, por lo que el segmento lineTo define dónde termina la línea, pero no define dónde comienza. Por eso tenemos un segmento previo con el moveTo que describirá dónde comenzamos las cosas. Así que este es básicamente una M mayúscula, cada segmento siempre comienza con una letra. Luego solo tenemos una coordenada, que dice que simplemente nos movemos aquí, y desde aquí, dibujamos una línea recta aquí.

Ahora, por supuesto, podemos continuar esto, y podemos seguir dibujando líneas rectas a diferentes coordenadas. Pero lo que también podemos hacer es, en lugar de continuar este path, también podemos tener otro comando moveTo y tener un icono de menú de hamburguesa. Así que un path no tiene que ser continuo.

Ahora para el estilo, usamos las mismas propiedades de estilo que teníamos antes. Aquí no tenemos una propiedad fill porque este path no está rodeando ninguna región. Así que incluso si no configuras la propiedad fill, o si la configuras a cualquier color, no llenaría realmente nada. Pero configuramos un stroke y strokeWidth a una línea relativamente gruesa, y luego también configuramos esta propiedad strokeLineCap para tener los extremos de estas líneas redondeados.

Ahora con este segmento, el moveTo y lineTo, podemos tener algunos otros iconos si quieres, por ejemplo el icono de pantalla completa. Si abrieras el código fuente de YouTube, también encontrarías un SVG similar con una definición un poco más compleja, pero esencialmente solo un montón de moveTo, lineTo, lineTo, moveTo, lineTo, lineTo, el mismo patrón una y otra vez. Ahora después de hablar sobre estos segmentos básicos de path, hablemos sobre las transformaciones.

Como dije antes, cada forma está definida por coordenadas, y ya podríamos dibujar esto porque ya conocemos el elemento circle y sabemos cómo dibujar una línea básica, pero necesitaríamos algunos cálculos de trigonometría para averiguar esta posición, por ejemplo. Y en lugar de eso, podemos usar transformaciones. Así que simplemente comenzamos con un círculo y luego tenemos una línea simple, que simplemente va de aquí a aquí. Eso es todo. Tiene un segmento moveTo y un segmento lineTo. Luego lo que podemos hacer es asignarle un ID, y luego podemos reutilizar este path con el elemento use, que se refiere de nuevo al path por ID, y aplica una transformación. Así que para cada uno de estos rayos de sol, simplemente lo movemos, simplemente lo rotamos 45 grados.

6. Using Transformations and Curves in SVG

Short description:

No tenemos que averiguar la posición y podemos seguir rotando los elementos. El centro del sistema de coordenadas es la coordenada cero, cero. Podemos crear formas más complejas, como el molino de viento, agrupando elementos y aplicando transformaciones. Podemos animar la rotación usando animaciones de fotogramas clave en CSS. Las curvas, como las curvas de Bezier cuadráticas y cúbicas, añaden más interés a las formas.

De esta manera no tenemos que averiguar dónde está, dónde está realmente esta posición o esta posición, simplemente seguimos rotándolos. También es importante notar que esto funciona en este caso porque el centro del sistema de coordenadas está en el medio de la imagen, así que esa es la coordenada cero, cero, porque el cuadro de vista está definido de una manera que comienza en menos 15, menos 15, y termina en 30, 30.

Y por cierto, el ancho y la altura son completamente independientes, aunque el tamaño interno es 30 por 30, el tamaño real es 200 por 200. Ahora con esta lógica, podemos crear otras cosas como el molino de viento que vimos en el juego de Gorilla. Si revisas el código fuente, tenemos un par de cosas de las que no hemos hablado antes, así que vamos a recorrer el código de este. En la parte inferior tenemos este path, que es el soporte del molino de viento. Esto es solo un move to y un montón de line to para dibujar este soporte.

Y ahora para el resto, tenemos el elemento group, que está agrupando el resto del molino de viento. Un elemento group es muy parecido a un elemento div, por lo que por sí solo no hace mucho. Pero si tuviera algunas propiedades, como la propiedad fill, entonces se aplicaría a los hijos. Y en este caso, como estamos animando todo, podemos simplemente animar este grupo en lugar de cada hijo individualmente. Ahora dentro de este grupo tenemos el círculo, que está en el centro. Tenemos un path para uno de estos brazos, que se construye a partir de un move to y un par de segmentos line to. También tiene este segmento C mayúscula, que es una curva de Bezier cúbica. Como ves, esto no solo tiene una coordenada sino un par de parámetros más. Vamos a hablar de esto en un momento. Y luego simplemente reutilizamos este brazo con el elemento use y, nuevamente, aplicamos transformación para tener tres brazos diferentes en tres direcciones diferentes en lugar de tener solo uno.

Ahora lo que podemos hacer aquí, y lo que realmente hacemos aquí, es que asignamos un ID para este grupo. Y en CSS, simplemente definimos una animación de fotogramas clave donde simplemente animamos la propiedad rotate, que antes era parte de translate. Ahora puedes usar la propiedad rotate por sí sola para que no choque con translate, que también era parte de transform antes. Así que puedes establecer estos valores de forma independiente. Y tenemos esta pequeña animación aquí. Puedes usar animaciones de fotogramas clave en CSS de la misma manera que lo harías con cualquier otro elemento HTML. También estamos usando la misma técnica cuando estamos dibujando esta esfera de reloj, excepto que aquí no estamos usando CSS para mover las manecillas en posición, sino que estamos usando JavaScript.

Ahora ya hemos cubierto mucho. Cubrimos algunas formas básicas, cómo construir paths básicos. Pero las cosas se ponen más interesantes una vez que empiezas a usar curvas. Así que veamos cómo se ve una curva. Hay dos tipos de curvas. Tenemos curvas de Bezier cuadráticas y curvas de Bezier cúbicas.

7. Quadratic Bezier Curve in SVG

Short description:

La curva de Bezier cuadrática comienza con una Q mayúscula. Un punto de control determina la curvatura de la línea. Las posiciones pueden ajustarse para doblar la línea en diferentes direcciones.

Esta es la más sencilla. Esta es la curva de Bezier cuadrática, comenzando con una letra Q mayúscula aquí. Pero nuevamente, porque los segmentos de path solo definen el punto final, que son los dos últimos números, tenemos que averiguar dónde comenzar. Así que para eso, antes de comenzar este segmento de Bezier cúbico, tenemos otro segmento move to solo para tener una posición de inicio.

Ahora después de eso, tenemos este segmento de Bezier cúbico con la posición final al final. Y antes de eso, tenemos otra posición, que se llama el punto de control. Y este punto de control está definiendo cómo doblar la línea. Así que si esto estuviera entre estos dos otros puntos, entonces tendríamos esencialmente una línea recta y cuanto más lo alejamos, más se dobla la línea. Y por supuesto, podemos doblarlo solo en esta dirección o en la otra dirección o en la otra manera, como quieras. Y por supuesto, estas posiciones también pueden estar donde quieras.

8. Bezier Curves and More

Short description:

La curva de Bezier cuadrática permite doblar líneas. Las curvas de Bezier cúbicas suavizan las transiciones entre segmentos de path, haciéndolas útiles para formas complejas. También están disponibles características avanzadas como el dibujo de arcos. Para más ejemplos y casos de uso, visita svgtutorial.com.

Y ahora tenemos una curva de Bezier cuadrática. Ahora, si vuelves al juego de gorilas que teníamos antes, el brazo de este gorila, y nuevamente, esto es en realidad HTML canvas, pero los parámetros para curvas son los mismos. Así que aquí tenemos una curva de Bezier cuadrática que comienza en algún lugar alrededor del hombro, termina alrededor de la mano, o termina en la mano, y tiene un punto de control que está en algún lugar por aquí. Esto no es una simulación exacta, pero lo que sucede si estoy arrastrando esta mano es que solo estoy moviendo el punto final. Así que como resultado, puedo tener estos brazos muy largos y tengo estos brazos doblándose de la manera incorrecta. Pero solo modificando una posición de estas tres, ya tenemos una simulación bastante aceptable. Ahora veamos si tengo suerte esta vez. ¡Yay! Bueno, quiero decir, construí este juego, así que jugué un poco con él.

Así que después de esto, hablemos de la curva de Bezier cúbica, y esto es un poco más avanzado, pero es bastante similar. Así que nuevamente, comenzamos con un comando move to, luego con una C mayúscula que también vimos en el ejemplo del molino de viento, y las dos últimas posiciones, o los dos últimos números, que es una posición, es la posición final nuevamente. Antes de eso, sin embargo, tenemos otras dos coordenadas. Tenemos un punto de control para el punto final, y tenemos un punto de control para el punto de inicio. Y la forma en que esto funciona es que este esencialmente afecta el inicio de la línea. Así que afecta cómo rápidamente gira y en qué dirección va inicialmente. Pero no afecta cómo termina la línea. Como si miras esta parte, eso se mantiene prácticamente igual. Está moviéndose un poco, pero esencialmente solo está afectando el inicio de la curva y no el final de ella. Y luego el otro, el otro punto de control, está afectando el final de la línea, así que afecta cómo rápidamente gira y en qué dirección va primero. Entonces, ¿por qué es esto útil? Si estás construyendo formas más complejas, a menudo quieres tener una transición suave entre los diferentes segmentos de path. Y lo que tenemos aquí es que tenemos dos líneas rectas. Tenemos una línea recta aquí y una línea recta aquí. Y luego estamos conectando estos dos segmentos con una curva de Bezier cúbica de una manera que no podrías decir que estamos cambiando de segmento aquí porque la transición es suave. Los puntos de control de esta curva de Bezier cúbica están alineados con el segmento anterior y el siguiente. La misma historia aquí, como tenemos una línea recta aquí, tenemos una línea recta aquí, y luego estamos conectando con una Bezier cúbica de una manera que la conexión es suave. Así que las curvas de Bezier cúbicas son útiles cuando estás construyendo formas más complejas y quieres que se vea como una forma agradable.

Ahora esto es prácticamente de lo que quiero hablar. Así que a partir de esto, ya puedes construir cosas bastante complejas. Por supuesto, hay algunas cosas más avanzadas como también puedes dibujar arcos que comienzan con una A mayúscula, y también termina con una posición N. El problema aquí es que tiene como cinco otros parámetros, como diferentes radios y ángulos, y puedes ir desde el punto de inicio hasta el punto final de la manera larga o la manera corta o la otra manera larga y así sucesivamente. Así que esto es un poco más avanzado y no voy a entrar en ello. Si estás interesado, entonces revisa svgtutorial.com donde puedes encontrar toda esta presentación y muchos más pequeños ejemplos y casos de uso que puedes probar en tu próximo proyecto. Así que espero que esto haya sido útil para ti y hayas aprendido algo y obtenido algo de inspiración para tus próximos proyectos. Yo fui Hunor. Por favor, revisa mi sitio web y nos vemos en la web. ¡Ciao!

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

El Potencial Caprichoso de los Marcos de Trabajo de JavaScript
React Summit US 2023React Summit US 2023
28 min
El Potencial Caprichoso de los Marcos de Trabajo de JavaScript
Top Content
The speaker discusses the whimsical and detailed work of Stripe, particularly their interactive and dynamic pages. They explain the use of React for building whimsical details and tracking mouse position. The speaker introduces React Spring for smooth animation and React3 Fiber for creating a 3D egg model. They also mention the use of Framer Motion and React server components for animating CSS properties.
Animaciones Emocionales y Funcionales de la Interfaz de Usuario en React
React Day Berlin 2022React Day Berlin 2022
28 min
Animaciones Emocionales y Funcionales de la Interfaz de Usuario en React
Today's Talk discussed the importance of UI animations in React, both functional and emotional. Examples were given using CSS and Framer Motion, with a focus on user feedback and accessibility. Design guidelines and animation usage were highlighted, as well as the consideration of negative emotions in animations. The Talk also touched on designing 404 error pages and concluded with gratitude to the audience and organizers.
Las animaciones en React Native deben ser divertidas
React Advanced 2022React Advanced 2022
28 min
Las animaciones en React Native deben ser divertidas
This talk is about animations in React Native, specifically focusing on React Native Reanimated. It covers the use of interpolations and extrapolations in animations, animating items in a carousel or list, sticky elements and interpolation, and fluidity and layout animations. The talk provides valuable tips and tricks for creating performant animations and explores the use of math formulas for natural movements.
Sigue Desplazándote
JSNation Live 2021JSNation Live 2021
33 min
Sigue Desplazándote
Scroll animations can enhance user experience when done properly, but should not distract from important information. CSS, JavaScript, and plugins like Scroll Trigger can be used to achieve scroll animations. GreenSock's ScrollTrigger provides a powerful JavaScript animation library for more complex animations. It is important to consider accessibility and provide reduced motion fallbacks. CodePen and GreenSock's documentation are valuable resources for learning and inspiration in creative coding.
Animación y Vue.js
Vue.js London Live 2021Vue.js London Live 2021
32 min
Animación y Vue.js
Today's Talk covers animation in Vue JS apps, including CSS animations, JavaScript animations using the GSAP library, and handling multiple elements with transition groups. The Talk also discusses different kinds of movements, state transitions, and animating numbers and SVGs. Overall, it provides a comprehensive overview of animation techniques and tools for enhancing Vue JS apps.
Animaciones con JS
JSNation 2022JSNation 2022
19 min
Animaciones con JS
Today's talk is about animations in Javascript, covering frame rates and different methods like CSS transitions and animations. JavaScript provides more control over animations, allowing interpolation and simulation of real-world scenarios. Different approaches to animating a box from zero to 100 pixels are discussed, including for loops, timers, and the web animations API. Request Animation Frame is highlighted as a solution for consistent and smooth animations. The Web Animations API is introduced as a powerful tool alongside CSS animations and transitions, although it has limited browser support.

Workshops on related topic

Cómo crear arte generativo increíble con código JavaScript simple
JS GameDev Summit 2022JS GameDev Summit 2022
165 min
Cómo crear arte generativo increíble con código JavaScript simple
Top Content
Workshop
Frank Force
Frank Force
En lugar de dibujar manualmente cada imagen como en el arte tradicional, los artistas generativos escriben programas que son capaces de producir una variedad de resultados. En esta masterclass aprenderás cómo crear arte generativo increíble usando solo un navegador web y un editor de texto. Comenzando con conceptos básicos y avanzando hacia la teoría avanzada, cubriremos todo lo que necesitas saber.