Code to accompany the Shazam Opening Sequence CodeSlicing episode

ShazamOpeningSequence.swift

//
//  ShazamOpeningSequence.swift
//
//  Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to deal
//  in the Software without restriction, including without limitation the rights
//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
//  of the Software, and to permit persons to whom the Software is furnished to do so,
//  subject to the following conditions:
//
//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
//  INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
//  PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
//  COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
//  AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
//  WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
//  Created by Adam Fordyce on 06/01/2021.
//  Copyright © 2021 Adam Fordyce. All rights reserved.
//

import SwiftUI
import PureSwiftUI

struct ShazamOpeningSequence: View {
    @State private var showingTitle = false
    @State private var breathing = false
    var body: some View {
        ZStack {
            Label("Tap to Shazam", sfSymbol: .mic_fill)
                .titleFont(.white, .bold)
                .yOffset(-175)
                .opacityIfNot(showingTitle, 0)
            CircleAndLinks()
                .frame(200)
                .scaleIf(breathing, 1.05)
        }
        .onAppear {
            after(0.5) {
                withAnimation(.easeInOut(duration: 2)) {
                    showingTitle = true
                }
            }
            after(1) {
                withAnimation(Animation.easeInOut(duration: 2).repeatForever(autoreverses: true)) {
                    breathing = true
                }
            }
        }
    }
}

private struct CircleAndLinks: View {
    
    @State private var animated = false
    @State private var scaled = false
    
    var body: some View {
        ZStack {
            Circle()
                .fill(LinearGradient([Color(white: 0.3), Color(white: 0.35)], to: .bottom))
                .shadowColor(.gray, 0.2, y: -1.5)
            
            let fromTrim: CGFloat = 0.43
            let toTrim: CGFloat = 1

            let whiteLink = Link(fromTrim: animated ? fromTrim : fromTrim - 2,
                 toTrim: animated ? toTrim : toTrim - 2.5, color: .white)
            let blackLink = Link(fromTrim: animated ? fromTrim + 1 : fromTrim,
                 toTrim: toTrim, color: .black)
            
            Group {
                whiteLink
                whiteLink.rotate(180.degrees)
            }
            .shadowColor(.black, 0.2, y: 0.4)

            Group {
                blackLink
                blackLink.rotate(180.degrees)
            }
            .shadowColor(.white, 0.2, y: 0.4)
        }
        .scaleIfNot(scaled, 0)
        .onAppear {
            withAnimation(.easeInOut) {
                scaled = true
            }
            after(0.2) {
                withAnimation(.timingCurve(0.65, 0, 0.35, 1, duration: 1)) {
                    animated = true
                }
            }
        }
    }
}

private struct Link: View {
    
    let fromTrim: CGFloat
    let toTrim: CGFloat
    let color: Color
    
    var body: some View {
        ShazamCapsule()
            .rotate(-45.degrees)
            .offset(-7, -16)
            .trim(from: fromTrim, to: toTrim)
            .stroke(color, style: .init(lineWidth: 20, lineCap: .round))
            .frame(90, 64)
    }
}

private struct ShazamCapsule: Shape {
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        let arcRadius = rect.halfHeight
        
        path.move(rect.bottom)
        path.arc(rect.trailing.xOffset(-arcRadius), radius: arcRadius, startAngle: .bottom, delta: -180.degrees)
        path.arc(rect.leading.xOffset(arcRadius), radius: arcRadius, startAngle: .top, delta: -180.degrees)
        path.closeSubpath()
        
        return path
    }
}

struct ShazamOpeningSequence_Previews: PreviewProvider {
    struct ShazamOpeningSequence_Harness: View {

        var body: some View {
            ShazamOpeningSequence()
                .greedyFrame()
                .background(Color(white: 0.1).ignoresSafeArea())
        }
    }

    static var previews: some View {
        ShazamOpeningSequence_Harness()
            .previewDevice(.iPhone_12_Pro_Max)
    }
}