SwiftUI Animated Blur Background

AnimatedBackground.swift

//
//  AnimatedBackground.swift
//  Playground
//
//  Created by Colin Harris on 23/5/24.
//

import SwiftUI

struct AnimatedBackground: View {
        
    var body: some View {
        FloatingBlur(
            fill: AnyShapeStyle(.teal.gradient),
            direction: .clockwise,
            offset: CGSize(width: 75, height: 0)
        ).offset(y:-75)
        FloatingBlur(
            fill: AnyShapeStyle(.orange.gradient),
            direction: .counterClockwise,
            offset: CGSize(width: -100, height: 0)
        )
        FloatingBlur(
            fill: AnyShapeStyle(.pink.gradient),
            direction: .clockwise,
            offset: CGSize(width: 75, height: -75)
        ).offset(y:75)
    }
}

struct FloatingBlur: View {
    var fill: AnyShapeStyle
    var rotationDirection: RotationDirection
    var offset: CGSize
    
    @State var rotation: Double
    
    init(fill: AnyShapeStyle, direction: RotationDirection, offset: CGSize) {
        self.fill = fill
        self.rotationDirection = direction
        self.offset = offset
        self.rotation = rotationDirection.startDegrees
    }
    
    var body: some View {
        Circle()
            .fill(fill)
            .blur(radius: 80)
            .frame(width: 250)
            .offset(offset)
            .rotationEffect(.degrees(rotation))
            .onAppear {
                withAnimation(.linear(duration: 10).repeatForever(autoreverses: false)) {
                    rotation = rotationDirection.endDegrees
                }
            }
    }
}

enum RotationDirection {
    case clockwise
    case counterClockwise
    
    var startDegrees: Double {
        switch self {
        case .clockwise:
            return 0
        case .counterClockwise:
            return 360
        }
    }
    
    var endDegrees: Double {
        switch self {
        case .clockwise:
            return 360
        case .counterClockwise:
            return 0
        }
    }
}

#Preview {
    AnimatedBackground()
}

demo-video.mp4