Source code for CodeSlicing episode on Animated Weather Icons Part 5 - The Big Reveal (requires PureSwiftUI v2.1.0+)

WeatherIconCloudSunRainFinalDemo.swift

//
//  WeatherIconCloudSunRainFinalDemo.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 15/05/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 let rainLayoutConfig = LayoutGuideConfig.grid(columns: [0.3, 0.5, 0.7], rows: 1)

private struct WeatherIconCloudSunRainFinalDemo: View {
    
    @State private var showingCloud = false
    @State private var showingSun = false
    @State private var showingRain = false
    @State private var showingRays = false
    
    var body: some View {
        GeometryReader { (geo: GeometryProxy) in
            ZStack {
                SunView(showingRays: showingRays)
                    .scale(0.7)
                    .scaleIfNot(showingSun, 0)
                    .opacityIfNot(showingSun, 0)
                    .offset(geo.sizeScaled(0.15, -0.15))
                RainView()
                    .scale(0.7)
                    .opacityIfNot(showingRain, 0)
                    .rotate(30.degrees)
                    .offset(geo.sizeScaled(-0.2, 0.26))
                CloudView()
                    .scale(0.7)
                    .scaleIfNot(showingCloud, 0)
                    .opacityIfNot(showingCloud, 0)
                    .offset(geo.sizeScaled(-0.15, -0.03))
            }
            .onAppear {
                withAnimation(.easeInOut) {
                    showingCloud = true
                }
                after(0.15) {
                    withAnimation(.easeInOut) {
                        showingSun = true
                    }
                    withAnimation(.easeInOut(duration: 1)) {
                        showingRain = true
                    }
                }
                after(0.3) {
                    withAnimation(.spring(response: 0.6, dampingFraction: 0.6)) {
                        showingRays = true
                    }
                }
            }
        }
    }
}

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.60, 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))
        }
    }
}

private struct SunView: View {
    
    let showingRays: Bool
    
    @State private var rotatingRays = false
    
    var body: some View {
        GeometryReader { (geo: GeometryProxy) in
            ZStack {
                ForEach(0..<8) { rayIndex in
                    Capsule()
                        .fillColor(.yellow)
                        .frame(geo.sizeScaled(0.08, 0.21))
                        .yOffsetIf(showingRays, geo.widthScaled(-0.39))
                        .rotate(45.degrees * rayIndex)
                }
                .rotateIf(rotatingRays, 360.degrees)
                Circle()
                    .fillColor(.yellow)
                    .frame(geo.widthScaled(0.45))
            }
            .greedyFrame()
        }
        .onAppear {
            withAnimation(Animation.linear(duration: 8).repeatForever(autoreverses: false)) {
                rotatingRays = true
            }
        }
    }
}

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.08), lineCap: .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 yOffset = rect.heightScaled(0.35)
        
        let g = rainLayoutConfig.layout(in: rect)
            .yOffset(yOffset, factor: animatableData)
        
        for row in 0...2 {
            let rowYOffset = row.asCGFloat * yOffset
            let g = g.yOffset(rowYOffset)
            path.line(from: g[0, rel: 0.15], to: g[0, rel: 0.28])
            path.line(from: g[1, rel: 0], to: g[1, rel: 0.13])
            path.line(from: g[2, rel: 0.08], to: g[2, rel: 0.2])
        }
        
        return path
    }
}

struct WeatherIconCloudSunRainFinalDemo_Previews: PreviewProvider {
    struct WeatherIconCloudSunRainFinalDemo_Harness: View {
        
        var body: some View {
            WeatherIconCloudSunRainFinalDemo()
                .frame(300)
                .padding()
                .clipRoundedRectangle(20, fill: Color.white)
                .shadow(5)
                .greedyFrame()
                .ignoresSafeArea()
        }
    }
    
    static var previews: some View {
        WeatherIconCloudSunRainFinalDemo_Harness()
            .previewDevice(.iPhone_12_Pro_Max)
    }
}