DOCSEARCHbyAlgolia
Submit Docs

SPConfetti

repository·main·Indexed 43 days ago

https://github.com/ivanvorobei/spconfetti

A simple solution for displaying smooth confetti animations on iOS and tvOS. Supports multiple particle shapes, custom images, and various animation directions for both UIKit and SwiftUI. Features include global configuration via SPConfettiConfiguration and lifecycle notifications through the SPConfettiDelegate protocol.

Tokens
1.3K
Snippets
8
Records
9
Agent score
5%

What's inside SPConfetti

  2. Quick Start with UIKit

    main

    You can trigger confetti animations globally using the SPConfetti static methods. You can specify the animation direction and a list of particle shapes. To stop the animation, call stopAnimating(). You can also provide a duration to automatically stop the animation after a set number of seconds.

    // For start animation
SPConfetti.startAnimating(.centerWidthToDown, particles: [.triangle, .arc])

// For stop animation
SPConfetti.stopAnimating()

// To stop animation automatically in time
SPConfetti.startAnimating(.centerWidthToDown, particles: [.triangle, .arc], duration: 3)

  4. Use SPConfetti in SwiftUI

    main

    In SwiftUI, use the .confetti(isPresented:animation:particles:duration:) modifier. This modifier ensures the effect is presented within the corresponding window scene and always produces a full-screen effect.

    You can also use the .confettiParticle(_:_:) modifier to apply specific configurations (like velocity) to a particular confetti instance, overriding global settings.

    struct FancyButton: View {
    @State private var isPresenting = false
    
    var body: some View {
        Button("🎉 hooray!", action: { isPresenting.toggle() })
            .confetti(isPresented: $isPresenting,
                      animation: .fullWidthToDown,
                      particles: [.triangle, .arc],
                      duration: 3.0)
    }
}

// Overriding specific particle properties
Button("Fast", action: { isPresenting1.toggle() })
    .confetti(isPresented: $isPresenting1,
              animation: .fullWidthToDown,
              particles: [.triangle, .arc],
              duration: 3.0)
    .confettiParticle(\.velocity, 600)

  5. Install SPConfetti via Swift Package Manager

    main

    Add SPConfetti as a dependency in your Package.swift file using the following URL and version requirement:

    dependencies: [
    .package(url: "https://github.com/ivanvorobei/SPConfetti", .upToNextMajor(from: "1.4.0"))
]

  6. Set Global Appearance for SPConfetti

    main

    Use SPConfettiConfiguration to set default values that will apply to all subsequent confetti view configurations. This includes particle types and particle colors.

    SPConfettiConfiguration.particles = [.star]
SPConfettiConfiguration.particlesConfig.colors = [.systemRed, .systemBlue]

  7. Configure animation direction in UIKit

    main

    Use the animation property on an SPConfettiView instance to change the emitter's direction and size. The available SPConfettiAnimation cases are:

    • .fullWidthToDown
    • .fullWidthToUp
    • .centerWidthToDown
    • .centerWidthToUp
    confettiView.animation = .centerWidthToDown

  8. Handle confetti events with SPConfettiDelegate

    main

    To receive notifications about the animation lifecycle, assign a delegate to your SPConfettiView and implement the SPConfettiDelegate protocol.

    Note: confettiDidEndAnimating may be called after confettiDidStopAnimating because existing particles remain visible after emission stops.

    confettiView.delegate = self

// Implementation of SPConfettiDelegate
protocol SPConfettiDelegate: AnyObject {
    func confettiDidStartAnimating()
    func confettiDidStopAnimating()
    func confettiDidEndAnimating()
}

  9. Customize particles in UIKit

    main

    You can customize the particle styles on an SPConfettiView.

    Available built-in shapes include: .arc, .star, .heart, .circle, .triangle, and .polygon.

    You can also use custom images by using the .custom(UIImage) case.

    // Using built-in shapes
confettiView.particles = [.star]

// Using a custom image
confettiView.particles = [.custom(yourImage)]