Swift Package Index


SwiftUI package for configurable confetti animation


  • The latest stable release is 0.2.1. Released about 1 month ago.
  • The last commit to master was about 1 month ago.

Swift Version Compatibility

  • 0.2.1 and master
    5.3
    5.2
    5.1
    5.0
    4.2
Full build results

Platform Compatibility

  • 0.2.1 and master
    iOS
    macOS(Intel)
    macOS(ARM)
    Linux
    tvOS
    watchOS
Full build results

🎊 ConfettiSwiftUI 🎊

Swift package for displaying configurable confetti animation.

Find the demo project here.

Installation:

It requires iOS 14 and Xcode 12!

In Xcode go to File -> Swift Packages -> Add Package Dependency and paste in the repo's url: https://github.com/simibac/ConfettiSwiftUI and select master branch.

Usage:

Import the package in the file you would like to use it: import ConfettiSwiftUI

struct ContentView: View {
    @State var counter:Int = 0

    var body: some View {
        ZStack{
            Text("🎉").font(.system(size: 50)).onTapGesture(){counter += 1}
            ConfettiCannon(counter: $counter)
        }
    }
}

Demo

Added an example project, with iOS target: https://github.com/simibac/ConfettiSwiftUIDemo

Configurations

You can use the configurator app in demo project here to make your desired animation or get inspired by one of the many examples.

Default Configuration

Code:

ConfettiCannon(counter: $counter1)

Color and Size Configuration

Code:

ConfettiCannon(counter: $counter2, colors: [.red, .black], confettiSize: 20)

Repeat Configuration

Code:

ConfettiCannon(counter: $counter3, repetitions: 3, repetitionInterval: 0.7)

Firework Configuration

Code:

ConfettiCannon(counter: $counter4, num: 50, openingAngle: Angle(degrees: 0), closingAngle: Angle(degrees: 360), radius: 200)

Emoji Configuration

Code:

ConfettiCannon(counter: $counter5, confettis: [.text("❤️"), .text("💙"), .text("💚"), .text("🧡")])

Endless Configuration

Code:

ConfettiCannon(counter: $counter6, num:1, confettis: [.text("💩")], confettiSize: 20, repetitions: 100, repetitionInterval: 0.1)

Make-it-Rain Configuration

Code:

ConfettiCannon(counter: $counter7, num:1, confettis: [.text("💵"), .text("💶"), .text("💷"), .text("💴")], confettiSize: 30, repetitions: 50, repetitionInterval: 0.1)

Parameters

parameter type description default
counter Binding on any change of this variable triggers the animation 0
num Int amount of confettis 20
confettis [ConfettiType] list of shapes and text [.shape(.circle), .shape(.triangle), .shape(.square), .shape(.slimRectangle), .shape(.roundedCross)]
colors [Color] list of colors applied to the default shapes [.blue, .red, .green, .yellow, .pink, .purple, .orange]
confettiSize CGFloat size that confettis and emojis are scaled to 10.0
rainHeight CGFloat vertical distance that confettis pass 600.0
fadesOut Bool size that confettis and emojis are scaled to true
opacity Double maximum opacity during the animation 1.0
openingAngle Angle boundary that defines the opening angle in degrees Angle.degrees(60)
closingAngle Angle boundary that defines the closing angle in degrees Angle.degrees(120)
radius CGFloag explosion radius 300.0
repetitions Int number of repetitions fo the explosion 0
repetitionInterval Double duration between the repetitions 1.0