On occasion, we obtained questions on learn how to create confetti animations. Undoubtedly, you possibly can construct the animation from the bottom up utilizing SwiftUI or UIKit. Just lately I got here throughout an open supply library referred to as ConfettiSwiftUI that enables builders to create several types of confetti animations. So, as an alternative of growing 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 offered as a Swift package deal. Due to this fact, 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:
|
https://github.com/simibac/ConfettiSwiftUI.git |
Xcode ought to robotically load the package deal data. Clicking the Add Bundle button so as to add the package deal to the challenge.
As soon as the Swift package deal is downloaded, you possibly can swap over to the ContentView.swift file. To make use of the library, you simply must import ConfettiSwiftUI and replace ContentView like this:
|
struct ContentView: View { @State non-public var counter = 0
var physique: some View { Button(motion: { counter += 1 }) { Textual content(“🎃”) .font(.system(measurement: 50)) } .confettiCannon(counter: $counter)
} } |
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 varied parameters however most of them are elective. You simply want to supply 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 note a confetti animation once you faucet the emoji button.
Including Extra Confetties
ConfettiSwiftUI offers a number of parameters for builders to customise the confettie animation. You may management the quantity of confettis by utilizing the num parameter:
|
.confettiCannon(counter: $counter, num: 50) |
By default, it generates 20 confettis. You may 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:
|
.confettiCannon(counter: $counter, radius: 500.0) |
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
You too can customise the colour of the confettis and the vertical distance of the animation utilizing the colours and rainHeight parameters respectively:
|
.confettiCannon(counter: $counter, colours: [.purple, .orange], rainHeight: 1000.0, radius: 500.0) |
The code above creates a confetti animation that consists of each purple and orange confettis.
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.
|
.confettiCannon(counter: $counter, confettis: [.sfSymbol(symbolName: “trash”), .shape(.roundedCross), .text(“🎃”)], colours: [.purple, .orange], confettiSize: 20.0, radius: 400.0) |
You specify your personal form within the confettis parameter and alter the scale of confetti by altering the worth of the confettiSize parameter.
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:
|
.confettiCannon(counter: $counter, num: 1, confettis: [ .text(“🎃”)], colours: [.purple, .orange], confettiSize: 20.0, radius: 10.0, repetitions: 1000, repetitionInterval: 0.05) |
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 scale and form of the confettis. On this tutorial, I solely covers a number of the commonly-used parameters. You may 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. Creator of a number of iOS programming books together with Starting iOS Programming with Swift and Mastering SwiftUI. iOS App Developer and Blogger. Comply with me at Fb, Twitter and Google+.
