ConfettiSwiftUI

repository·master·Indexed 25 days ago

https://github.com/simibac/confettiswiftui

A pure SwiftUI library for triggering customizable confetti animations. It provides the .confettiCannon view modifier to animate shapes, emojis, SF Symbols, or custom text with support for haptic feedback, adjustable explosion radii, and repetition intervals.

Tokens
1.2K
Snippets
7
Records
9
Agent score
32%

What's inside ConfettiSwiftUI

  1. Install ConfettiSwiftUI via Swift Package Manager

    master

    To integrate ConfettiSwiftUI into your Xcode project using Swift Package Manager (Xcode 12+), add the following dependency:

    https://github.com/simibac/ConfettiSwiftUI.git, :branch="master"

    https://github.com/simibac/ConfettiSwiftUI.git, :branch="master"
  2. Install ConfettiSwiftUI manually

    master
    If you prefer not to use a dependency manager, you can integrate ConfettiSwiftUI manually by placing the Sources/ConfettiSwiftUI folder into your Xcode project. Ensure that you enable Copy items if needed and Create groups during the import process.
  3. Use the confettiCannon view modifier

    master

    To trigger confetti animations, import ConfettiSwiftUI and attach the .confettiCannon(trigger:) modifier to a SwiftUI view.

    Animations are triggered by changing the value of an integer passed as a Binding<Int>. Any change (increment or decrement) to this variable will start a new animation sequence.

    import ConfettiSwiftUI
    import SwiftUI
    
    struct ContentView: View {
        
        @State private var trigger: Int = 0
        
        var body: some View {
            Button("🎉") {
                trigger += 1
            }
            .confettiCannon(trigger: $trigger)
        }
    }
  4. Create a 'Make-it-Rain' effect

    master

    Simulate falling money by using a small number of confettis (e.g., num: 1), high repetitions, a short interval, and emoji text representing currency.

    .confettiCannon(trigger: $trigger, num:1, confettis: [.text("💵"), .text("💶"), .text("💷"), .text("💴")], confettiSize: 30, repetitions: 50, repetitionInterval: 0.1)
  5. Create a firework effect

    master

    To simulate a firework, set the openingAngle to 0 and closingAngle to 360 degrees, and increase the num of confettis.

    .confettiCannon(trigger: $trigger, num: 50, openingAngle: Angle(degrees: 0), closingAngle: Angle(degrees: 360), radius: 200)
  6. Reference: confettiCannon parameters

    master

    The .confettiCannon modifier accepts the following parameters to customize the animation:

    parametertypedescriptiondefault
    triggerBinding<Int>on any change of this variable triggers the animation0
    numIntamount of confettis20
    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]
    confettiSizeCGFloatsize that confettis and emojis are scaled to10.0
    rainHeightCGFloatvertical distance that confettis pass600.0
    fadesOutBoolwhether confettis fade outtrue
    opacityDoublemaximum opacity during the animation1.0
    openingAngleAngleboundary that defines the opening angle in degreesAngle.degrees(60)
    closingAngleAngleboundary that defines the closing angle in degreesAngle.degrees(120)
    radiusCGFloatexplosion radius300.0
    repetitionsIntnumber of repetitions for the explosion1
    repetitionIntervalDoubleduration between the repetitions1.0
    hapticFeedbackBoolhaptic feedback on each confetti explosiontrue