SwiftUI Package for Configurable Confetti Animation 🎉

Simon Bachmann

Last update: Jan 8, 2023

Related tags

Animation animation swiftui

Overview

🎊 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	CGFloat	explosion radius	300.0
repetitions	Int	number of repetitions for the explosion	0
repetitionInterval	Double	duration between the repetitions	1.0

Projects

The following projects have integrated ConfettiSwiftUI in their App.

Basic Code avaliable on the AppStore

Comments

Trouble with higher num: values
Expected Behaviour

There should appear the number of confetti I decide

Actual Behavior

it takes too long to render the number I have chosen. and either they do not render, or they are delayed, and then disappear suddenly during animation.

Steps to Reproduce the Issue

Create a confetti cannon with a higher num: I would like up to 1000. but I was having issues even with 100-200 or more.
opened by AirborneEagle 3
Library not loaded
Expected Behaviour

App launch including package.

Actual Behaviour

App crashed on launch with the console output attached.

Steps to Reproduce the Issue

Install Swift Package via Xcode package manager

Build to iphone
opened by kitlogan 3
Animation is over very fast

Expected Behaviour

Describe the expected behaviour. The popped out confetti should slowly rain down

Actual Behaviour

Describe the actual behaviour. The popped out confetti fastly rains down

Steps to Reproduce the Issue

I am using this in combination with https://github.com/joogps/SlideOverCard. The library is the problem, because I tried it already on my Home Screen and there it worked fine. I would like to ask if you could tell me a solution :)

https://user-images.githubusercontent.com/65811753/135335692-14b5076c-ccf7-4460-9cb5-82d383bbb0d8.mov

opened by blockiyt 3
SF Symbols support
Description

Is there a way to use SF Symbols in ConfettiSwiftUI? I tried embedding in Text but that did not work. Thanks.

Tasks

[ ] ...

Context

...mention related issues and/or user stories...
opened by daver234 2
ignoring singular matrix: ProjectionTransform(m11: 1.0, m12: 0.0, m13: 0.0, m21: -0.5, m22: -0.5, m23: -0.1, m31: 2.5, m32: 7.5, m33: 1.5)
ConfettiCannon(counter: $counter, num: 200, repetitions: 3, repetitionInterval: 3)

This is shown on console:

ignoring singular matrix: ProjectionTransform(m11: 1.0, m12: 0.0, m13: 0.0, m21: -0.5, m22: -0.5, m23: -0.1, m31: 2.5, m32: 7.5, m33: 1.5) ignoring singular matrix: ProjectionTransform(m11: 1.0, m12: 0.0, m13: 0.0, m21: 0.5, m22: 0.5, m23: 0.1, m31: -2.5, m32: 2.5, m33: 0.5)
help wanted
opened by mattyoung 2
Better Physics Simulation Option
Description

Add the option to give realistic physics feel to the confetti. This consists mainly of adjusting the animation curve, overlapping confetti explosion animation with falling animation, and spreading confetti increasingly thinly towards the middle of the explosion.

Also expanded the range of confetti rotation values so they all don't appear to spin at the same time after the initial explosion.

Checklist

[x] All tests are passing
opened by twhitt14 2
Add option to skip animation when the counter decreases
Description

This PR adds the possibility to skip the confetti animation when the $counter value decreases compared to the previous value.

Imagine one has bound the $counter to the current score of a 'player' in any game where the score can in- and decrease. However, the animation should only be shown when the score increases. Having such a convenient configuration option to skip the animation might be helpful.

I created the PR against master as the develop branch is behind the master branch.

Related Issues

No Issue created

Checklist

[x] Have you added tests where necessary? Do all the test pass?

There is only one test that doesn't really test the business code so I didn't add a new one as the testing facility is not properly set up for adding new meaningful tests

[x] Have you added descriptive comments to your code?

[x] Have you updated the documentation related to this propo
opened by stonko1994 2
Dynamic library prevents code signing from working in Xcode Cloud
In Package.swift this line forces you to choose either "Embed and Sign" or not to code sign when including ConfettiSwiftUI into an app (in Xcode):

type: .dynamic

This line isn't really needed.

I discovered this when attempting to build one of my apps with Xcode Cloud. Here's the error you get during the archive process:

ITMS-90334: Invalid Code Signature Identifier. The identifier "ConfettiSwiftUI-55554944d4fbc3d9c42f38d3b8bfbbc8cd81fa38" in your code signature for "ConfettiSwiftUI" must match its Bundle Identifier "ConfettiSwiftUI"
opened by joulupukki 2
Open Source License
Description

