Demonstrates using relative offset on mask to control visibility of masked star rating so the color is continuous behind the stars rather than on or off for each one

ContinuousStarRating.swift

//
//  ContinuousStarRating.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 06/12/2020.
//  Copyright © 2020 Adam Fordyce. All rights reserved.
//

import SwiftUI
import PureSwiftUI

struct ContinuousStarRating: View {
    
    var numStars: Int
    let starIteration: CGFloat
    let levels: [Int]
    
    init(numStars: Int, levels: [Int]) {
        self.numStars = numStars
        starIteration = 1 / numStars.asCGFloat
        self.levels = levels
    }
    
    @State private var selectedStar: Int = 0
    
    var body: some View {
        ZStack {
            ZStack {
                Color.green
                Color.yellow
                    .opacityIf(selectedStar > levels[1], 0)
                Color.red
                    .opacityIf(selectedStar > levels[0], 0)
            }
            .opacityIf(selectedStar == 0, 0)
            .animation(Animation.easeInOut(duration: 0.25))
            .mask(Rectangle().blur(2).relativeXOffset(-1 + starIteration * selectedStar.asCGFloat))
            Stars(numStars: numStars) { tappedStarIndex in
                withAnimation(.easeInOut) {
                    if tappedStarIndex == selectedStar - 1 {
                        selectedStar = 0
                    } else {
                        selectedStar = tappedStarIndex + 1
                    }
                }
            }
        }
        .mask(Stars(numStars: numStars, isMask: true))
    }
}

private struct Stars: View {
    
    var numStars: Int
    var isMask = false
    var selectionCallback: ((Int) -> ())?
    
    var body: some View {
        HStack {
            Spacer()
            ForEach(0..<numStars) { index in
                Star(isMask: isMask)
                    .onTapGesture {
                        selectionCallback?(index)
                    }
                Spacer()
            }
        }
    }
}

private struct Star: View {
    
    var isMask = false
    
    var body: some View {
        let symbol = SFSymbol(.star_fill).resizedToFit().fontSize(100)
        ZStack {
            if isMask {
                symbol
            } else {
                symbol
                    .overlay(symbol.foregroundColor(.white).blur(2))
                    .drawingGroup()
                    .blendMode(.multiply)
                    .opacity(0.5)
            }
        }
    }
}

struct ContinuousStarRating_Previews: PreviewProvider {
    struct ContinuousStarRating_Harness: View {
        
        var body: some View {
            VStack {
                ContinuousStarRating(numStars: 5, levels: [1, 4])
                ContinuousStarRating(numStars: 10, levels: [2, 8])
                ContinuousStarRating(numStars: 3, levels: [1, 2])
            }
            .height(200)
        }
    }
    
    static var previews: some View {
        ContinuousStarRating_Harness()
    }
}