Source code for CodeSlicing episode on Animated Weather Icons Part 3 - Making it Rain (requires PureSwiftUI v2.1.0+)

WeatherIconRainDemo.swift

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

import SwiftUI
import PureSwiftUI

private let rainLayoutConfig = LayoutGuideConfig.grid(columns: [0.3, 0.5, 0.7], rows: 1)

private struct RainElement: View {
    
    var body: some View {
        RainView()
    }
}

private struct RainView: View {

    @State private var raining = false
    
    var body: some View {
        let debug = false
        GeometryReader { (geo: GeometryProxy) in
            RainShape(raining: raining)
                .stroke(Color.blue, style: .init(lineWidth: geo.widthScaled(0.07), lineCap: .round, lineJoin: .round))
                .layoutGuide(rainLayoutConfig)
                .showLayoutGuides(debug)
        }
        .onAppear {
            withAnimation(Animation.linear(duration: 1).repeatForever(autoreverses: false)) {
                raining = true
            }
        }
    }
}

private struct RainShape: Shape {
    
    var animatableData: CGFloat
    
    init(raining: Bool) {
        animatableData = raining ? 1 : 0
    }
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        let yOffsetPerRow = rect.heightScaled(0.35)
        
        let g = rainLayoutConfig.layout(in: rect)
            .yOffset(yOffsetPerRow, factor: animatableData)
        
        for row in 0...2 {
            let rowYOffset = row.asCGFloat * yOffsetPerRow
            let g = g.yOffset(rowYOffset)
            path.line(from: g[0, rel: 0.12], to: g[0, rel: 0.29])
            path.line(from: g[1, rel: 0], to: g[1, rel: 0.15])
            path.line(from: g[2, rel: 0.05], to: g[2, rel: 0.2])
        }
        
        return path
    }
}

struct WeatherIconRain_Previews: PreviewProvider {
    struct WeatherIconRain_Harness: View {

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

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