Contents

VariableColorSymbolEffect

A type that replaces the opacity of variable layers in a symbol-based image in a repeatable sequence.

Declaration

struct VariableColorSymbolEffect

Overview

A variable color animation draws attention to a symbol by changing the opacity of the symbol’s layers. You can choose to apply the effect to layers either cumulatively or iteratively. For cumulative animations, each layer’s opacity remains changed until the end of the animation cycle. For iterative animations, each layer’s opacity changes briefly before returning to its original state.

// Add an effect in SwiftUI.
@State private var value1 = 0
@State private var value2 = 0
var body: some View {
    HStack {
        Image(systemName: "cellularbars")
            // Iteratively activates layers.
            .symbolEffect(.variableColor.iterative, value: value1)
            .onTapGesture {
                value1 += 1
            }
        Image(systemName: "cellularbars")
            // Cumulatively activates layers reversing and repeating three times.
            .symbolEffect(.variableColor.hideInactiveLayers.reversing, options: .repeat(3), value: value2)
            .onTapGesture {
                value2 += 1
            }
    }
}
// Add an effect in AppKit and UIKit.
// Iteratively activates layers.
imageView1.addSymbolEffect(.variableColor.iterative, options: .nonRepeating)
    
// Cumulatively activates layers reversing and repeating three times.
imageView2.addSymbolEffect(.variableColor.hideInactiveLayers.cumulative, options: .repeat(3))

Topics

Controlling fill style

Changing playback style

Affecting inactive layers

Accessing the configuration

See Also

Symbol effect types