[ad_1]
Occasionally, we acquired questions on methods to create confetti animations. Undoubtedly, you’ll be able to 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 methods to create some confetti animations utilizing the Swift bundle.
Primary Utilization of ConfettiSwiftUI
ConfettiSwiftUI is obtainable as a Swift bundle. Subsequently, it’s very simple to bundle it in your Xcode venture.
Assuming you’ve created a brand new Xcode venture, you’ll be able to go as much as the Xcode menu and select File > Add Packages…. Then key within the following bundle URL:
|
https://github.com/simibac/ConfettiSwiftUI.git |
Xcode ought to robotically load the bundle data. Earlier than clicking the Add Bundle button, please choose the grasp department for the dependency rule possibility.
As soon as the Swift bundle is downloaded, you’ll be able to 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 personal var counter = 0      var physique: some View {         Button(motion: {             counter += 1         }) {             Textual content(“🎃”)                 .font(.system(dimension: 50))         }         .confettiCannon(counter: $counter)      } } |
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 non-compulsory. 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 gives a number of parameters for builders to customise the confettie animation. You may management the quantity of confettis through the use of 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’ll be able to 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 Coloration and Rain Peak
You may as well 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 dimensions of confetti by altering the worth of the confettiSize parameter.
Hold Repeating
The modifier additionally gives the repetitions and repetitionInterval parameters if you wish to rerun the identical animation over and over. 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 dimensions and form of the confettis. On this tutorial, I solely covers among the commonly-used parameters. You may 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. Writer 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+.
[ad_2]
