As Apple’s declarative UI framework, SwiftUI provides rich visual effects and animation APIs, enabling developers to create fluid, modern user interfaces with ease. This article systematically outlines the core effect terminology in SwiftUI, helping developers master these professional concepts and demonstrating their application scenarios through practical examples.

SwiftUI Visual Effects and Animation Complete Guide

1. Animation System

1.1 Animation

Animation is the core type in SwiftUI that describes how view properties change over time.

Common Animation Types:

• .linear - Linear animation, constant speed
• .easeIn - Ease-in animation, starts slow then accelerates
• .easeOut - Ease-out animation, starts fast then decelerates
• .easeInOut - Ease-in-out, slow at both ends, fast in the middle
• .spring(response:dampingFraction:blendDuration:) - Spring animation, simulating physical spring effects

// Example: Basic animation application
@State private var scale: CGFloat = 1.0

Circle()
    .scaleEffect(scale)
    .animation(.spring(response: 0.5, dampingFraction: 0.6), value: scale)
    .onTapGesture {
        scale = scale == 1.0 ? 1.5 : 1.0
    }

1.2 withAnimation

withAnimation is an explicit animation closure used to trigger animations within specific code blocks.

Button("Zoom") {
    withAnimation(.easeInOut(duration: 0.3)) {
        isExpanded.toggle()
    }
}

1.3 Animatable Protocol

The Animatable protocol allows custom types to support animation interpolation. By implementing the animatableData property, you can give custom view modifiers animation capabilities.

struct WaveModifier: AnimatableModifier {
    var progress: Double
    
    var animatableData: Double {
        get { progress }
        set { progress = newValue }
    }
    
    func body(content: Content) -> some View {
        content.offset(y: sin(progress * .pi * 2) * 10)
    }
}

1.4 Transaction

Transaction is used to control the propagation and behavior of animations, allowing you to disable animations or modify animation parameters.

var transaction = Transaction(animation: .easeInOut)
transaction.disablesAnimations = true

2. Transitions

2.1 Transition

Transition defines the animation effects when views are inserted and removed.

Built-in Transition Types:

• .opacity - Opacity transition (fade in/out)
• .scale - Scale transition
• .slide - Slide transition
• .move(edge:) - Move in/out from specified edge
• .offset - Offset transition
• .identity - No transition effect

if showDetail {
    DetailView()
        .transition(.asymmetric(
            insertion: .move(edge: .trailing),
            removal: .opacity
        ))
}

2.2 AnyTransition

Type-erased transition wrapper that allows combining and customizing transition effects.

extension AnyTransition {
    static var scaleAndFade: AnyTransition {
        .scale.combined(with: .opacity)
    }
}

2.3 Combined Transition

Combine multiple transition effects to create complex visual effects.

.transition(
    .scale(scale: 0.8)
    .combined(with: .opacity)
    .combined(with: .move(edge: .bottom))
)

3. Visual Effects

3.1 Blur

Gaussian blur effect, commonly used for background blurring.

Image("background")
    .blur(radius: 10)

3.2 Shadow

Adds projection effects to views, enhancing layering.

Text("Hello")
    .shadow(color: .black.opacity(0.3), radius: 5, x: 0, y: 2)

3.3 Gradient

SwiftUI provides three gradient types:

LinearGradient

LinearGradient(
    gradient: Gradient(colors: [.blue, .purple]),
    startPoint: .topLeading,
    endPoint: .bottomTrailing
)

RadialGradient

RadialGradient(
    gradient: Gradient(colors: [.yellow, .orange]),
    center: .center,
    startRadius: 0,
    endRadius: 100
)

AngularGradient

AngularGradient(
    gradient: Gradient(colors: [.red, .yellow, .green, .blue, .purple, .red]),
    center: .center
)

3.4 Opacity

Controls the transparency of views, with values ranging from 0.0 (completely transparent) to 1.0 (completely opaque).

Rectangle()
    .opacity(0.5)

3.5 Clipping

Clips portions of views that extend beyond boundaries.

Image("photo")
    .resizable()
    .clipShape(Circle())
    .clipped()

3.6 Mask

Uses one view as a mask for another view.

Text("GRADIENT")
    .font(.system(size: 60, weight: .bold))
    .mask(
        LinearGradient(
            colors: [.red, .blue],
            startPoint: .leading,
            endPoint: .trailing
        )
    )

3.7 Blend Mode

Controls how views blend with backgrounds.

Circle()
    .blendMode(.multiply)

Common blend modes: .normal, .multiply, .screen, .overlay, .colorBurn, .colorDodge, etc.

3.8 Material

Background material effects introduced in iOS 15+, providing system-level frosted glass effects.

ZStack {
    Color.blue
    
    RoundedRectangle(cornerRadius: 20)
        .fill(.ultraThinMaterial)
        .frame(width: 300, height: 200)
}

Material types:

• .ultraThinMaterial
• .thinMaterial
• .regularMaterial
• .thickMaterial
• .ultraThickMaterial

4. Geometric Transforms

4.1 Transform

RotationEffect

Image(systemName: "arrow.right")
    .rotationEffect(.degrees(45))

ScaleEffect

Circle()
    .scaleEffect(1.5) // or .scaleEffect(x: 1.5, y: 0.8)

Offset

Text("Shifted")
    .offset(x: 20, y: 30)

4.2 GeometryEffect

Protocol for implementing custom geometric effects, used to create complex view transformations.

struct SkewEffect: GeometryEffect {
    var skew: CGFloat
    
    var animatableData: CGFloat {
        get { skew }
        set { skew = newValue }
    }
    
    func effectValue(size: CGSize) -> ProjectionTransform {
        var transform = CATransform3DIdentity
        transform.m21 = skew
        return ProjectionTransform(transform)
    }
}

