Creating Confetti Particle Effects Using SwiftUI

Add fireworks and confetti to your SwiftUI apps

Image by author

To get started, create a struct of type GeometryEffect.

We need to define time, speed, and direction for particles. Make the speed variable randomized number between 20 and 200. If you try a small number range (e.g. 10 … 30), the particles’ explosion will be more contained and less dramatic.

speed range on the left between 20–30 vs range on the right 20–100

For the direction, use a value between -pi and pi. This range will give us a complete circle.

If you change the number range to between 0 to pi, the particles will be moving down in the shape of half a circle. If you now change the number range to between -pi to 0, it will give us the opposite effect.

direction range on the left between 0-pi vs range on the right -pi-0

Use animatableData to increase the value of time. animatableData is a special variable, don’t rename it or the animation won’t work. If you remove the animatableData, you will have particles fixed in random places.

Particles without time animation

Conform to the GeometryEffect protocol by implementing the effectValue function.

We need to figure out the translation/position of all the particles. Calculate the translation using the speed, time, and cosine, and sine values of the direction. The affine transformation matrix is used to translate objects you draw in a graphics context.

Create a CGAffineTransform with our translations, then return a ProjectionTransform with our CGAffineTransform you created.

Particles Modifier