Giter VIP home page Giter VIP logo

confettiswiftui's Introduction

ConfettiSwiftUI

Β Β Β Β Β Β 

Customizable Confetti Animations in SwiftUI

πŸŒ„ Example

πŸ”­ Overview

This is an open-source library to use with SwiftUI. It allows you to create and customize confetti animations.

  • Built with pure SwiftUI.
  • Select from default confetti shapes or inject emojis as text.
  • Configure the radius and angles of the explosion.
  • Trigger animation with one state change multiple times.

πŸ”¨Support

If you like the project, don't forget to put star 🌟.

🧭 Navigation

πŸ’» Installation

Swift Package Manager

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

To integrate ConfettiSwiftUI into your Xcode project using Xcode 12, specify it in File > Swift Packages > Add Package Dependency...:

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

Manually

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

🧳 Requirements

  • iOS 14.0+ | macOS 11+
  • Swift 5+

πŸ›  Usage

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

import ConfettiSwiftUI
import SwiftUI

struct ContentView: View {
    
    @State private var counter: Int = 0
    
    var body: some View {
        Button("πŸŽ‰") {
            counter += 1
        }
        .confettiCannon(counter: $counter)
    }
}

Parameters

parameter type description default
counter Binding on any change of this variable triggers the animation 0
num Int amount of confettis 20
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]
confettiSize CGFloat size that confettis and emojis are scaled to 10.0
rainHeight CGFloat vertical distance that confettis pass 600.0
fadesOut Bool size that confettis and emojis are scaled to true
opacity Double maximum opacity during the animation 1.0
openingAngle Angle boundary that defines the opening angle in degrees Angle.degrees(60)
closingAngle Angle boundary that defines the closing angle in degrees Angle.degrees(120)
radius CGFloat explosion radius 300.0
repetitions Int number of repetitions for the explosion 0
repetitionInterval Double duration between the repetitions 1.0

Configurator Application With Live Preview

You can use the configurator app in demo project here to make your desired animation or get inspired by one of the many examples.

Examples

Color and Size Configuration

.confettiCannon(counter: $counter, colors: [.red, .black], confettiSize: 20)

Repeat Configuration

.confettiCannon(counter: $counter, repetitions: 3, repetitionInterval: 0.7)

Firework Configuration

.confettiCannon(counter: $counter, num: 50, openingAngle: Angle(degrees: 0), closingAngle: Angle(degrees: 360), radius: 200)

Emoji Configuration

.confettiCannon(counter: $counter, confettis: [.text("❀️"), .text("πŸ’™"), .text("πŸ’š"), .text("🧑")])

Endless Configuration

.confettiCannon(counter: $counter, num:1, confettis: [.text("πŸ’©")], confettiSize: 20, repetitions: 100, repetitionInterval: 0.1)

Make-it-Rain Configuration

.confettiCannon(counter: $counter, num:1, confettis: [.text("πŸ’΅"), .text("πŸ’Ά"), .text("πŸ’·"), .text("πŸ’΄")], confettiSize: 30, repetitions: 50, repetitionInterval: 0.1)

.confettiCannon(counter: $counter8, confettis: [.image("arb"), .image("eth"), .image("btc"), .image("op"), .image("link"), .image("doge")], confettiSize: 20)

πŸ‘¨β€πŸ’» Contributors

All issue reports, feature requests, pull requests and GitHub stars are welcomed and much appreciated.

✍️ Author

Simon Bachmann

πŸ“ƒ License

ConfettiSwiftUI is available under the MIT license. See the LICENSE file for more info.

πŸ“¦ Projects

The following projects have integrated ConfettiSwiftUI in their App.


confettiswiftui's People

Contributors

twhitt14 avatar cs4alhaider avatar aayush9029 avatar joulupukki avatar jostster avatar marcoeidinger avatar tunabelly avatar elfanek avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.