-
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.
Capítulos
- 1:36 - Why springs
- 8:33 - How springs work
- 17:29 - How to use springs
Recursos
Videos relacionados
WWDC23
-
Buscar este video…
-
-
18:00 - Spring Preset
withAnimation(.snappy) { // Changes } -
18:15 - Spring Preset with Custom Duration
withAnimation(.snappy(duration: 0.4)) { // Changes } -
18:21 - Spring Preset with Custom Bounce
withAnimation(.snappy(extraBounce: 0.1)) { // Changes } -
18:37 - 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) -
18:57 - Spring Model
let mySpring = Spring(duration: 0.5, bounce: 0.2) let (mass, stiffness, damping) = (mySpring.mass, mySpring.stiffness, mySpring.damping) -
19:16 - Spring Model Animation
let otherSpring = Spring(mass: 1, stiffness: 100, damping: 10) withAnimation(.spring(otherSpring)) { // Changes } -
19:26 - Spring Parameter Conversion
mass = 1 stiffness = (2π ÷ duration)^2 damping = 1 - 4π × bounce ÷ duration, bounce ≥ 0 4π ÷ (duration + 4π × bounce), bounce < 0 -
19:35 - 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) -
20:15 - 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)) } -
20:34 - Spring with No Bounce
withAnimation(.spring(duration: 0.5)) { isActive.toggle() } -
21:07 - Spring with Small Bounce
withAnimation(.spring(duration: 0.5, bounce: 0.15)) { isActive.toggle() } -
21:14 - Spring with Large Bounce
withAnimation(.spring(duration: 0.5, bounce: 0.3)) { isActive.toggle() }
-