Native Source code for CodeSlicing episode on Animated Weather Icons Part 1 - Creating the Cloud

WeatherIconCloudDemoNative.swift

//
//  WeatherIconCloudDemoNative.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 17/04/2021.
//  Copyright © 2021 Adam Fordyce. All rights reserved.
//

import SwiftUI

private struct CloudElement: View {
    
    var body: some View {
        CloudView()
            .scaleEffect(0.7)
    }
}

private struct CloudView: View {
    var body: some View {
        let debug = false
        CloudShape(debug: debug)
            .styling()
    }
}

private struct CloudShape: Shape {
    
    var debug = false
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        let startingPoint = CGPoint(x: rect.minX + rect.width * 0.17, y: rect.minY + rect.height * 0.833)
        
        path.move(to: startingPoint)
        
        let c1destination = CGPoint(x: rect.minX + rect.width * 0.141, y: rect.minY + rect.height * 0.465)
        let c1cp1 = CGPoint(x: rect.minX + rect.width * -0.05, y: rect.minY + rect.height * 0.81)
        let c1cp2 = CGPoint(x: rect.minX + rect.width * -0.05, y: rect.minY + rect.height * 0.5)

        let c2destination = CGPoint(x: rect.minX + rect.width * 0.737, y: rect.minY + rect.height * 0.35)
        let c2cp1 = CGPoint(x: rect.minX + rect.width * 0.17, y: rect.minY + rect.height * 0.13)
        let c2cp2 = CGPoint(x: rect.minX + rect.width * 0.6, y: rect.minY + rect.height * 0.06)

        let c3destination = CGPoint(x: rect.minX + rect.width * 0.773, y: rect.minY + rect.height * 0.833)
        let c3cp1 = CGPoint(x: rect.minX + rect.width * 1.08, y: rect.minY + rect.height * 0.35)
        let c3cp2 = CGPoint(x: rect.minX + rect.width * 1.08, y: rect.minY + rect.height * 0.8)

        path.addCurve(to: c1destination, control1: c1cp1, control2: c1cp2)
        path.addCurve(to: c2destination, control1: c2cp1, control2: c2cp2)
        path.addCurve(to: c3destination, control1: c3cp1, control2: c3cp2)

        path.closeSubpath()
        
        return path
    }
    
    @ViewBuilder func styling() -> some View {
        if debug {
            self.stroke(Color.black, style: .init(lineWidth: 2, lineCap: .round, lineJoin: .round))
        } else {
            self.fill(
                
                LinearGradient(
                        gradient: Gradient(colors: [Color(white: 0.7), Color(white: 0.3)]),
                        startPoint: .top,
                        endPoint: .bottom))
        }
    }
}

// simple yet powerful extension lifted from PureSwiftUI to extract
// relative points from a CGRect
private extension CGRect {
    subscript(x: CGFloat, y: CGFloat) -> CGPoint {
        CGPoint(x: self.minX + self.width * x, y: self.minY + self.height * y)
    }
}

struct WeatherIconCloudDemoNative_Previews: PreviewProvider {
    struct WeatherIconCloudDemoNative_Harness: View {

        var body: some View {
            ZStack {
                CloudElement()
//                Image(systemName: "cloud.fill")
//                    .resizable()
//                    .aspectRatio(contentMode: .fit)
//                    .foregroundColor(.black.opacity(0.2))
            }
            .frame(width: 400, height: 400)
        }
    }

    static var previews: some View {
        WeatherIconCloudDemoNative_Harness()
            .padding(50)
            .previewLayout(.sizeThatFits)
            .previewDevice("iPhone 12 Pro Max")
            .previewDisplayName("iPhone 12 Pro Max")
    }
}