Giter VIP home page Giter VIP logo

getstream / effects-library Goto Github PK

View Code? Open in Web Editor NEW
306.0 10.0 13.0 297.64 MB

The Effects Library allows developers to create sophisticated and realistic particle systems such as snow, fire, rain, confetti, fireworks, and smoke with no or minimal effort.

Home Page: https://getstream.github.io/effects-library/documentation/effectslibrary/

License: Apache License 2.0

Swift 100.00%
confetti confetti-animation fireworks fireworks-animation ios-animation ios-library particles particles-animation swiftui-animations ios-screen-effects

effects-library's Introduction

Introducing the SwiftUI Effects Library Twitter-2400x1350px

EffectsLibrary

The Effects Library allows developers to create sophisticated and realistic particle systems such as snow, fire, rain, confetti, fireworks, and smoke with no or minimal effort.

All effects previews

It has premade effects ready to be used for your compositions. You can also build your own effects using nearly any image, shape, text view, and flexible customization options.

It is completely open-source with well-designed documentation and an interactive walkthrough tutorial to assist you to get started.

You can check the project’s sample app, contribute to its companion GitHub repository or let us know your feedback.

πŸš€ Getting started

Installation

The package is distributed via Swift Package Manager. We have a very thorough tutorial with clear instructions for the installation. You can also follow these steps:

  1. In Xcode go to File -> Add Packages
  2. In the top right of the opening window (where it says Search or Enter Package URL) paste the link to the repository: https://github.com/GetStream/effects-library
  3. For the Dependency Rule select Up to Next Major Version and enter 1.0.0 in the following field
  4. Hit Add Package
  5. Confirm Add Package in the upcoming window as well

Set up your first effect

When the setup is done it is very straightforward to add your first effect. They are all SwiftUI Views so you can just drop them into your layouts and get going. Here are all the Views:

  • FireworksView
  • ConfettiView
  • SnowView
  • RainView
  • SmokeView
  • FireView

An example for a View that uses one of the effects:

import SwiftUI
import EffectsLibrary

struct ContentView: View {
    var body: some View {
        FireworksView()
    }
}

Customize an effect with its config

Effects can be customized further with their config files. Here's an example of that:

struct ContentView: View {
    var body: some View {
        FireworksView(
            config: FireworksConfig(
                content: [
                    .shape(.triangle, .blue, 10.0),
                    .shape(.square, .green, 10.0),
                    .shape(.circle, .red, 10.0),
                    .emoji("πŸš€", 10.0),
                    .emoji("πŸ’₯", 3.0),
                    .image(UIImage(named: "stream-logo")!, nil, 0.8)
                ],
                intensity: .high,
                lifetime: .long,
                initialVelocity: .fast,
                fadeOut: .slow
            )
        )
    }
}

There are way more examples that can be found in the tutorials we provide for you:

🧡 Useful resources

We have created a beautiful site with documentation to help you get started with the library. There are some basic articles out there (with more and more being added over time).

There is also a number of tutorials we have created to make getting started with the library as seamless as possible. There is an entry-level tutorial where you will learn how to add the library to your app and take your first steps by adding the first effects.

There is also an advanced tutorial that showcases how to configure an effect to your needs. This will include fine-tuning with setting different configurations. Also, it will showcase completely changing up the effect and adding custom branding, all with very few lines of code.

The fun part is, that we've fully used Apple's wonderful DocC documentation style throughout the package. That means that all functionality is heavily documented and is nicely integrated in Xcode.

You can even have a look at the way the tutorials and the entire documentation is created. Just have a look at the Documentation folder.

Also, we have created a sample app so that you can see how to leverage the library in a real-world application. This is also fully open-source and it showcases all the effects that we have in the library.

Note: we're always happy to see contribution from the community, so feel free to play around, open issues and PRs and have fun with it.

🀩 About us

This package was created by Stefan Blos and Amos Gyamfi at Stream. In case you want to contribute or just reach out to us you can do that on Github (with an issue, PR or similar) or Twitter.

We highly appreciate you considering our product. If you enjoy it, please consider giving the repo a ⭐️ as that will help us continue work on the project and realize all the wonderful things we have planned for the future.

effects-library's People

Contributors

amosgyamfi avatar daemonloki avatar jeroenleenarts avatar vladorackle avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

effects-library's Issues

Add a custom config option for configuration Enums

Right now, we are only allowing pre-set values for configurations. An example is the Lifetime enum which only has options for the values .low, medium, and .high.

The advantage that brings is that developers do not need to know about the internals happening and the values that are being set for each of the cases.

The disadvantage is that it limits creativity and customization options.

We want to strike a sweet balance here and therefore suggest adding a .custom(CGFloat) option, making use of associated values for enums. Therefore developers not caring about the internals can still use the existing cases while more avid users can dive deep into customization with the .config option.

Add sounds to the effects

This could add a nice touch and a new dimension to the effects.

Could be a config option because it wouldn't always make sense. Still a lot of things to figure out here:

  • how to best incorporate it in the developer experience
  • where to get sounds that are free to use for our use-case
  • how to handle e.g. long-running audio (loops?)

Allow integration via CocoaPods

Right now, the EffectsLibrary is only available as a Swift Package.

We want to make it also available for integration via CocoaPods. This has not been requested as of yet, but could also be the case that users depending on CocoaPods are simply not considering the library.

Add support for macOS

Currently, the library is only running on iOS and iPadOS.

Making it available for macOS as well would allow for more use-cases on the new platform.
Due to the fact that it relies on SwiftUI for presentation and and CoreAnimation and SpriteKit for the effects, this should be possible in general.

There are some occurrences where it makes of e.g. UIColor which needs to be adapted but overall it's a possible thing to do and allows for way more flexibility in the usage.

App terminated due to memory issue

Hi, thanks for this nice effect-library! I use ConfettiView which works perfectly. Unfortunately, this is not the case with FireWorksView, which causes memory problems. When I run FireWorksView it doesn't release all the memory, and running it again makes the problem even more apparent. Then it consumes memory continuously and builds more and more memory until the app crashes. I am running SwiftUI and latest release of iOS and Xcode.

Allow integration via Carthage

Right now, the EffectsLibrary is only available as a Swift Package.

We want to make it also available for integration via Carthage. This has not been requested as of yet, but could also be the case that users depending on Carthage are simply not considering the library.

Allow to start and stop the effects programmatically

Having the option to manually start and end the effects allows for more use-cases.
Right now, this is only possible by manipulating the alpha of the effects which is not ideal in terms of both user- and developer-experience.

The idea is to have a .start() and .stop() functionality for all effects. Although different implementations would be necessary for the SpriteKit and CAEmitterLayer based effects, the API has to be the same for making it a streamlined effort for developers to integrate.

Lifetime value in `SmokeView`

During testing, the lifetime value in the SmokeConfig does not really seem to have an effect (especially compared to the fadeOutproperty.

Showcase how to use with UIKit

While the library is written in SwiftUI it is rather trivial to incorporate it inside of a UIKit app.

Having an article in the documentation that gives an example on how to do it would help developers wanting to integrate it have a helpful guide.

Add more options for EmitterPosition

The EmitterPosition option for CAEmitterLayer-based effects is pretty limited right now. It only has 3 options:

  1. .top
  2. .center
  3. .bottom

From an implementation standpoint, it is rather straightforward to expand that to more options, like .topLeading, .bottomTrailing, .centerLeading, and all combinations of them.

The calculation of the position also doesn't require much effort as the values are all given due to the embedding in the GeometryReader.

Examine properties for `FireView`

When working on the macOS migration, Amos and Stefan noticed that some of the effects don't have (huge) effects.

Specifically it happened for:

  • lifetime of the FireConfig
  • fadeOut of the FireConfig

It makes sense to check again if we have sensible defaults there.

Lifetime: .always

Hi,

I'm experimenting with the effects library to create an explosion of shapes but keep the particles alive at the end position. Is it possible to create a Lifetime: .always ?

Check Motion for a new effect to add to the Library

Motion has a lot of effects available and we want to incorporate one of them for the new version of the library.

This will mean the recreation of it. Mainly first in Kite and then porting it over to the library code.

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.