Tuesday, June 28, 2022
HomeiOS DevelopmentHow you can Create Confetti Animations in SwiftUI

How you can Create Confetti Animations in SwiftUI


On occasion, we acquired questions on learn how to create confetti animations. Undoubtedly, you possibly can construct the animation from the bottom up utilizing SwiftUI or UIKit. Not too long ago I got here throughout an open supply library referred to as ConfettiSwiftUI that enables builders to create various kinds of confetti animations. So, as a substitute of creating the animation from scratch, let’s see learn how to create some confetti animations utilizing the Swift package deal.

Fundamental Utilization of ConfettiSwiftUI

ConfettiSwiftUI is out there as a Swift package deal. Subsequently, it’s very simple 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 package deal URL:

Xcode ought to mechanically load the package deal data. Earlier than clicking the Add Bundle button, please choose the grasp department for the dependency rule possibility.

swiftui-confetti-animation-add-package

As soon as the Swift package deal 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 fasten the confettiCannon modifier, which is the modifier for rendering the confetti animation. The modifier accepts numerous parameters however most of them are optionally available. You simply want to supply a binding to a counter for triggering the animation.

When the button is tapped, we enhance 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 whenever you faucet the emoji button.

swiftuiconfetti-library-demo

Including Extra Confetties

ConfettiSwiftUI offers a number of parameters for builders to customise the confettie animation. You possibly can management the quantity of confettis by utilizing the num parameter:

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

Altering the Explosion Radius

swiftui-confetti-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 Peak

It’s also possible to 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.

swiftui-confetti-custom-color

Utilizing Your Personal Form

This open supply library additionally helps 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 scale of confetti by altering the worth of the confettiSize parameter.

swiftui-confettis-custom-shape

Hold Repeating

The modifier additionally offers the repetitions and repetitionInterval parameters if you wish to rerun the identical animation time 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.

swiftui-confetti-animation-demo

Wrap Up

ConfettiSwiftUI is a superb open supply library for rendering Confetti animations. It’s extremely customizable, with numerous properties for controlling the scale 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 get pleasure from this tutorial and take a while to additional discover this library.


Founding father of AppCoda. Writer 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+.



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments