ShuffleLoading.swift

//  Created by Inncoder on 15/11/2020.
//  Copyright © 2020 Inncoder AS. All rights reserved.
//

import SwiftUI

struct ShuffleLoading: View {
    
    @State private var offset: [CGFloat] = [0, 0, 0]
    @State private var rotation: [Double] = [0, 0, 0]
    
    var body: some View {
        ZStack {
            ForEach(0..<3) { i in
                Circle()
                    .fill(ballColorMid)
                    .frame(width: ballSize, height: ballSize)
                    .rotationEffect(.degrees(-rotation[i]))
                    .offset(x: rotationRadius)
                    .rotationEffect(.degrees(rotation[i]))
                    .offset(x: offset[i])
            }
        }
        .offset(x: -30)
        .onAppear {
            startAnimation()
            Timer.scheduledTimer(withTimeInterval: rotationTime*6 + timedelay*8 + 0.1, repeats: true) { _ in
                startAnimation()
            }
        }
    }
    
    //MARK: - Drawing constants
    let ballSize: CGFloat = 40
    let rotationRadius: CGFloat = -30
    let rotationTime: Double = 0.25
    let timedelay: Double = 0.025
    let ballColor: LinearGradient = LinearGradient(gradient: Gradient(colors: [Color(red: 0.57, green: 0.92, blue: 0.94), Color(red: 0.50, green: 0.50, blue: 0.87)]), startPoint: .top, endPoint: .bottom)
    let ballColorMid: LinearGradient = LinearGradient(gradient: Gradient(colors: [Color(red: 0.92, green: 0.69, blue: 0.81), Color(red: 0.40, green: 0.31, blue: 0.69)]), startPoint: .top, endPoint: .bottom)
    
    //MARK: - Functions
    func startAnimation() {
        offset = [0, 0, rotationRadius * (-2)]
        rotation = [0, -180, 180]
        withAnimation(Animation.easeInOut(duration: rotationTime)) {
            rotation[0] = 180
            rotation[1] = 0
        }
        DispatchQueue.main.asyncAfter(deadline: .now() + rotationTime + timedelay) {
            rotation[0] = 0
            offset[0] = rotationRadius * (-2)
            withAnimation(Animation.easeInOut(duration: rotationTime)) {
                rotation[0] = -180
                rotation[2] = 0
            }
        }
        DispatchQueue.main.asyncAfter(deadline: .now() + rotationTime*2 + timedelay*2) {
            rotation[2] = -180
            offset[2] = 0
            withAnimation(Animation.easeInOut(duration: rotationTime)) {
                rotation[1] = 180
                rotation[2] = 0
            }
        }
        DispatchQueue.main.asyncAfter(deadline: .now() + rotationTime*3 + timedelay*3) {
            rotation[0] = 180
            rotation[1] = 0
            offset[1] = rotationRadius * (-2)
            withAnimation(Animation.easeInOut(duration: rotationTime)) {
                rotation[0] = 0
                rotation[1] = -180
            }
        }
        DispatchQueue.main.asyncAfter(deadline: .now() + rotationTime*4 + timedelay*4) {
            rotation[0] = -180
            offset[0] = 0
            withAnimation(Animation.easeInOut(duration: rotationTime)) {
                rotation[0] = 0
                rotation[2] = 180
            }
        }
        DispatchQueue.main.asyncAfter(deadline: .now() + rotationTime*5 + timedelay*5) {
            rotation[1] = 180
            rotation[2] = 0
            offset[2] = rotationRadius * (-2)
            withAnimation(Animation.easeInOut(duration: rotationTime)) {
                rotation[2] = -180
                rotation[1] = 0
            }
        }
    }
}