# VariableColorSymbolEffect A type that replaces the opacity of variable layers in a symbol-based image in a repeatable sequence. ``` 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. > Note: > Variable color animations affect only symbols containing variable color layers. > Important: > Because SwiftUI is a state-driven framework, you pass a `value` parameter when adding discrete effects, like bounce. You trigger the animation by changing the `value` parameter. Because AppKit and UIKit are event-driven frameworks, discrete effects animate automatically when added to an image view. ```swift // 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 } } } ``` ```swift // 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 ### Accessing symbol effects ### Controlling fill style [`var cumulative: VariableColorSymbolEffect`](/documentation/Symbols/VariableColorSymbolEffect/cumulative) An effect that enables each layer of a symbol-based image in sequence. [`var iterative: VariableColorSymbolEffect`](/documentation/Symbols/VariableColorSymbolEffect/iterative) An effect that momentarily enables each layer of a symbol-based image in sequence. ### Changing playback style [`var nonReversing: VariableColorSymbolEffect`](/documentation/Symbols/VariableColorSymbolEffect/nonReversing) An effect that doesn’t reverse each time it repeats. [`var reversing: VariableColorSymbolEffect`](/documentation/Symbols/VariableColorSymbolEffect/reversing) An effect that reverses each time it repeats. ### Affecting inactive layers [`var dimInactiveLayers: VariableColorSymbolEffect`](/documentation/Symbols/VariableColorSymbolEffect/dimInactiveLayers) An effect that dims inactive layers in a symbol-based image. [`var hideInactiveLayers: VariableColorSymbolEffect`](/documentation/Symbols/VariableColorSymbolEffect/hideInactiveLayers) An effect that hides inactive layers in a symbol-based image. ### Accessing the configuration [`var configuration: SymbolEffectConfiguration`](/documentation/Symbols/VariableColorSymbolEffect/configuration) The configuration for the effect. ## Relationships ### Conforms To [`Copyable`](/documentation/Swift/Copyable) [`SymbolEffect`](/documentation/Symbols/SymbolEffect) [`Hashable`](/documentation/Swift/Hashable) [`DiscreteSymbolEffect`](/documentation/Symbols/DiscreteSymbolEffect) [`Escapable`](/documentation/Swift/Escapable) [`IndefiniteSymbolEffect`](/documentation/Symbols/IndefiniteSymbolEffect) [`Sendable`](/documentation/Swift/Sendable) [`Equatable`](/documentation/Swift/Equatable) [`SendableMetatype`](/documentation/Swift/SendableMetatype) --- Copyright © 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)