SPConfetti

A simple solution to show the confetti to the user. Smoothly starts and stops. Allow set multiply diffrent particles at once. You can change shapes and switch between styles. It is possible to change the size and position of emitter. Ready use arc, star, heart triangle shapes. You can set custom shapes with your image.

Navigate

• Installation
  • Swift Package Manager
  • CocoaPods
  • Manually
• UIKit
  • Quick Start
  • Animation
  • Particles
  • Global Appearance
  • Delegate
• SwiftUI
• Russian Community

Installation

Ready for use on iOS 11+ and tvOS 11+.

Swift Package Manager

The Swift Package Manager is a tool for automating the distribution of Swift code and is integrated into the swift compiler. It’s integrated with the Swift build system to automate the process of downloading, compiling, and linking dependencies.

Once you have your Swift package set up, adding as a dependency is as easy as adding it to the dependencies value of your Package.swift.

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

CocoaPods:

CocoaPods is a dependency manager. For usage and installation instructions, visit their website. To integrate using CocoaPods, specify it in your Podfile:

pod 'SPConfetti'

Manually

If you prefer not to use any of dependency managers, you can integrate manually. Put Sources/SPConfetti folder in your Xcode project. Make sure to enable Copy items if needed and Create groups.

UIKit

Quick Start

For easy start confetti animation call this:

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

// For stop animation
SPConfetti.stopAnimating()

If you want stop animation automatically in time, use it:

SPConfetti.startAnimating(.centerWidthToDown, particles: [.triangle, .arc], duration: 3)

You can manage by view SPConfettiView with custom layout if need.

Animation

For change emitter size and direction, use animation property. Available next animations:

enum SPConfettiAnimation {

    case fullWidthToDown
    case fullWidthToUp
    case centerWidthToDown
    case centerWidthToUp
}

// To change animation:
confettiView.animation = .centerWidthToDown

Particles

You can customise particles style and animation config.

// Available `.arc`, `.star`, `.heart`, `.circle`, `.triangle` and `.polygon`.
// You can set many styles particles.
confettiView.particles = [.star]

For set custom image use .custom case:

confettiView.particles = [.custom(yourImage)]

Global Appearance

You can set global values with configuration object. It will apply for all next configuration of confetti view by default.

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

Delegate

For get notification about events, set delegate for view and implement protocol SPConfettiDelegate:

confettiView.delegate = self

Looks at protocol:

protocol SPConfettiDelegate: AnyObject {

    // Caling when animation start.
    func confettiDidStartAnimating()

    // Caling when animation stop.
    func confettiDidStopAnimating()

    // Caling when animation end. 
    // May calling after `confettiDidStopAnimating`,
    // becouse after stop emitting particles existing particles
    // still available.
    func confettiDidEndAnimating()
}

SwiftUI

If you are using SwiftUI, it is recommended that you use the modifier we provide. This will ensure the confetti effects are presented within the corresponding window scene.

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)
    }
}

The confetti modifier can be attached to any of the view hierarchies. It will always produce a full screen effect.

The global configuration above also works in SwiftUI. However, you can set different configurations for each confetti separately by using the .confettiParticle(_:_:) modifier.

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

    Button("Slow", action: { isPresenting2.toggle() })
            .confetti(isPresented: $isPresenting2,
                      animation: .fullWidthToDown,
                      particles: [.triangle, .arc],
                      duration: 3.0)
            .confettiParticle(\.velocity, 100)
}

Russian Community

Я веду телеграм-канал, там публикую новости и туториалы.
С проблемой помогут в чате.

Видео-туториалы выклыдываю на YouTube: