I was inspired by the iOS Confetti animation and thought this would be a great time to share it with you. I created the ConfettiKit iOS framework for displaying confetti (and other effects) in iOS.
The confetti animation demo is available in my repository on Github . The project is a good example of how to use swift, swiftUI, and confetti.js to implement a simple effects that creates some cool visual effects.
A Swift package for showing confetti animation that may be customized.
The demo project may be found here.
Installation:
iOS 14 and Xcode 12 are required!
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 into the file where you want it to be used: ConfettiSwiftUI import
View @State struct ContentView: struct ContentView: struct ContentView: struct ContentView: struct ContentView: counter:Int = 0 var counter:Int = 0 var counter:Int = 0 body variable: some Take a look at ZStack Text(“”). font(.system(size: 50)); font(.system(size: 50)); font(.system(size: counter += 1 onTapGesture() ConfettiCannon($counter) / ConfettiCannon($counter) / ConfettiCannon($counter) / ConfettiCannon($counter)
Demo
An example project with an iOS target has been added: https://github.com/simibac/ConfettiSwiftUIDemo
Configurations
You may create your own animation using the configurator software in the sample project here, or you can be inspired by one of the numerous examples.
Configuration by default
Code
ConfettiCannon(counter: $counter1) is a cannon that shoots confetti.
Configuration of Color and Size
Code:
$counter2, colors: [.red,.black], confettiSize: 20) ConfettiCannon(counter: $counter2, colors: [.red,.black], confettiSize: 20)
Configuration should be done again.
Code:
ConfettiCannon (repetitionInterval: 0.7) (counter: $counter3, repetitions: 3)
Configuration of Fireworks
Code:
ConfettiCannon(counter: $counter4, num: 50, opening)(counter: $counter4, num: 50, opening)(counter: $counter4, num: Angle: Angle(degrees: 0), radius: 200) Angle: Angle(degrees: 360), radius: 200) Angle: Angle(degrees: 0), closingAngle: Angle(degrees: 360), radius: 200)
Configuration of Emoji
Code:
ConfettiCannon(counter: $counter5, confettis: [.text(“”),.text(“”),.text(“”),.text(“”),.text(“”),.text(“”),.text(“”),.text(“”)])
Infinite Configuration
Code:
$counter6, num:1, confettis: [.text(“”)] ConfettiCannon(counter: $counter6, num:1, confettis: [.text(“”)] , confettiSize: 20, repetitions: 100, repetitionInterval: 0.1), confettiSize: 20, repetitions: 100, repetitionInterval: 0.1), confettiSize
Configuration to Make It Rain
Code:
ConfettiCannon(counter: $counter7, num:1, confettis: [.text(“”),.text(“”),.text(“”),.text(“”),.text(“”),.text(“”),.text(“”),.text(“”)] , confettiSize: 30, repetitions: 50, repetitionInterval: 0.1), confettiSize: 30, repetitions: 50, repetitionInterval: 0.1), confettiSize
Parameters
| parameter | type | description | default |
|---|---|---|---|
| counter | Binding | Any change in this variable causes the animation to start. | 0 |
| num | Int | confetti confetti confetti confetti confetti confetti | 20 |
| confettis | [ConfettiType] | text and a list of shapes | [.shape(.circle),.shape(.triangle),.shape(.square),.shape(.slimRectangle),.shape(.roundedCross)] [.shape(.circle),.shape(.triangle),.shape(.square),.shape(.slimRectangle),.shape(.slimRectangle),.shape(.slim |
| colors | [Color] | a list of the colors that have been applied to the default forms | [.blue,.red,.green,.yellow,.pink,.purple,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, .orange] |
| confettiSize | CGFloat | confettis and emojis are resized to this size | 10.0 |
| rainHeight | CGFloat | Confettis travel a vertical distance. | 600.0 |
| fadesOut | Bool | confettis and emojis are resized to this size | true |
| opacity | Double | During the animation, the opacity should be at its highest. | 1.0 |
| openingAngle | Angle | The angle of the opening in degrees is defined by a border. | Angle.degrees(60) |
| closingAngle | Angle | The closing angle in degrees is defined by a border. | Angle.degrees(120) |
| radius | CGFloat | Radius of the explosion | 300.0 |
| repetitions | Int | the number of times the explosion occurs | 0 |
| repetitionInterval | Double | intervals between repeats | 1.0 |
Projects
ConfettiSwiftUI has been incorporated into the following projects.
GitHub
https://github.com/simibac/ConfettiSwiftUI
This is a SwiftUI Package for Configurable Confetti Animation. It’s based on the SwiftUI package, which helps you easily create and customize your own UIViews. This package will help you create customizable confetti animation.. Read more about confetti api and let us know what you think.
Related Tags
- ios confetti-animation
- swiftui lottie animation
- saconfettiview
- swiftui particle emitter
- confetti github
