VisualEffect
Visual Effects change the visual appearance of a view without changing its ancestors or descendents.
Declaration
protocol VisualEffect : Sendable, AnimatableOverview
Because effects do not impact layout, they are safe to use in situations where layout modification is not allowed. For example, effects may be applied as a function of position, accessed through a geometry proxy:
var body: some View {
ContentRow()
.visualEffect { content, geometryProxy in
content.offset(x: geometryProxy.frame(in: .global).origin.y)
}
}You don’t conform to this protocol yourself. Instead, visual effects are created by calling modifier functions (such as .offset(x:y:) on other effects, as seen in the example above.
Topics
Adjusting Color
brightness(_:)colorEffect(_:isEnabled:)contrast(_:)grayscale(_:)hueRotation(_:)saturation(_:)opacity(_:)
Scaling
Rotating
rotationEffect(_:anchor:)rotation3DEffect(_:axis:anchor:anchorZ:perspective:)perspectiveRotationEffect(_:axis:anchor:perspective:)rotation3DEffect(_:anchor:)rotation3DEffect(_:axis:anchor:)
Translating
Applying a transform
Applying other effects
blur(radius:opaque:)distortionEffect(_:maxSampleOffset:isEnabled:)layerEffect(_:maxSampleOffset:isEnabled:)