Hey Simon, cool project! In the README file you mention "Installation" and "Usage," yet legally no one can use this project in an app on the App Store because you hold the copyright. Could you put a LICENSE file in the repository to permit usage? I recommend the MIT open source license as it is the most popular in the Swift community and widely compatible. Thanks!

Tasks

[x] Make LICENSE file based on the MIT template
opened by chrisjf 2
Crash when app goes to background before animation is complete
Expected Behaviour

Animation stops when app goes to background or completes successfully while in background

Actual Behaviour

"Fatal error: Index out of range," on line 134, "animate[value-1].toggle()" value in this statement is 0 leading to "index out of range"

Steps to Reproduce the Issue

Do something that triggers confetti animation

Press Home button before animation is complete

Reproduce
opened by twestley 1
Added View extension to make it easier to implement it in any view
Description

Added View extension to make it easier to implement it in any view

Checklist

[*] Have you added tests where necessary? Do all the test pass?

[*] Have you added descriptive comments to your code?

[*] Have you updated the documentation related to this propo
opened by cs4alhaider 1
Add ability to use images as confetti
Description

Adds the ability to include images as confetti

Checklist

[x] Have you added tests where necessary? Do all the test pass?

[x] Have you added descriptive comments to your code?

[ ] Have you updated the documentation related to this propo
opened by jostster 0

Releases(1.0.1)

1.0.1(May 14, 2022)
What's Changed

One last confetti physics adjustment by @twhitt14 in https://github.com/simibac/ConfettiSwiftUI/pull/24

docs: ✏️ improve code snippets in README for easy copying by @MarcoEidinger in https://github.com/simibac/ConfettiSwiftUI/pull/25

Fix crash when app goes to background before animation is complete by @kamaal111 in https://github.com/simibac/ConfettiSwiftUI/pull/23

New Contributors

@MarcoEidinger made their first contribution in https://github.com/simibac/ConfettiSwiftUI/pull/25

@kamaal111 made their first contribution in https://github.com/simibac/ConfettiSwiftUI/pull/23

Full Changelog: https://github.com/simibac/ConfettiSwiftUI/compare/1.0.0...1.0.1
Source code(tar.gz)
Source code(zip)
1.0.0(Apr 16, 2022)
What's Changed

Added new case, sfSymbol to use an image from SF Symbols as an option. by @tunabelly in https://github.com/simibac/ConfettiSwiftUI/pull/14

Fix typo of word 'couter' to 'counter' by @stephenmdixon in https://github.com/simibac/ConfettiSwiftUI/pull/16

Fix typo firtAppear to firstAppear by @elfanek in https://github.com/simibac/ConfettiSwiftUI/pull/11

Added View extension to make it easier to implement it in any view by @cs4alhaider in https://github.com/simibac/ConfettiSwiftUI/pull/13

New Contributors

@tunabelly made their first contribution in https://github.com/simibac/ConfettiSwiftUI/pull/14

@stephenmdixon made their first contribution in https://github.com/simibac/ConfettiSwiftUI/pull/16

@elfanek made their first contribution in https://github.com/simibac/ConfettiSwiftUI/pull/11

@cs4alhaider made their first contribution in https://github.com/simibac/ConfettiSwiftUI/pull/13

Full Changelog: https://github.com/simibac/ConfettiSwiftUI/compare/0.3.1...1.0.0
Source code(tar.gz)
Source code(zip)
0.3.1(Mar 13, 2022)

Smoother physics due to improved animation curve
Source code(tar.gz)
Source code(zip)
0.3.0(Nov 4, 2021)

Source code(tar.gz)
Source code(zip)
0.2.1(Dec 4, 2020)

Source code(tar.gz)
Source code(zip)
0.1.0(Nov 26, 2020)

Source code(tar.gz)
Source code(zip)

Owner

Simon Bachmann

GitHub

SwiftUI project demonstrating Custom coded confetti animation for checkout page

Confetti-Checkout SwiftUI project demonstrating Custom coded confetti animation for checkout page NOTE: CAEmitterLayer is not used but all the confett

29 Sep 28, 2022

The Effects Library allows developers to create sophisticated and realistic particle systems such as snow, fire, rain, confetti, fireworks, and smoke with no or minimal effort.

182 Jan 6, 2023

SwiftUI Animation Library. Useful SwiftUI animations including Loading/progress, Looping, On-off, Enter, Exit, Fade, Spin and Background animations that you can directly implement in your next iOS application or project. The library also contains huge examples of spring animations such as Inertial Bounce, Shake, Twirl, Jelly, Jiggle, Rubber Band, Kitchen Sink and Wobble effects. Browse, find and download the animation that fits your needs.

swiftui-animations SwiftUI Animations Library. Useful SwiftUI animations for your next project. YouTube Tutorials: https://www.youtube.com/nimbbble An