Compare commits
1 Commits
Author | SHA1 | Date |
---|---|---|
![]() |
fd8ebae3b9 |
|
@ -26,12 +26,9 @@ let package = Package(
|
|||
// Targets can depend on other targets in this package, and on products in packages this package depends on.
|
||||
.target(
|
||||
name: "ConfettiSwiftUI",
|
||||
dependencies: [],
|
||||
path: "Sources"),
|
||||
dependencies: []),
|
||||
.testTarget(
|
||||
name: "ConfettiSwiftUITests",
|
||||
dependencies: ["ConfettiSwiftUI"],
|
||||
path: "Tests"),
|
||||
|
||||
dependencies: ["ConfettiSwiftUI"]),
|
||||
]
|
||||
)
|
||||
|
|
26
README.md
26
README.md
|
@ -79,21 +79,19 @@ If you prefer not to use any of dependency managers, you can integrate `Confetti
|
|||
First, add `import ConfettiSwiftUI` on every `swift` file you would like to use `ConfettiSwiftUI`. Define a integer as a state varable which is responsible for triggering the animation. Any change to that variable will span a new animation (increment and decrement).
|
||||
|
||||
```swift
|
||||
import ConfettiSwiftUI
|
||||
import SwiftUI
|
||||
import ConfettiSwiftUI
|
||||
|
||||
struct ContentView: View {
|
||||
|
||||
@State private var counter: Int = 0
|
||||
@State var counter:Int = 0
|
||||
|
||||
var body: some View {
|
||||
Button("🎉") {
|
||||
counter += 1
|
||||
ZStack{
|
||||
Text("🎉").font(.system(size: 50)).onTapGesture(){counter += 1}
|
||||
ConfettiCannon(counter: $counter)
|
||||
}
|
||||
.confettiCannon(counter: $counter)
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
@ -121,7 +119,7 @@ You can use the configurator app in [demo project here](https://github.com/simib
|
|||
<p align="center">
|
||||
<img src="./Gifs/configurator.png" width="150" />
|
||||
<img src="./Gifs/examples.png" width="150" />
|
||||
</p>
|
||||
</p>
|
||||
|
||||
### Examples
|
||||
|
||||
|
@ -132,7 +130,7 @@ You can use the configurator app in [demo project here](https://github.com/simib
|
|||
</p>
|
||||
|
||||
```swift
|
||||
.confettiCannon(counter: $counter, colors: [.red, .black], confettiSize: 20)
|
||||
ConfettiCannon(counter: $counter2, colors: [.red, .black], confettiSize: 20)
|
||||
```
|
||||
|
||||
#### Repeat Configuration
|
||||
|
@ -142,7 +140,7 @@ You can use the configurator app in [demo project here](https://github.com/simib
|
|||
</p>
|
||||
|
||||
```swift
|
||||
.confettiCannon(counter: $counter, repetitions: 3, repetitionInterval: 0.7)
|
||||
ConfettiCannon(counter: $counter3, repetitions: 3, repetitionInterval: 0.7)
|
||||
```
|
||||
|
||||
#### Firework Configuration
|
||||
|
@ -152,7 +150,7 @@ You can use the configurator app in [demo project here](https://github.com/simib
|
|||
</p>
|
||||
|
||||
```swift
|
||||
.confettiCannon(counter: $counter, num: 50, openingAngle: Angle(degrees: 0), closingAngle: Angle(degrees: 360), radius: 200)
|
||||
ConfettiCannon(counter: $counter4, num: 50, openingAngle: Angle(degrees: 0), closingAngle: Angle(degrees: 360), radius: 200)
|
||||
```
|
||||
|
||||
#### Emoji Configuration
|
||||
|
@ -162,7 +160,7 @@ You can use the configurator app in [demo project here](https://github.com/simib
|
|||
</p>
|
||||
|
||||
```swift
|
||||
.confettiCannon(counter: $counter, confettis: [.text("❤️"), .text("💙"), .text("💚"), .text("🧡")])
|
||||
ConfettiCannon(counter: $counter5, confettis: [.text("❤️"), .text("💙"), .text("💚"), .text("🧡")])
|
||||
```
|
||||
|
||||
#### Endless Configuration
|
||||
|
@ -172,7 +170,7 @@ You can use the configurator app in [demo project here](https://github.com/simib
|
|||
</p>
|
||||
|
||||
```swift
|
||||
.confettiCannon(counter: $counter, num:1, confettis: [.text("💩")], confettiSize: 20, repetitions: 100, repetitionInterval: 0.1)
|
||||
ConfettiCannon(counter: $counter6, num:1, confettis: [.text("💩")], confettiSize: 20, repetitions: 100, repetitionInterval: 0.1)
|
||||
```
|
||||
|
||||
#### Make-it-Rain Configuration
|
||||
|
@ -182,7 +180,7 @@ You can use the configurator app in [demo project here](https://github.com/simib
|
|||
</p>
|
||||
|
||||
```swift
|
||||
.confettiCannon(counter: $counter, num:1, confettis: [.text("💵"), .text("💶"), .text("💷"), .text("💴")], confettiSize: 30, repetitions: 50, repetitionInterval: 0.1)
|
||||
ConfettiCannon(counter: $counter7, num:1, confettis: [.text("💵"), .text("💶"), .text("💷"), .text("💴")], confettiSize: 30, repetitions: 50, repetitionInterval: 0.1)
|
||||
```
|
||||
|
||||
## 👨💻 Contributors
|
||||
|
|
|
@ -19,7 +19,6 @@ public enum ConfettiType:CaseIterable, Hashable {
|
|||
|
||||
case shape(Shape)
|
||||
case text(String)
|
||||
case sfSymbol(symbolName: String)
|
||||
|
||||
public var view:AnyView{
|
||||
switch self {
|
||||
|
@ -33,8 +32,6 @@ public enum ConfettiType:CaseIterable, Hashable {
|
|||
return AnyView(RoundedCross())
|
||||
case let .text(text):
|
||||
return AnyView(Text(text))
|
||||
case .sfSymbol(let symbolName):
|
||||
return AnyView(Image(systemName: symbolName))
|
||||
default:
|
||||
return AnyView(Circle())
|
||||
}
|
||||
|
@ -51,8 +48,8 @@ public struct ConfettiCannon: View {
|
|||
@StateObject private var confettiConfig:ConfettiConfig
|
||||
|
||||
@State var animate:[Bool] = []
|
||||
@State var finishedAnimationCounter = 0
|
||||
@State var firstAppear = false
|
||||
@State var finishedAnimationCouter = 0
|
||||
@State var firtAppear = false
|
||||
@State var error = ""
|
||||
|
||||
/// renders configurable confetti animaiton
|
||||
|
@ -115,22 +112,22 @@ public struct ConfettiCannon: View {
|
|||
|
||||
public var body: some View {
|
||||
ZStack{
|
||||
ForEach(finishedAnimationCounter..<animate.count, id:\.self){ i in
|
||||
ForEach(finishedAnimationCouter..<animate.count, id:\.self){ i in
|
||||
ConfettiContainer(
|
||||
finishedAnimationCounter: $finishedAnimationCounter,
|
||||
finishedAnimationCouter: $finishedAnimationCouter,
|
||||
confettiConfig: confettiConfig
|
||||
)
|
||||
}
|
||||
}
|
||||
.onAppear(){
|
||||
firstAppear = true
|
||||
firtAppear = true
|
||||
}
|
||||
.onChange(of: counter){value in
|
||||
if firstAppear{
|
||||
if firtAppear{
|
||||
for i in 0...confettiConfig.repetitions{
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + confettiConfig.repetitionInterval * Double(i)) {
|
||||
animate.append(false)
|
||||
if(value > 0 && value < animate.count){
|
||||
if(value < animate.count){
|
||||
animate[value-1].toggle()
|
||||
}
|
||||
}
|
||||
|
@ -142,7 +139,7 @@ public struct ConfettiCannon: View {
|
|||
|
||||
@available(iOS 14.0, macOS 11.0, watchOS 7, tvOS 14.0, *)
|
||||
struct ConfettiContainer: View {
|
||||
@Binding var finishedAnimationCounter:Int
|
||||
@Binding var finishedAnimationCouter:Int
|
||||
@StateObject var confettiConfig:ConfettiConfig
|
||||
@State var firstAppear = true
|
||||
|
||||
|
@ -155,7 +152,7 @@ struct ConfettiContainer: View {
|
|||
.onAppear(){
|
||||
if firstAppear{
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + confettiConfig.animationDuration) {
|
||||
self.finishedAnimationCounter += 1
|
||||
self.finishedAnimationCouter += 1
|
||||
}
|
||||
firstAppear = false
|
||||
}
|
||||
|
@ -191,7 +188,7 @@ struct ConfettiView: View{
|
|||
}
|
||||
|
||||
func getAnimation() -> Animation {
|
||||
return Animation.timingCurve(0.1, 0.8, 0, 1, duration: getAnimationDuration())
|
||||
return Animation.timingCurve(0, 1, 0, 1, duration: getAnimationDuration())
|
||||
}
|
||||
|
||||
func getDistance() -> CGFloat {
|
||||
|
@ -282,7 +279,7 @@ class ConfettiConfig: ObservableObject {
|
|||
self.radius = radius
|
||||
self.repetitions = repetitions
|
||||
self.repetitionInterval = repetitionInterval
|
||||
self.explosionAnimationDuration = Double(radius / 1300)
|
||||
self.explosionAnimationDuration = Double(radius / 1400)
|
||||
self.rainAnimationDuration = Double((rainHeight + radius) / 200)
|
||||
}
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
//
|
||||
// View+ConfettiCannon.swift
|
||||
//
|
||||
//
|
||||
// Created by Abdullah Alhaider on 24/03/2022.
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
|
||||
public extension View {
|
||||
|
||||
/// renders configurable confetti animaiton
|
||||
///
|
||||
/// - Usage:
|
||||
///
|
||||
/// ```
|
||||
/// import SwiftUI
|
||||
///
|
||||
/// struct ContentView: View {
|
||||
///
|
||||
/// @State private var counter: Int = 0
|
||||
///
|
||||
/// var body: some View {
|
||||
/// Button("Wow") {
|
||||
/// counter += 1
|
||||
/// }
|
||||
/// .confettiCannon(counter: $counter)
|
||||
/// }
|
||||
/// }
|
||||
/// ```
|
||||
///
|
||||
/// - Parameters:
|
||||
/// - counter: on any change of this variable the animation is run
|
||||
/// - num: amount of confettis
|
||||
/// - colors: list of colors that is applied to the default shapes
|
||||
/// - confettiSize: size that confettis and emojis are scaled to
|
||||
/// - rainHeight: vertical distance that confettis pass
|
||||
/// - fadesOut: reduce opacity towards the end of the animation
|
||||
/// - opacity: maximum opacity that is reached during the animation
|
||||
/// - openingAngle: boundary that defines the opening angle in degrees
|
||||
/// - closingAngle: boundary that defines the closing angle in degrees
|
||||
/// - radius: explosion radius
|
||||
/// - repetitions: number of repetitions of the explosion
|
||||
/// - repetitionInterval: duration between the repetitions
|
||||
///
|
||||
@ViewBuilder func confettiCannon(
|
||||
counter: Binding<Int>,
|
||||
num: Int = 20,
|
||||
confettis: [ConfettiType] = ConfettiType.allCases,
|
||||
colors: [Color] = [.blue, .red, .green, .yellow, .pink, .purple, .orange],
|
||||
confettiSize: CGFloat = 10.0,
|
||||
rainHeight: CGFloat = 600.0,
|
||||
fadesOut: Bool = true,
|
||||
opacity: Double = 1.0,
|
||||
openingAngle: Angle = .degrees(60),
|
||||
closingAngle: Angle = .degrees(120),
|
||||
radius: CGFloat = 300,
|
||||
repetitions: Int = 0,
|
||||
repetitionInterval: Double = 1.0
|
||||
) -> some View {
|
||||
ZStack {
|
||||
self
|
||||
ConfettiCannon(
|
||||
counter: counter,
|
||||
num: num,
|
||||
confettis: confettis,
|
||||
colors: colors,
|
||||
confettiSize: confettiSize,
|
||||
rainHeight: rainHeight,
|
||||
fadesOut: fadesOut,
|
||||
opacity: opacity,
|
||||
openingAngle: openingAngle,
|
||||
closingAngle: closingAngle,
|
||||
radius: radius,
|
||||
repetitions: repetitions,
|
||||
repetitionInterval: repetitionInterval
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue