Bunimation

An animation library implemented with SwiftUI.

BuniEndless

Balls spin forever on the infinity sign.

Usage

You will create a Binding variable due to you can change endless shape's color and balls' color anytime.

@State var endlessColor: Color = .yellow
@State var ballsColor: Color = .yellow

Examples

BuniEndless(endlessColor: $endlessColor, ballsColor: $ballsColor)

BuniLoading

This is a loading indicator, you can customize it's background color.

Usage

You will create a Binding variable due to you can change background color anytime.

@State var circleColor: Color = .yellow

Examples

BuniLoading(circleColor: $circleColor)

Buniball

Buniball is a loading indicator. You can give your customized view, size, count (you need more than one), space between customized views, animation time and available movements which is up, down or both.

Usage

    init(animationTime: Double = 1, ballCount: Int = 6,
        ballSize: CGSize = CGSize(width: 24, height: 24),
        space: CGFloat = 8, 
        availableMovement: (up: Bool, down: Bool) = (true, true), 
        @ViewBuilder view: () -> AnimatedView)

Examples

    Buniball(animationTime: 1, ballCount: 5, 
            ballSize: CGSize(width: 30, height: 30), 
            space: 5, availableMovement: (true, false)) {
            Circle()
        }

Try avaliableMovement as (true, true)

    Buniball(animationTime: 1, ballCount: 5, 
            ballSize: CGSize(width: 30, height: 30), 
            space: 5, availableMovement: (true, true)) {
            Circle()
        }

Try avaliableMovement as (false, true)

    Buniball(animationTime: 1, ballCount: 5, 
            ballSize: CGSize(width: 30, height: 30), 
            space: 5, availableMovement: (false, true)) {
            Circle()
        }

Let's change animation view as below

ZStack {
    Capsule(style: .continuous)
        .foregroundColor(.accentColor)
    Capsule()
        .frame(width: 10, height: 10)
        .foregroundColor(.white)
}

Bunibfall

BuniCasper

A ghost winked.

Example

BuniCasper()

BuniClickedBall

BuniClickedBall can use as loading indicator, button animation or something else.

Example

BuniClickedBall()

BuniExplode

Example

BuniExplode()

BuniLetters

You can show and hide your letters except the last one!

BuniLettersViewModel

This is the main object that manage this amazing animation. It has four published variables which are letters, interval, specialCharacterBackgroundColor and characterBackgroundColor.

Interval is the duration of state change from show to hide or vice versa. Letters are shown. specialCharacterBackgroundColor is the background color of the last char. characterBackgroundColor is the bacground color of chars except the last one.

Usage

init(text: String, interval: Double, specialCharacterBackgroundColor: Color, characterBackgroundColor: Color)

Text will parse and set to letters.

ShouldShow

ShouldShow is a bound parameter which you can change state of BuniLetters.

BuniLetters Usage

init(viewModel: BuniLettersViewModel, shouldShow: Binding<Bool>)

Example

@State var shouldShow: Bool = false

BuniLetters(viewModel: BuniLettersViewModel(text: "Barış", interval: 0.6, specialCharacterBackgroundColor: .red, characterBackgroundColor: .blue), shouldShow: $shouldShow)

BuniSandglass

BuniSandglass is a customizable sandglass animation.

BuniSandglassViewModel

This is the main object that manage this amazing animation. It has several published variables.

lineWidth is the line width of glass. size of glass. sandColor is the sand's color. boxColor is the glass's color. balance is the magic number to divesify glass's shape.

Usage

init(lineWidth: CGFloat, size: CGSize, sandColor: Color, boxColor: Color, balance: CGFloat)

BuniSandglass Usage

init(viewModel: BuniSandglassViewModel)

Example

Sandglass(viewModel: BuniSandglassViewModel(lineWidth: 10, 
                                            size: CGSize(width: 80, height: 160), 
                                            sandColor: .blue, 
                                            boxColor: .gray, 
                                            balance: 10))

Let's customize!

Sandglass(viewModel: BuniSandglassViewModel(lineWidth: 5, 
                                            size: CGSize(width: 80, height: 150), 
                                            sandColor: .orange, 
                                            boxColor: .black, 
                                            balance: 3))

Sandglass(viewModel: BuniSandglassViewModel(lineWidth: 5, 
                                            size: CGSize(width: 80, height: 120), 
                                            sandColor: .pink, 
                                            boxColor: .blue, 
                                            balance: 10))

BuniSnake

You can move your own view as snake while dragging and you can add its shadow as well.

BuniSnakeViewModel

animatedView is your custom view. animatedView count. space between animated views. objectColor background color of your animated view. Default is random. shouldShadow is determined shadow's visibility.

Usage

init(count: Int = 5, space: CGFloat = 0, shouldShadow: Bool = false, objectColor: Color = .random, @ViewBuilder view: () -> AnimatedView)

BuniSandglass Usage

init(viewModel: BuniSnakeViewModel<AnimatedView>)

Signature

struct BuniSnake<AnimatedView: View>: View

Example

BuniSnake(viewModel: BuniSnakeViewModel(count: 3, space: 10, shouldShadow: false, view: {
    Circle()
            .frame(width: 20, height: 20)
}))

Let's try to set shouldShadow as true

BuniSnake(viewModel: BuniSnakeViewModel(count: 3, space: 10, shouldShadow: true, view: {
    Circle()
            .frame(width: 20, height: 20)
}))

BuniSnake(viewModel: BuniSnakeViewModel(count: 10, space: 8, shouldShadow: false, view: {
    ZStack {
        Capsule()
            .frame(width: 30, height: 40)
        Capsule()
            .frame(width: 20, height: 30)
            .foregroundColor(.white)
        Capsule()
            .frame(width: 10, height: 20)
        Rectangle()
            .frame(width: 10, height: 5)
            .foregroundColor(.white)
    }
}))

BuniWayf

Buniwayf is a loading indicator or wifi search animation.

BuniWayfViewModel

backgroundColor is a base color of animation. wayfColor is a foreground color of inner objects.

Usage

init(backgroundColor: Color, wayfColor: Color)

BuniWayf Usage

init(viewModel: BuniWayfViewModel)

Example

BuniWayf(viewModel: .init(backgroundColor: .blue, wayfColor: .black))

BuniWayf(viewModel: .init(backgroundColor: .blue, wayfColor: .black))

Meta

Barış UYAR – @prospectcha – baris.uyar@hotmail.com

Github