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

2023 SwiftUI & UI Frameworks

WWDC23 · 23 min · SwiftUI & UI Frameworks

Animate with springs

Discover how you can bring life to your app with animation! We’ll show you how to create amazing animations when you take advantage of springs and help you learn how to use them in your app.

Watch at developer.apple.com ↗

Transcript all transcripts

Chapters

Code shown on screen · 12 snippets

Spring Preset swift · at 18:00 ↗
withAnimation(.snappy) {
  // Changes
}
Spring Preset with Custom Duration swift · at 18:15 ↗
withAnimation(.snappy(duration: 0.4)) {
  // Changes
}
Spring Preset with Custom Bounce swift · at 18:21 ↗
withAnimation(.snappy(extraBounce: 0.1)) {
  // Changes
}
Custom Spring swift · at 18:37 ↗
withAnimation(.spring(duration: 0.6, bounce: 0.2)) {
  // Changes
}

// UIKit
UIView.animate(duration: 0.6, bounce: 0.2) {
  // Changes
}

// Core Animation
let animation = CASpringAnimation(perceptualDuration: 0.6, bounce: 0.2)
Spring Model swift · at 18:57 ↗
let mySpring = Spring(duration: 0.5, bounce: 0.2)
let (mass, stiffness, damping) = (mySpring.mass, mySpring.stiffness, mySpring.damping)
Spring Model Animation swift · at 19:16 ↗
let otherSpring = Spring(mass: 1, stiffness: 100, damping: 10)
withAnimation(.spring(otherSpring)) {
    // Changes
}
Spring Parameter Conversion markdown · at 19:26 ↗
mass = 1

stiffness = (2π ÷ duration)^2

damping = 1 - 4π × bounce ÷ duration, bounce ≥ 0
          4π ÷ (duration + 4π × bounce), bounce < 0
Evaluating Spring Model swift · at 19:35 ↗
let mySpring = Spring(duration: 0.4, bounce: 0.2)
let value = mySpring.value(target: 1, time: time)
let velocity = mySpring.velocity(target: 1, time: time)
Custom Spring Animation swift · at 20:15 ↗
func animate<V: VectorArithmetic>(
    value: V, time: Double, context: inout AnimationContext<V>
) -> V? {
    spring.value(
        target: value, initialVelocity: context.initialVelocity,
        time: effectiveTime(time: time, context: context))
}
Spring with No Bounce swift · at 20:34 ↗
withAnimation(.spring(duration: 0.5)) {
    isActive.toggle()
}
Spring with Small Bounce swift · at 21:07 ↗
withAnimation(.spring(duration: 0.5, bounce: 0.15)) {
    isActive.toggle()
}
Spring with Large Bounce swift · at 21:14 ↗
withAnimation(.spring(duration: 0.5, bounce: 0.3)) {
    isActive.toggle()
}