SFSymbolVariableValueAnimation.swift

import SwiftUI

extension Double {
    var zeroToOneCycle: Self {
        self >= 0.9 ? 0 : self + 0.1
    }
}

struct ProgressSymbol: View{
    let date: Date
    let symbolName: String
    @State private var level = Double.zero

    var body: some View {
        VStack {
            Image(systemName: symbolName, variableValue: level)
                .symbolRenderingMode(.multicolor)
                .font(.system(size: 70))
                .foregroundColor(.mint)
            Text(level, format: .percent.precision(.fractionLength(0)))
                .foregroundColor(.secondary)
        }
        .onChange(of: date) { _ in
            level = level.zeroToOneCycle
        }
    }
}

struct SFSymbolVariableColorByYasuhitoNagatomo: View {
    let symbols = [
        "rays", "slowmo", "timelapse",
        "aqi.medium", "water.waves", "ellipsis.bubble",
        "wand.and.rays", "cellularbars", "person.3.sequence.fill",
        "square.stack.3d.up.fill", "touchid", "livephoto"
    ]
    var body: some View {
        VStack {
            Text("SF Symbols 4 Variable Color")
                .font(.largeTitle)

            TimelineView(.periodic(from: .now, by: 0.5)) { context in
                ScrollView {
                    LazyVGrid(columns: [GridItem(), GridItem(), GridItem()]) {
                        ForEach(symbols, id: \.self)  {
                            ProgressSymbol(date: context.date, symbolName: $0)
                        }
                    }
                }
            }
        }
    }
}

struct SFSymbolVariableColorByYasuhitoNagatomo_Previews: PreviewProvider {
    static var previews: some View {
        SFSymbolVariableColorByYasuhitoNagatomo()
    }
}