hand Inicio

SERVICIOS

Salir

noched铆a

Simula fuegos artificiales con CSS

900 palabras
4 minutos
August 3, 2020

Unos simples efectos de fuegos artificiales con CSS ayudados con JavaScript que nos puede servir como punto de partida para creaciones m谩s elaboradas

Pr贸logo

Los fuegos artificiales normalmente se basan en utilizar el elemento canvas, que es casi como otro lenguaje de programaci贸n

La alternativa es utilizar librer铆as externas como fireworks.js, threejs.org o Proton

Y hay otra alternativa mucho menos costosa para el navegador, que es hacerlo s贸lo con animaciones css

El ejemplo en que me he basado es 茅ste, y aqu铆 lo he reformulado con React y @emotion para generar estructuras algo m谩s complejas y vers谩tiles

Vamos all谩

  1. Pr贸logo
  2. Problemas con las animaciones de css
  3. C贸digo

Problemas con las animaciones de css

Problemas? Qu茅 problemas?

Pues uno may煤sculo, y es que no hay manera sencilla de volver a iniciar una animaci贸n css a trav茅s de JavaScript

Qu茅 ser铆a lo ideal?

Poder definir una animaci贸n por css, e inicializarla con un timer recurrente y cada vez en unas nuevas coordenadas, e incluso a cada repetici贸n calcular otra distribuci贸n de fuegos

Pero para poder hacerlo tienes que tirar de hacks, como quitar y rea帽adir la clase (y no funciona con un rerender de React, o al menos a mi no me ha funcionado)

Por lo que la opci贸n m谩s sencilla es simplemente a帽adir otra animaci贸n que vaya cambiando las coordenadas de los fuegos, y poner todas las animaciones en un bucle infinito (y sincronizado entre s铆)

Lo malo? Que ese cambio de coordenadas sigue un patr贸n y no es aleatorio

Lo bueno? Que a煤n y sabiendo que hay un patr贸n, al menos a mi me resulta imposible detectarlo, y es que aqu铆 juegas a mezclar patrones y darles distinta cadencia

C贸digo

Recuerda que tienes que importar @emotion/core y @emotion/styled como librer铆as en el codesandbox si quieres correr la animaci贸n

Y por partes, tenemos las funciones que nos dan valores random tanto en coordenadas como en colores

Luego tenemos la funci贸n que nos devuelve el concepto de fuego artificial

Y esto c贸mo lo ejecutamos?

Con un box-shadow, que utilizaremos simplemente para dibujar puntos en coordenadas distintas, y que luego animaremos con una transition al uso

Recibe 3 argumentos, el primero es el n煤mero de fuegos artificiales, el segundo el n煤mero de part铆culas, y el tercero es el espacio que limitar谩 la distribuci贸n de puntos que nos dar谩 la funci贸n random

Esta limitaci贸n nos dar谩 un cuadrado, lo suyo ser铆a implementar una funci贸n que no diera n煤meros totalmente aleatorios sin贸 que estuviese ponderada de alg煤n modo para seguir una distribuci贸n m谩s radial

Esto lo puedes ver si incrementas el n煤mero de part铆culas, pero vamos, para lo que busco aqu铆 es m谩s que suficiente

Entonces, lo que devuelve la funci贸n es un array donde el primer elemento ser谩 el punto de partida de todos los fuegos, que no es m谩s que tener los mismos puntos con coordenadas cero y color blanco

Y el resto de elementos son las posiciones finales de tantos grupos como hayamos pedido, en formato box-shadow: ...

Con esto entramos ya en el componente en s铆 donde generamos el n煤mero de fuegos

Y tambi茅n construyo aqu铆 el css (podr铆a hacerlo en el propio componente de @emotion m谩s abajo, cuesti贸n de gustos)

Le pongo el join porque necesito generar un string con box-shadow, y el .map() me devuelve un array

Y en particular, si te fijas lo que hago es definir cada grupo de fuegos artificiales para cada <div> que vuelvo luego, aqu铆

Es decir, dentro de <Fireworks> tendre tantos <div> como fuegos artificiales haya pedido (con la constante number_of_fireworks)

Y el css de arriba lo que hace es apuntar a esos <div> con la expresi贸n

Luego vuelvo a esta funci贸n, de momento sigamos

Ya s贸lo nos queda definir los estilos y las animaciones

El com煤n para todos los <div> anteriores es simplemente definir el punto en s铆 y la posicion absolute

Luego volcamos el css que hemos generado antes

Y ya s贸lo nos quedan las animaciones

Aqu铆 si te fijas s贸lo definimos el punto de partida, que ser谩 el mismo para todos, es decir todos los puntos con coordenadas cero y color blanco

Esta animaci贸n ser谩 la que nos dar谩 el movimiento de los puntos desde el centro hasta su localizaci贸n final

Seguimos con la gravedad

Y si te fijas, aqu铆 hacemos varias cosas

  • Nos movemos hacia abajo 200px
  • Reducimos el tama帽o del punto desde los 8px hasta los 2px
  • Los vamos haciendo invisibles con el opacity

Aqu铆 ya completamos el fuego artificial, pero nos queda la 煤ltima animaci贸n que lo que har谩 ser谩 mover todo el fuego artificial

Ser谩 el mismo, pero nos dar谩 la impresi贸n de ser otro fuego que ir谩 cambiando con el tiempo y tambi茅n de frecuencia

Definimos las coordenadas con margin, y piensa que como estamos en position: absolute esos porcentajes son de todo el tama帽o de la ventana

Bien, pues ahora volvemos a la funci贸n anterior porque de todo esto es lo que tiene m谩s miga

Aqu铆 se trata de hacer dos cosas

  • Crear el box-shadow que ser谩 lo que nos definir谩 cada fuego artificial
  • Desincronizar los grupos para que no se solapen entre ellos

Lo primero es sencillo y de hecho es lo que hacemos antes con get_firework(), que nos devuelve el array end donde cada elemento es un box-shadow concreto

Por lo tanto aqu铆 lo que hacemos en realidad es configurar las animaciones

Que es lo mismo que si pusi茅semos manualmente

Y el quid es el c谩lculo de cu谩nto dura cada animaci贸n, para as铆 mover la animaci贸n position cuando toque (y dar tiempo a que la animaci贸n termine)

  • En el primer caso tenemos una duraci贸n de 1s y la animaci贸n position nos dura 5s, pero esa animaci贸n tiene 5 posiciones con lo que a cada posici贸n dedica 1s, ya cuadra
  • En el segundo caso tenemos una duraci贸n de 1.25s, que por cinco posiciones nos da un total de 6.25s, que es la duraci贸n que le ponemos a position
  • Y en el tercer caso lo mismo, con un total de 7.5s

Y as铆 nos queda todo sincronizado, puedes cambiar estos valores para ver qu茅 pasa cuando no est谩 sincronizado

Listos!

馃檵鈥嶁檪锔

Qu茅 tal el curso?
馃憣 Bien 馃檶馃檶
馃憤 Bien, pero algunas cosas podr铆an explicarse mejor 馃槵
馃し鈥嶁檪锔 Da por sentadas demasiadas cosas 馃槖
馃し鈥嶁檪锔 A ver, hay poca chicha 馃槵
馃し鈥嶁檪锔 Los ejemplos no son muy claros 馃檱鈥嶁檪锔
馃し鈥嶁檪锔 No se entiende, est谩 mal escrito 馃憥
鉁嶏笍 Hay errores, rev铆salo en cuanto puedas 馃檹

Quiz谩 te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]