Create particle explosion animation in Jetpack Compose | by Omkar Tenkale | March 2023

Animation performs an important position in bringing any consumer interface to life. They not solely make the consumer interface extra enticing, but additionally present suggestions to the consumer, making a extra partaking expertise.

On this article we’ll discover how one can create such particle explosion impact utilizing jetpack compose characteristic with out counting on any exterior dependencies

We’ll take a step-by-step strategy, breaking down every stage of the animation, understanding the physics and math concerned, and translating these ideas into code.

So let’s dive in!

In a typical explosion, the sudden launch of vitality throws particles into the air consisting of particles of various sizes which might be ejected in all instructions.

Every particle is then pulled downwards by gravity, leading to it following a parabolic trajectory earlier than lastly falling again to the bottom.

Because the particle strikes upward, the gravitational acceleration acts in the other way, leading to its velocity altering with time

To higher perceive this idea, think about this shifting sled for example

Initially the sled strikes with uniform acceleration to the suitable with fixed velocity. When the boosters are activated in the other way, the sled will expertise a internet drive in the other way, inflicting it to expertise destructive acceleration.

Lastly, the sled comes to an entire cease, with zero velocity. As time passes, the sled undergoes a shift within the left route and begins to maneuver in the other way.

Likewise, in our situation, gravity gives a internet downward drive to our particle, which slows it down and eventually stops for a second earlier than it begins. speed up in the other way.

With this in thoughts, let’s draw the trajectory of a single particle on a 2D canvas. We’ll write some fundamental enhancing code to get began.

The Explosion composable makes use of canvas to attract the particle’s trajectory. It additionally plots the X and Y axes together with a skinny border and takes a progress argument as enter between 0 and 1

The ControlledExplosion composable then simply wraps Explosion might be synthesized, permitting us to exactly management the course of the explosion utilizing the Slider

To regulate the place of the particle on the canvas, we go a Offset the place the X and Y coordinates are middle parameter of drawCircle() perform

Contemplating velocity sizePx/unit and time is managed by Slider progressive, the space traveled by a particle at a continuing velocity in a hard and fast time is given by:

distance = velocity * time = sizePx * progress

By default, canvas attracts each aspect from the highest left nook the place the coordinates (0,0) are.

But when we wish the particle to start out from the middle, we have to add sizePxHalf to each X and Y . coordinates

Additionally, when calculating the Y displacement, we have to subtract it as a substitute of including it to be sure that the particle goes up as a substitute of taking place.

Excellent, Now let’s take a look at the impact of gravity on the particle

To calculate the vertical displacement of a particle with fixed velocity and acceleration attributable to gravity, we will use the second equation of movement kinetic vitality

s = ut + 0.5at^2

The place

• s = displacement (distance from authentic place)
• u = preliminary velocity
• a = fixed acceleration
• t = time

That is how the up to date code appears like

We nonetheless want to find out the rate and acceleration of the particle based mostly on the utmost top it may well attain

So let’s derive the components utilizing the variables within the management, i.e. displacement and time, from the truth that

1. The particle returns to its authentic place after time t
2. Velocity when reaching most top is 0

Equally, we all know that acceleration is the change in velocity over time

With this, the particle strikes in a pleasant parabolic trajectory

To extend the variety of particles, we create a Particle layer to carry the state of every particle, together with coloration, X & Y coordinates and different properties

We additionally added some variations to maxHorizontalDisplacement And maxVerticalDisplacement for every particle in order that it follows its personal trajectory
This variation is randomly chosen to offer selection within the path of every particle, making a extra sensible impact

And eventually, assign every bead a random coloration

Right here is our up to date code with a separate code Particle class

Now let’s make some extra edits to the animation

First, we wish the particle to maneuver past its last place. To attain this, we will enhance the utmost journey time of the particle (1 second) by including an arbitrary worth of 0.4 seconds

Moreover, though the particles are shifting alongside their designated trajectories, the general explosion nonetheless appears pretty uniform. To create a extra sensible explosion impact, we will introduce randomness by adjusting the beginning and finish occasions of every particle.

visibilityThresholdLow is the delay skilled by every particle earlier than it begins to maneuver relative to the explosion course of. Its worth ranges from 0 to 0.14, representing a fraction of the general animation progress. This parameter improves the preliminary animation by permitting the particles to look as in the event that they had been being spewed out, as a substitute of all beginning to transfer without delay.

One other parameter, visibilityThresholdHighdecide the tip distance between animation progress and particle progress

Contemplate an instance the place the worth of visibilityThresholdLow is 0.1 and visibilityThresholdHigh is 0.4. On this case the particle will full its trajectory from 0 to 1, because the animation increments from 0.1 to 0.6 (1 – 0.4) and in any other case turns into invisible

Usually, the parameters visibilityThresholdLow And visibilityThresholdHigh create extra sensible explosion results by introducing randomness by controlling the beginning and finish occasions of every particle’s trajectory

Right here is the replace Particle class

How can we additional enhance our animations?

Contemplate the extra traits of an actual explosion

Upon nearer inspection, we will discover some variations from our present animation

1. Fragments don’t originate from a single central level
2. Because the fragments transfer nearer or additional away from the viewer, it appears to alter dimension
3. Some fragments disappear whereas in mid-air

Let’s attempt to carry these modifications into our animation

We are able to assign random initialDisplacement randomly varies between -10dp and 10dp for every particle so it does not begin from the middle

val initialDisplacement = 10.dp.toPx() * randomInRange(-1f, 1f)

To alter the particle dimension over time, we first set the preliminary radius of all of the particles to 2dp

Then we divided the beads into two teams. The minority (20%) expands from 2dp to a random dimension between 2dp and 7dp within the burst. However, the bulk group steadily decreases their radius from 2dp to a random worth between 1dp and 2dp

This easy adjustment gives the look of 3D motion, as if the particles had been additionally shifting on the Z . axis

Lastly, we modify the transparency of the particles in order that as they transfer in direction of the tip of the trajectory (70% to 100%), their transparency steadily decreases (100% to 0%), making a translucent impact steadily

That is our last Particle class

Discover the above code in this gist

Within the subsequent half, we’ll develop a library based mostly on this explosion animation

Preserve steady!

Due to rocket sled And discipline explosion

Cost procedures ExplodingComposable on Github