DOCSEARCHbyAlgolia
Submit Docs

Open SwiftUI Animations

repository·master·Indexed 26 days ago

https://github.com/amosgyamfi/open-swiftui-animations

A collection of pure SwiftUI animation inspirations and implementations for iOS, macOS, visionOS, and watchOS. Includes examples of text effects, UI component animations, shape masking, 3D spatial rotations, and advanced animators such as PhaseAnimator, KeyframeAnimator, and Symbol Effects.

Tokens
856
Snippets
1
Records
2
Agent score
41%

What's inside open-swiftui-animations

  1. Explore SwiftUI Animation Inspirations

    master

    This repository provides a collection of pure SwiftUI animation implementations for iOS, macOS, visionOS, and watchOS. Key animation types available include:

    • Text Effects: Typewriting, erasing, and cursor-blinking styles.
    • UI Component Animations: Safari-style 'Add to Bookmarks' animations and slide-to-unlock variations.
    • Shape & Masking: Visual guides for mask(alignment:_: ), clipShape(_:style: ), and clipped(antialiased: ).
    • Advanced Animators: Examples utilizing PhaseAnimator, KeyframeAnimator, and Symbol Effects (iOS 17+).
    • 3D & Spatial: 3D rotation for visionOS and 3D character flipping in XYZ axes.
    • Special Effects: Fireworks, image generation loaders, and hue rotation.

  2. Implement Liquid Glass Shape Morphing with GlassEffectContainer

    master

    Use the GlassEffectContainer combined with a PhaseAnimator to create morphing shape effects with a glass aesthetic. This pattern allows you to transition between different layout states (like spacing changes) using specific animation curves.

    import SwiftUI

struct LiquidGlassEffectContainer: View {
    var body: some View {
        GlassEffectContainer(spacing: 50) {
            PhaseAnimator([false, true]) { morph in
                HStack(spacing: morph ? 50.0 : -15.0) {
                    Button {
                        //
                    } label: {
                        Image(systemName: "scribble.variable")
                    }
                    .padding()
                    .glassEffect()
                    
                    Button {
                        //
                    } label: {
                        Image(systemName: "eraser.fill")
                    }
                    .padding()
                    .glassEffect()
                }
                .tint(.green)
                .font(.system(size: 64.0))
            } animation: { morph in
                    //.bouncy(duration: 2, extraBounce: 0.5)
                    //.easeOut(duration: 2)
                    .easeInOut(duration: 2)
                    //.timingCurve(0.68, -0.6, 0.32, 1.6, duration: 2)
                    
            }
        }
    }
}

#Preview {
    LiquidGlassEffectContainer()
        .preferredColorScheme(.dark)
}