Native source code for CodeSlicing episode on advanced activity indicators - improved masking

CircularActivityIndicatorAdvancedWithMaskDemoNative.swift

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

import SwiftUI

struct CircularActivityIndicatorAdvancedWithMaskDemoNative: View {

    var body: some View {
        let numSegments = 13
        let fractionPerSegment = 1 / Double(numSegments)
        let rotationPerSegment = Angle.degrees(360 * fractionPerSegment)
        GeometryReader { (geo: GeometryProxy) in
            ZStack {
                Color.clear
                ForEach(0..<numSegments) { index in
                    let rotation = rotationPerSegment * Double(index)
                    let scale = CGFloat(abs(cos(rotation.radians * 0.5)))
                    Circle()
                        .frame(width: geo.size.width * 0.15, height: geo.size.height * 0.15)
                        .scaleEffect(scale)
                        .offset(y: -geo.size.height * 0.35)
                        .rotationEffect(rotationPerSegment * Double(index))
                }
            }
        }
        .mask(
//        .background(
            CircularActivityMask(numSegments: numSegments, duration: 1, fadeFactor: 1.2))
    }
}

private struct CircularActivityMask: View {
    
    let numSegments: Int
    let duration: Double
    var fadeFactor: Double = 1
    
    var body: some View {
        SegmentArc(arcLength: .degrees(360 / Double(numSegments)))
            
            .fill(Color.red)
            
            .renderAsActivityIndicator(numSegments: numSegments, offset: 0, duration: duration, fadeFactor: fadeFactor)
    }
}

private struct SegmentArc: Shape {
    
    private let halfArcLength: Angle
    
    init(arcLength: Angle) {
        halfArcLength = arcLength * 0.5
    }
    
    func path(in rect: CGRect) -> Path {
        Path { path in
            
            let rectCenter = CGPoint(x: rect.midX, y: rect.midY)
            
            path.move(to: rectCenter)
            
            path.addArc(center: rectCenter, radius: rect.width * 0.5 ,
                        
                        startAngle: .degrees(-90) - halfArcLength, endAngle: .degrees(-90) + halfArcLength,
                        clockwise: false)
        }
    }
}

private struct ActivityIndicatorModifier: ViewModifier {
    
    private let numSegments: Int
    private let offset: CGFloat
    private let duration: Double
    private let fadeFactor: Double
    private let maintainOrientation: Bool
    
    private let rotationPerSegment: Angle
    private let delayPerSegment: Double
    
    @State private var animating = false
    
    init(numSegments: Int, offset: CGFloat, duration: Double, fadeFactor: Double = 1, maintainOrientation: Bool = false) {
        self.numSegments = numSegments
        self.offset = offset
        self.duration = duration
        self.fadeFactor = fadeFactor
        self.maintainOrientation = maintainOrientation
        let fractionPerSegment = 1 / Double(numSegments)
        self.rotationPerSegment = .degrees(360 * fractionPerSegment)
        self.delayPerSegment = duration * fractionPerSegment
    }
    
    func body(content: Content) -> some View {
        ZStack {
            ForEach(0..<numSegments) { index in
                let rotation = rotationPerSegment * Double(index)
                let delay = delayPerSegment * Double(index)
                content
                    .rotationEffect(maintainOrientation ? -rotation : .degrees(0))
                    .offset(y: -offset)
                    .rotationEffect(rotation)
                    .opacity(animating ? 1 : 0)
                    .animation(Animation.linear(duration: 0.001).delay(delay))
                    .modifier(OpacityFadingModifier(fadeFactor: fadeFactor, animating: animating))
                    .animation(Animation.linear(duration: duration).repeatForever(autoreverses: false).delay(delay))
            }
        }
        .onAppear {
            animating = true
        }
    }
}

private extension View {
    
    func renderAsActivityIndicator(numSegments: Int, offset: CGFloat, duration: Double, fadeFactor: Double = 1, maintainOrientation: Bool = false) -> some View {
        modifier(ActivityIndicatorModifier(numSegments: numSegments, offset: offset, duration: duration, fadeFactor: fadeFactor, maintainOrientation: maintainOrientation))
    }
}

private struct OpacityFadingModifier: AnimatableModifier {
    
    private let fadeFactor: Double
    
    var animatableData: Double
    
    init(fadeFactor: Double = 1, animating: Bool) {
        self.fadeFactor = fadeFactor
        animatableData = animating ? 1 : 0
    }
    
    private var animatedOpacity: Double {
        (fadeFactor - animatableData) / fadeFactor
    }
    
    func body(content: Content) -> some View {
        content
            .opacity(animatedOpacity)
            .animation(nil)
    }
}

struct CircularActivityIndicatorAdvancedWithMaskDemoNative_Previews: PreviewProvider {
    struct CircularActivityIndicatorAdvancedWithMaskDemoNative_Harness: View {

        var body: some View {
            CircularActivityIndicatorAdvancedWithMaskDemoNative()
                .frame(width: 300, height: 300)
        }
    }

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