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 ↗Chapters
Code shown on screen · 12 snippets
Spring Preset
withAnimation(.snappy) {
// Changes
} Spring Preset with Custom Duration
withAnimation(.snappy(duration: 0.4)) {
// Changes
} Spring Preset with Custom Bounce
withAnimation(.snappy(extraBounce: 0.1)) {
// Changes
} Custom Spring
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
let mySpring = Spring(duration: 0.5, bounce: 0.2)
let (mass, stiffness, damping) = (mySpring.mass, mySpring.stiffness, mySpring.damping) Spring Model Animation
let otherSpring = Spring(mass: 1, stiffness: 100, damping: 10)
withAnimation(.spring(otherSpring)) {
// Changes
} Spring Parameter Conversion
mass = 1
stiffness = (2π ÷ duration)^2
damping = 1 - 4π × bounce ÷ duration, bounce ≥ 0
4π ÷ (duration + 4π × bounce), bounce < 0 Evaluating Spring Model
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
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
withAnimation(.spring(duration: 0.5)) {
isActive.toggle()
} Spring with Small Bounce
withAnimation(.spring(duration: 0.5, bounce: 0.15)) {
isActive.toggle()
} Spring with Large Bounce
withAnimation(.spring(duration: 0.5, bounce: 0.3)) {
isActive.toggle()
} Related sessions
-
31 min -
34 min -
30 min