Dunfey · Hotel WWDC as data, est. 1983
Front desk everything
Years
Topics

WWDC24 · 14 min · Design / SwiftUI & UI Frameworks

Enhance your UI animations and transitions

Explore how to adopt the zoom transition in navigation and presentations to increase the sense of continuity in your app, and learn how to animate UIKit views with SwiftUI animations to make it easier to build animations that feel continuous.

Watch at developer.apple.com ↗

Transcript all transcripts

Chapters

  • 0:00 — Introduction
  • 1:34 — New transitions!
  • 2:07 — Zoom transitions in SwiftUI
  • 3:02 — Zoom transitions in UIKit
  • 4:15 — UIKit view controller life cycle and callbacks
  • 7:02 — Additional tips for UIKit
  • 8:10 — SwiftUI animation
  • 9:46 — Animating representables
  • 11:20 — Gesture-driven animations

Code shown on screen · 5 snippets

Zoom transition in SwiftUI swift · at 2:10 ↗ 
NavigationLink {
    BraceletEditor(bracelet)
        .navigationTransitionStyle(
            .zoom(
                sourceID: bracelet.id,
                in: braceletList
            )
        )
} label: {
    BraceletPreview(bracelet)
}
.matchedTransitionSource(
    id: bracelet.id,
    in: braceletList
)
Zoom transition in UIKit swift · at 3:02 ↗ 
func showEditor(for bracelet: Bracelet) {
    let braceletEditor = BraceletEditor(bracelet)
    braceletEditor.preferredTransition = .zoom { context in
        let editor = context.zoomedViewController
            as! BraceletEditor
        return cell(for: editor.bracelet)
    }
    navigationController?.pushViewController(braceletEditor, animated: true)
}
Animate UIView with SwiftUI animation swift · at 8:39 ↗ 
UIView.animate(.spring(duration: 0.5)) {
    bead.center = endOfBracelet
}
Animating representables swift · at 9:56 ↗ 
struct BeadBoxWrapper: UIViewRepresentable {
    @Binding var isOpen: Bool

    func updateUIView(_ box: BeadBox, context: Context) {
        context.animate {
            box.lid.center.y = isOpen ? -100 : 100
		    }
    }
}

struct BraceletEditor: View {
    @State private var isBeadBoxOpen = false
    var body: some View {
        BeadBoxWrapper($isBeadBoxOpen.animated())
            .onTapGesture {
                isBeadBoxOpen.toggle()
            }
    }
}
Gesture-driven animations swift · at 11:39 ↗ 
switch gesture.state {
case .changed:
    UIView.animate(.interactiveSpring) {
        bead.center = gesture.translation
    }

case .ended:
    UIView.animate(.spring) {
        bead.center = endOfBracelet
    }
}

Resources