4.3 Rotation3DEffect

3D space rotation effects, can create flip, perspective and other effects.

Image("card")
    .rotation3DEffect(
        .degrees(45),
        axis: (x: 0, y: 1, z: 0)
    )

4.4 ProjectionTransform

Underlying projection transform, used to implement advanced 3D transformation effects.

.transformEffect(ProjectionTransform(
    CGAffineTransform(rotationAngle: .pi / 4)
))

5. Gesture System

5.1 Gesture Types

TapGesture

.onTapGesture {
    // Handle tap
}

LongPressGesture

.onLongPressGesture(minimumDuration: 1.0) {
    // Handle long press
}

DragGesture

.gesture(
    DragGesture()
        .onChanged { value in
            offset = value.translation
        }
        .onEnded { _ in
            offset = .zero
        }
)

MagnificationGesture

.gesture(
    MagnificationGesture()
        .onChanged { value in
            scale = value
        }
)

RotationGesture

.gesture(
    RotationGesture()
        .onChanged { angle in
            rotation = angle
        }
)

5.2 GestureState

State property wrapper specifically for gestures, automatically resets when gesture ends.

@GestureState private var dragOffset = CGSize.zero

var drag: some Gesture {
    DragGesture()
        .updating($dragOffset) { value, state, _ in
            state = value.translation
        }
}

5.3 Gesture Composition

Gestures can be combined:

• .simultaneously(with:) - Recognize multiple gestures simultaneously
• .sequenced(before:) - Recognize gestures in sequence
• .exclusively(before:) - Prioritize recognition of certain gestures

let combined = TapGesture()
    .simultaneously(with: LongPressGesture())

6. Layout and Positioning Effects

6.1 Frame

Precisely control view size and alignment.

Text("Fixed Size")
    .frame(width: 200, height: 100, alignment: .center)

6.2 GeometryReader

Read parent view geometry information to implement adaptive layouts.

GeometryReader { geometry in
    Circle()
        .frame(width: geometry.size.width * 0.5)
}

6.3 Position

Use absolute coordinates to position views.

Text("Absolute")
    .position(x: 100, y: 200)

6.4 ZIndex

Control the stacking order of views on the Z-axis.

Rectangle()
    .zIndex(1) // Display on top

7. Advanced Effects and Modifiers

7.1 DrawingGroup

Enable Metal rendering to improve complex animation performance.

ForEach(0..<1000) { _ in
    Circle()
}
.drawingGroup()

7.2 Compositional Layout

Implement smooth transitions between views through matchedGeometryEffect.

@Namespace private var animation

if isExpanded {
    DetailView()
        .matchedGeometryEffect(id: "card", in: animation)
} else {
    ThumbnailView()
        .matchedGeometryEffect(id: "card", in: animation)
}

7.3 TimelineView

Views that update based on time, suitable for creating dynamic effects.

TimelineView(.animation) { timeline in
    let progress = timeline.date.timeIntervalSince1970.truncatingRemainder(dividingBy: 2)
    Circle()
        .scaleEffect(progress)
}

7.4 Canvas

Used for drawing complex custom graphics.

Canvas { context, size in
    context.fill(
        Path(ellipseIn: CGRect(origin: .zero, size: size)),
        with: .color(.blue)
    )
}

8. Performance Optimization Tips

8.1 Avoid Over-redrawing

Use equatable() to reduce unnecessary view updates.

struct CustomView: View, Equatable {
    static func == (lhs: CustomView, rhs: CustomView) -> Bool {
        lhs.id == rhs.id
    }
}

8.2 Use Animations Appropriately

• Use implicit animations (.animation()) for simple properties
• Use explicit animations (withAnimation) for complex interactions
• Avoid creating new animation instances in body

8.3 Lazy Loading

Use LazyVStack and LazyHStack to optimize list performance.

ScrollView {
    LazyVStack {
        ForEach(items) { item in
            ItemView(item: item)
        }
    }
}

9. Practical Example: Card Flip Effect

struct FlipCard: View {
    @State private var isFlipped = false
    @State private var rotation: Double = 0
    
    var body: some View {
        ZStack {
            // Front
            CardFront()
                .opacity(rotation < 90 ? 1 : 0)
                .rotation3DEffect(.degrees(rotation), axis: (x: 0, y: 1, z: 0))
            
            // Back
            CardBack()
                .opacity(rotation >= 90 ? 1 : 0)
                .rotation3DEffect(.degrees(rotation + 180), axis: (x: 0, y: 1, z: 0))
        }
        .onTapGesture {
            withAnimation(.spring(response: 0.6, dampingFraction: 0.8)) {
                rotation += 180
                isFlipped.toggle()
            }
        }
    }
}

10. Summary and Best Practices

Key Points

1. Choose the right animation type: Spring animations are suitable for interaction feedback, easing animations for interface transitions
2. Unify transition effects: Maintain consistency of transition effects within the app
3. Performance first: Use drawingGroup() for complex animations, avoid excessive nesting
4. Responsive design: Combine with GeometryReader to implement adaptive effects
5. Progressive enhancement: Start with simple effects and gradually increase complexity

Debugging Tips

• Use .animation(.linear(duration: 3)) to slow down animations and observe details
• Check view hierarchy through Xcode’s view debugger
• Use Instruments to analyze animation performance

Learning Resources

• Apple official documentation: SwiftUI Animations
• WWDC videos: Search for “SwiftUI Animations” related topics
• Open source projects: SwiftUI animation example repositories on GitHub

By mastering these professional terms and techniques, you’ll be able to create fluid, beautiful user interface effects in SwiftUI. Remember, good animation design is not just a technical showcase, but the key to enhancing user experience.

Copyright Notice: This is an original technical article, welcome to reprint, please cite the source.