SFSymbolImage.swift

//
//  SFSymbolDelayStart.swift
//  VariableSFSymbolAnimation
//
//  Created by Matthew Young on 12/27/22.
//

import SwiftUI


struct AnimatableVariableValueModifier: Animatable, ViewModifier {
    let systemName: String
    var animatableData: Double

    init(systemName: String, variableValue: Double) {
        self.systemName = systemName
        animatableData = variableValue
    }

    func body(content: Content) -> some View {
        Image(systemName: systemName, variableValue: animatableData)
            .resizable()
            .scaledToFit()
    }
}


extension View {
    func animatableVariableValue(systemName: String, variableValue: Double) -> some View {
        modifier(AnimatableVariableValueModifier(systemName: systemName, variableValue: variableValue))
    }
}


struct SFSymbolImage: View {
    let delay: TimeInterval
    let systemName: String
    let autoreverses: Bool
    
    @Environment(\.colorScheme) var colorScheme

    @State private var progress = 0.0
    
    init(delay: TimeInterval = 0, systemName: String, autoreverses: Bool = true) {
        self.delay = delay
        self.systemName = systemName
        self.autoreverses = autoreverses
    }
    
    var body: some View {
        Color.clear
            .animatableVariableValue(systemName: systemName, variableValue: progress)
            .animation(.linear(duration: 1).repeatForever(autoreverses: autoreverses), value: progress)
            .onAppear {
                if delay == 0 {
                    progress = 1
                } else {
                    DispatchQueue.main.asyncAfter(deadline: .now() + delay) {
                        progress = 1
                    }
                }
            }
    }
}


struct SFSymbolImageTrulyDemo: View {
    var body: some View {
        VStack {
            HStack {
                let autoreverses = true
                SFSymbolImage(systemName: "timelapse", autoreverses: autoreverses)
                    .delayAppearance(bySeconds: 0)
                SFSymbolImage(delay: 1, systemName: "timelapse", autoreverses: autoreverses)
                    .delayAppearance(bySeconds: 1)
                SFSymbolImage(delay: 2, systemName: "timelapse", autoreverses: autoreverses)
                    .delayAppearance(bySeconds: 2)
                SFSymbolImage(delay: 3, systemName: "timelapse", autoreverses: autoreverses)
                    .delayAppearance(bySeconds: 3)
                SFSymbolImage(delay: 4, systemName: "timelapse", autoreverses: autoreverses)
                    .delayAppearance(bySeconds: 4)
            }
            HStack {
                let autoreverses = true
                SFSymbolImage(systemName: "timelapse", autoreverses: autoreverses)
                    .transaction {
                        $0.disablesAnimations = false
                    }
                    .delayAppearance(bySeconds: 0)
                SFSymbolImage(delay: 1, systemName: "timelapse", autoreverses: autoreverses)
                    .transaction {
                        $0.disablesAnimations = false
                    }
                    .delayAppearance(bySeconds: 1)
                SFSymbolImage(delay: 2, systemName: "timelapse", autoreverses: autoreverses)
                    .transaction {
                        $0.disablesAnimations = false
                    }
                    .delayAppearance(bySeconds: 2)
                SFSymbolImage(delay: 3, systemName: "timelapse", autoreverses: autoreverses)
                    .transaction {
                        $0.disablesAnimations = false
                    }
                    .delayAppearance(bySeconds: 3)
                SFSymbolImage(delay: 4, systemName: "timelapse", autoreverses: autoreverses)
                    .transaction {
                        $0.disablesAnimations = false
                    }
                    .delayAppearance(bySeconds: 4)
            }
            .transaction {
                $0.disablesAnimations = true
            }
        }
    }
}

    
struct SFSymbolDelayStart_Previews: PreviewProvider {
    static var previews: some View {
        SFSymbolImageTrulyDemo()
    }
}