Native Source code for CodeSlicing episode on Squishy Toggles Part 2

SquishyTogglePart02Native.swift

//
//  SquishyTogglePart02Native.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 26/02/2021.
//  Copyright © 2020 Adam Fordyce. All rights reserved.
//

import SwiftUI

private struct SquishyTogglePart02Native: View {
    
    @State private var isOn = false
    
    var body: some View {
        let debug = false
        GeometryReader { (geo: GeometryProxy) in
            let size = calculateSize(from: geo)
            let buttonDiameter = size.height * 0.9
            ZStack {
                ToggleFrame(isOn, debug: debug)
                    .styling(color: .green, debug: debug)
                    .animation(Animation.linear(duration: 1))
                
                ToggleButton()
                    .frame(width: buttonDiameter, height: buttonDiameter)
                    .offset(x: size.height * (isOn ? 0.5 : -0.5))
                    .animation(Animation.easeInOut(duration: 1))
            }
            .frame(width: size.width, height: size.height)
            .border(debug ? Color.gray.opacity(0.2) : Color.clear)
            .contentShape(Capsule())
            .onTapGesture {
                isOn.toggle()
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
    
    private func calculateSize(from geo: GeometryProxy) -> CGSize {
        let doubleHeight = geo.size.height * 2
        if geo.size.width < doubleHeight {
            return CGSize(width: geo.size.width, height: geo.size.width * 0.5)
        } else {
            return CGSize(width: doubleHeight, height: geo.size.height)
        }
    }
}

private struct ToggleFrame: Shape {

    var animatableData: CGFloat
    private let debug: Bool
    
    init(_ toggle: Bool, debug: Bool = false) {
        animatableData = toggle ? 1 : 0
        self.debug = debug
    }
    
    func path(in rect: CGRect) -> Path {
        var path = Path()

        let maxCurveYOffset = rect.height * 0.18
        let halfMaxCurveYOffset = maxCurveYOffset * 0.5
        
        let angle = Angle.degrees(Double(360 * animatableData))
        
        let curveYOffset = halfMaxCurveYOffset + halfMaxCurveYOffset * CGFloat(cos(angle.radians))

        let arcRadius = rect.size.height * 0.5
 
        let quarterX = rect.minX + rect.width * 0.25
        let threeQuarterX = rect.minX + rect.width * 0.75
        let cpXLeft = rect.minX + rect.width * 0.4
        let cpXRight = rect.minX + rect.width * 0.6
        
        let p1 = CGPoint(x: quarterX, y: rect.minY)
        let p1cp2 = CGPoint(x: cpXLeft, y: rect.minY)
        
        let p2 = CGPoint(x: rect.midX, y: rect.minY + curveYOffset)
        let p2cp1 = CGPoint(x: cpXLeft, y: rect.minY + curveYOffset)
        let p2cp2 = CGPoint(x: cpXRight, y: rect.minY + curveYOffset)
        
        let p3 = CGPoint(x: threeQuarterX, y: rect.minY)
        let p3cp1 = CGPoint(x: cpXRight, y: rect.minY)
        
        let p4cp2 = CGPoint(x: cpXRight, y: rect.maxY)
        
        let p5 = CGPoint(x: rect.midX, y: rect.maxY - curveYOffset)
        let p5cp1 = CGPoint(x: cpXRight, y: rect.maxY - curveYOffset)
        let p5cp2 = CGPoint(x: cpXLeft, y: rect.maxY - curveYOffset)
        
        let p6 = CGPoint(x: quarterX, y: rect.maxY)
        let p6cp1 = CGPoint(x: cpXLeft, y: rect.maxY)

        path.move(to: p1)
        
        path.addCurve(to: p2, control1: p1cp2, control2: p2cp1)
        path.addCurve(to: p3, control1: p2cp2, control2: p3cp1)
        
        path.addArc(center: CGPoint(x: threeQuarterX, y: rect.minY + arcRadius), radius: arcRadius, startAngle: .degrees(-90), endAngle: .degrees(90), clockwise: false)

        path.addCurve(to: p5, control1: p4cp2, control2: p5cp1)
        path.addCurve(to: p6, control1: p5cp2, control2: p6cp1)
        
        path.addArc(center: CGPoint(x: quarterX, y: rect.minY + arcRadius), radius: arcRadius, startAngle: .degrees(90), endAngle: .degrees(-90), clockwise: false)
        
        path.closeSubpath()

        return path
    }
    
    @ViewBuilder func styling(color: Color, debug: Bool = false) -> some View {
        if debug {
            stroke(Color.black, lineWidth: 2)
        } else {
            fill(color)
        }
    }
}

private struct ToggleButton: View {
    
    public var body: some View {
        let outerGradient = LinearGradient(
            gradient: Gradient(colors: [Color(white: 0.45), Color(white: 0.95)]),
            startPoint: .bottomLeading,
            endPoint: .topLeading)
        GeometryReader { (geo: GeometryProxy) in
            
            let innerGradient = RadialGradient(
                gradient: Gradient(colors: [Color(white: 0.9), Color(white: 0.3)]),
                center: .bottomTrailing,
                startRadius: geo.size.width * 0.2,
                endRadius: geo.size.width * 1.5)
            
            ZStack {
                Circle()
                    .fill(outerGradient)
                Circle()
                    .inset(by: geo.size.width * 0.1)
                    .fill(innerGradient)
            }
            .drawingGroup()
        }
    }
}

struct SquishyTogglePart02Native_Previews: PreviewProvider {
    struct SquishyTogglePart02Native_Harness: View {

        var body: some View {
            
            SquishyTogglePart02Native()
                .frame(width: 400, height: 400)
        }
    }

    static var previews: some View {
        SquishyTogglePart02Native_Harness()
            .previewDevice("iPhone 12 Pro Max")
            .previewDisplayName("iPhone 12 Pro Max")
    }
}