Creación de una animación de explosión de partículas en Jetpack Compose | de Omkar Tenkale | marzo 2023

Las animaciones juegan un papel crucial para dar vida a cualquier interfaz de usuario. No solo hacen que la interfaz de usuario sea más atractiva visualmente, sino que también brindan comentarios al usuario, creando una experiencia más atractiva.En este artículo, examinaremos cómo usar Jetpack Compose para crear un efecto de explosión de partículas sin depender de dependencias externas. Iremos paso a paso desglosando cada fase de la animación y comprendiendo la física y las matemáticas subyacentes involucradas y traduciendo estos conceptos en código Entonces, ¡vamos a sumergirnos! En una explosión típica, una liberación repentina de energía arroja escombros al aire , que están formados por elementos de diferentes tamaños que se lanzan en todas direcciones. Luego, cada partícula es empujada hacia abajo por la gravedad, lo que hace que siga una trayectoria parabólica antes de volver a caer al suelo.A medida que la partícula se mueve hacia arriba, la aceleración gravitacional actúa en dirección opuesta, lo que resulta en un cambio en su velocidad con el tiempo. Para comprender mejor este concepto, considere este trineo en movimiento como ejemploRocket Sledder de Physicalclassroom.com Inicialmente, el trineo se mueve constantemente hacia la derecha a una velocidad constante. Cuando los propulsores se activan en la dirección opuesta, el trineo experimenta una fuerza neta en la dirección opuesta, lo que hace que experimente una aceleración negativa. Finalmente, el carro se detiene por completo con velocidad cero. Con el tiempo, el tobogán experimenta un cambio en la dirección izquierda y comienza a moverse en la dirección opuesta. De manera similar, en nuestro escenario, la gravedad proporciona una fuerza descendente neta sobre nuestra partícula, lo que hace que disminuya su velocidad y finalmente se detenga antes de comenzar a acelerar en la dirección opuesta. Con esto en mente, dibujemos la trayectoria de una sola partícula en un lienzo 2D. Primero escribiremos un código de composición básico.El componible Explosión utiliza un lienzo para dibujar la trayectoria de las partículas. También traza los ejes X e Y junto con un borde delgado y toma un argumento de progreso como entrada entre 0 y 1. Luego, Composable ControlledExplosion simplemente envuelve Composable Explosion, lo que nos permite controlar con precisión el progreso de la explosión usando un control deslizante para posicionar Para controlar la partícula en el lienzo, pasamos un desplazamiento con coordenadas X e Y al parámetro Center de la función drawCircle(). Dada la magnitud de la velocidad Px/unidad y el tiempo controlado por el control deslizante de progreso, la distancia que recorre una partícula a velocidad constante en un tiempo fijo está dada por: distancia = velocidad * tiempo = magnitud Px * progresoDe forma predeterminada, el lienzo dibuja cada elemento desde la esquina superior izquierda, donde están las coordenadas (0,0). Sin embargo, si queremos que la partícula comience en el medio, debemos agregar sizePxHalf a las coordenadas X e Y. Para calcular el valor de cambio de Y, debemos restarlo en lugar de agregarlo para asegurarnos de que la partícula suba. de abajoPerfecto, ahora veamos el efecto de la gravedad sobre la partícula. Para calcular el desplazamiento vertical de la partícula con velocidad constante y aceleración debida a la gravedad, podemos usar la segunda ecuación cinemática de movimiento = ut + 0.5 en ^2, donde

  • s = desplazamiento (distancia desde la posición inicial)
  • u = velocidad inicial
  • a = aceleración constante
  • t = tiempo

Así es como se ve el código actualizadoTodavía necesitamos determinar la velocidad y la aceleración de la partícula en función de la altura máxima que puede alcanzar. Entonces, obtengamos la fórmula usando las variables en el controlador, es decir, el desplazamiento y el tiempo, del hecho de que

  1. La partícula vuelve a su posición original después del tiempo t
  2. La velocidad al alcanzar la altura máxima es 0

