Tuesday, July 5, 2022
HomeiOS DevelopmentThe way to Create Confetti Animations in SwiftUI

The way to Create Confetti Animations in SwiftUI

Sometimes, we obtained questions on the way to create confetti animations. Undoubtedly, you possibly can construct the animation from the bottom up utilizing SwiftUI or UIKit. Lately I got here throughout an open supply library referred to as ConfettiSwiftUI that enables builders to create various kinds of confetti animations. So, as an alternative of creating the animation from scratch, let’s see the way to create some confetti animations utilizing the Swift bundle.

Primary Utilization of ConfettiSwiftUI

ConfettiSwiftUI is on the market as a Swift bundle. Due to this fact, it’s very straightforward to bundle it in your Xcode challenge.

Assuming you’ve created a brand new Xcode challenge, you possibly can go as much as the Xcode menu and select File > Add Packages…. Then key within the following bundle URL:

Xcode ought to routinely load the bundle info. Clicking the Add Package deal button so as to add the bundle to the challenge.

As soon as the Swift bundle is downloaded, you possibly can change over to the ContentView.swift file. To make use of the library, you simply must import ConfettiSwiftUI and replace ContentView like this:

Within the code, we create an emoji button and fix the confettiCannon modifier, which is the modifier for rendering the confetti animation. The modifier accepts varied parameters however most of them are optionally available. You simply want to offer a binding to a counter for triggering the animation.

When the button is tapped, we improve the worth of the counter variable by one. That is how we set off the confetti animation.

Run the app on a simulator or just take a look at the app within the preview pane. You will notice a confetti animation while you faucet the emoji button.


Including Extra Confetties

ConfettiSwiftUI supplies a number of parameters for builders to customise the confettie animation. You possibly can management the quantity of confettis through the use of the num parameter:

By default, it generates 20 confettis. You possibly can alter the worth to fit your wants.

Altering the Explosion Radius


If you wish to management the width of the confetti animation, you possibly can change the worth of the radius parameter:

The default worth is ready to 300.0. A bigger worth will create a confetti animation that spreads out extra.

Customizing the Shade and Rain Top

You can even customise the colour of the confettis and the vertical distance of the animation utilizing the colours and rainHeight parameters respectively:

The code above creates a confetti animation that consists of each purple and orange confettis.


Utilizing Your Personal Form

This open supply library additionally enables you to use your personal form for rendering the confettis. You should utilize an emoji textual content, one other built-in form (e.g. .roundedCross) or perhaps a SF image.

You specify your personal form within the confettis parameter and alter the dimensions of confetti by altering the worth of the confettiSize parameter.


Hold Repeating

The modifier additionally supplies the repetitions and repetitionInterval parameters if you wish to rerun the identical animation again and again. Right here is the pattern code snippet:

This repeats the identical confetti animation for 1000 occasions with the repetition interval set to 0.05s.


Wrap Up

ConfettiSwiftUI is a superb open supply library for rendering Confetti animations. It’s extremely customizable, with varied properties for controlling the dimensions and form of the confettis. On this tutorial, I solely covers a few of the commonly-used parameters. You possibly can head over to the official API documentation and take a look at different configurable properties.

I hope you take pleasure in this tutorial and take a while to additional discover this library.

Founding father of AppCoda. Creator of a number of iOS programming books together with Starting iOS Programming with Swift and Mastering SwiftUI. iOS App Developer and Blogger. Observe me at Fb, Twitter and Google+.



Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments