Source code for CodeSlicing episode on Animated Weather Icons Part 1 - Creating the Cloud (requires PureSwiftUI v2.1.0+)

WeatherIconCloudDemo.swift

//
//  WeatherIconCloudDemo.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
import PureSwiftUI

private let cloudLayoutConfig = LayoutGuideConfig.grid(
    columns: [0, 0.141, 0.17, 0.737, 0.773, 1],
    rows: [0, 0.35, 0.465, 0.833, 1])

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

private struct CloudView: View {
    var body: some View {
        let debug = false
        CloudShape(debug: debug)
            .styling()
            .layoutGuide(cloudLayoutConfig, color: .red, opacity: 1)
            .showLayoutGuides(debug)
    }
}

private struct CloudShape: Shape {
    
    var debug = false
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        let g = cloudLayoutConfig.layout(in: rect)
        
        path.move(g[2, 3])
        
        path.curve(g[1, 2],
                   cp1: g[rel: -0.05, rel: 0.81],
                   cp2: g[rel: -0.05, rel: 0.5],
                   showControlPoints: debug)
        
        path.curve(g[3, 1],
                   cp1: g[rel: 0.17, rel: 0.13],
                   cp2: g[rel: 0.6, rel: 0.06],
                   showControlPoints: debug)
        
        path.curve(g[4, 3],
                   cp1: g[rel: 1.08, rel: 0.35],
                   cp2: g[rel: 1.08, rel: 0.8],
                   showControlPoints: debug)
        
        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([.white(0.7), .white(0.3)], to: .bottom))
        }
    }
}

struct WeatherIconCloudDemo_Previews: PreviewProvider {
    struct WeatherIconCloudDemo_Harness: View {

        var body: some View {
            CloudElement()
                .frame(400)
        }
    }

    static var previews: some View {
        WeatherIconCloudDemo_Harness()
            .padding(50)
            .previewSizeThatFits()
            .previewDevice(.iPhone_12_Pro_Max)
    }
}