También sabemos que la aceleración es el cambio de velocidad en el tiempo.La partícula se mueve así en una bonita trayectoria parabólica.Para aumentar la cantidad de partículas, creamos una clase de partículas que contiene el estado de cada partícula, incluido el color, las coordenadas xey y otras propiedades. También agregamos alguna variación a maxHorizontalDisplacement y maxVerticalDisplacement para cada partícula para que siga su propia trayectoria. Esta variación es aleatoria para proporcionar diversidad en el camino de cada partícula y crear un efecto más realista.Y finalmente, asignemos un color aleatorio a cada partícula.Aquí está nuestro código actualizado con una clase de partículas separadaAhora hagamos algunos cambios adicionales a la animación. Primero, queremos que la partícula se mueva más allá de su posición final. Para lograr esto, podemos aumentar el tiempo máximo de ejecución de la partícula (1 s) agregando un valor arbitrario de 0,4 sAdemás, a pesar de que las partículas se mueven a lo largo de su trayectoria designada, la explosión general aún parece bastante suave. Para crear un efecto de explosión más realista, podemos introducir la aleatoriedad ajustando la hora de inicio y finalización de cada partícula. Su valor oscila entre 0 y 0,14 y representa una fracción del progreso total de la animación. Este parámetro mejora la animación inicial al hacer que las partículas se vean más como si estuvieran siendo rociadas en lugar de moverse todas a la vez.Otro parámetro,VisibilityThresholdHigh, determina la distancia final entre el progreso de la animación y el progreso de las partículas. Considere un ejemplo en el que el valor deibilityThresholdLow es 0,1 y el valor deibilityThresholdHigh es 0,4. En este caso, la partícula completa su trayectoria de 0 a 1 a medida que la animación avanza de 0,1 a 0,6 (1 – 0,4), de lo contrario, permanecen invisibles los tiempos de inicio y finalización de la trayectoria de cada partícula.Aquí está la clase de partículas actualizada¿Cómo podemos mejorar aún más nuestra animación? Consideremos otras características de una explosión real.Explosión con escombros (por BestGreenScreen) En una inspección más cercana, podemos ver algunas diferencias con nuestra animación actual

  1. Los escombros no provienen de un solo centro
  2. A medida que los escombros se acercan o se alejan del espectador, parecen cambiar de tamaño
  3. Ciertos escombros desaparecen en el aire.

Intentemos incorporar estos cambios en nuestra animación. Podemos dar a cada partícula un desplazamiento inicial aleatorio, que es aleatorio entre -10 dp y 10 dp, para que no emane del centro. desplazamiento inicial = 10.dp.toPx() * rango en rango aleatorio (-1f, 1f)Para variar el tamaño de las partículas con el tiempo, primero establecemos el radio inicial de todas las partículas en 2dp. Luego dividimos las partículas en dos grupos. El grupo minoritario (20%) se expande de 2 dp a un tamaño aleatorio entre 2 dp y 7 dp durante la explosión. El grupo mayoritario, en cambio, disminuye gradualmente su radio desde 2 dp hasta un valor aleatorio entre 1 dp y 2 dp. Este simple ajuste da la impresión de movimiento 3D, como si las partículas también se estuvieran moviendo en el eje ZFinalmente, ajustamos la transparencia de las partículas para que su transparencia disminuya gradualmente (100% a 0%) a medida que avanzan hacia el final de su trayectoria (70% a 100%), creando un efecto de fundido.Aquí está nuestra clase de partículas finalEncuentra el código anterior en este núcleo. En la siguiente parte, desarrollaremos una biblioteca basada en esta animación de explosión. ¡Manténganse al tanto! Gracias a Rocket Sled y ExplosionField

Deja una respuesta

Tu dirección de correo electrónico no será publicada.