--- title: Animation framework: swiftui role: symbol role_heading: Structure path: swiftui/animation --- # Animation The way a view changes over time to create a smooth visual transition from one state to another. ## Declaration ```swift @frozen struct Animation ``` ## Mentioned in Unifying your app’s animations ## Overview Overview An Animation provides a visual transition of a view when a state value changes from one value to another. The characteristics of this transition vary according to the animation type. For instance, a linear animation provides a mechanical feel to the animation because its speed is consistent from start to finish. In contrast, an animation that uses easing, like easeOut, offers a more natural feel by varying the acceleration of the animation. To apply an animation to a view, add the animation(_:value:) modifier, and specify both an animation type and the value to animate. For instance, the Circle view in the following code performs an easeIn animation each time the state variable scale changes: struct ContentView: View { @State private var scale = 0.5 var body: some View { VStack { Circle() .scaleEffect(scale) .animation(.easeIn, value: scale) HStack { Button("+") { scale += 0.1 } Button("-") { scale -= 0.1 } } } .padding() } When the value of scale changes, the modifier scaleEffect(_:anchor:) resizes Circle according to the new value. SwiftUI can animate the transition between sizes because Circle conforms to the Shape protocol. Shapes in SwiftUI conform to the Animatable protocol, which describes how to animate a property of a view. In addition to adding an animation to a view, you can also configure the animation by applying animation modifiers to the animation type. For example, you can: Delay the start of the animation by using the delay(_:) modifier. Repeat the animation by using the repeatCount(_:autoreverses:) or repeatForever(autoreverses:) modifiers. Change the speed of the animation by using the speed(_:) modifier. For example, the Circle view in the following code repeats the easeIn animation three times by using the repeatCount(_:autoreverses:) modifier: struct ContentView: View { @State private var scale = 0.5 var body: some View { VStack { Circle() .scaleEffect(scale) .animation(.easeIn.repeatCount(3), value: scale) HStack { Button("+") { scale += 0.1 } Button("-") { scale -= 0.1 } } } .padding() } } A view can also perform an animation when a binding value changes. To specify the animation type on a binding, call its animation(_:) method. For example, the view in the following code performs a linear animation, moving the box truck between the leading and trailing edges of the view. The truck moves each time a person clicks the Toggle control, which changes the value of the $isTrailing binding. struct ContentView: View { @State private var isTrailing = false var body: some View { VStack(alignment: isTrailing ? .trailing : .leading) { Image(systemName: "box.truck") .font(.system(size: 64)) Toggle("Move to trailing edge", isOn: $isTrailing.animation(.linear)) } } } ## Topics ### Getting the default animation - [default](swiftui/animation/default.md) ### Getting linear animations - [linear](swiftui/animation/linear.md) - [linear(duration:)](swiftui/animation/linear(duration:).md) ### Getting eased animations - [easeIn](swiftui/animation/easein.md) - [easeIn(duration:)](swiftui/animation/easein(duration:).md) - [easeOut](swiftui/animation/easeout.md) - [easeOut(duration:)](swiftui/animation/easeout(duration:).md) - [easeInOut](swiftui/animation/easeinout.md) - [easeInOut(duration:)](swiftui/animation/easeinout(duration:).md) ### Getting built-in spring animations - [bouncy](swiftui/animation/bouncy.md) - [bouncy(duration:extraBounce:)](swiftui/animation/bouncy(duration:extrabounce:).md) - [smooth](swiftui/animation/smooth.md) - [smooth(duration:extraBounce:)](swiftui/animation/smooth(duration:extrabounce:).md) - [snappy](swiftui/animation/snappy.md) - [snappy(duration:extraBounce:)](swiftui/animation/snappy(duration:extrabounce:).md) ### Customizing spring animations - [spring](swiftui/animation/spring.md) - [spring(_:blendDuration:)](swiftui/animation/spring(_:blendduration:).md) - [spring(duration:bounce:blendDuration:)](swiftui/animation/spring(duration:bounce:blendduration:).md) - [spring(response:dampingFraction:blendDuration:)](swiftui/animation/spring(response:dampingfraction:blendduration:).md) - [interactiveSpring](swiftui/animation/interactivespring.md) - [interactiveSpring(response:dampingFraction:blendDuration:)](swiftui/animation/interactivespring(response:dampingfraction:blendduration:).md) - [interpolatingSpring](swiftui/animation/interpolatingspring.md) - [interpolatingSpring(_:initialVelocity:)](swiftui/animation/interpolatingspring(_:initialvelocity:).md) - [interpolatingSpring(duration:bounce:initialVelocity:)](swiftui/animation/interpolatingspring(duration:bounce:initialvelocity:).md) - [interpolatingSpring(mass:stiffness:damping:initialVelocity:)](swiftui/animation/interpolatingspring(mass:stiffness:damping:initialvelocity:).md) ### Creating custom animations - [init(_:)](swiftui/animation/init(_:).md) - [timingCurve(_:duration:)](swiftui/animation/timingcurve(_:duration:).md) - [timingCurve(_:_:_:_:duration:)](swiftui/animation/timingcurve(_:_:_:_:duration:).md) ### Configuring an animation - [delay(_:)](swiftui/animation/delay(_:).md) - [repeatCount(_:autoreverses:)](swiftui/animation/repeatcount(_:autoreverses:).md) - [repeatForever(autoreverses:)](swiftui/animation/repeatforever(autoreverses:).md) - [speed(_:)](swiftui/animation/speed(_:).md) ### Instance Properties - [base](swiftui/animation/base.md) ### Instance Methods - [animate(value:time:context:)](swiftui/animation/animate(value:time:context:).md) - [logicallyComplete(after:)](swiftui/animation/logicallycomplete(after:).md) - [shouldMerge(previous:value:time:context:)](swiftui/animation/shouldmerge(previous:value:time:context:).md) - [velocity(value:time:context:)](swiftui/animation/velocity(value:time:context:).md) ### Type Properties - [systemOverlayAppearance](swiftui/animation/systemoverlayappearance.md) - [systemOverlayDelayedDisappearance](swiftui/animation/systemoverlaydelayeddisappearance.md) - [systemOverlayDisappearance](swiftui/animation/systemoverlaydisappearance.md) - [systemOverlayDisappearanceDelay](swiftui/animation/systemoverlaydisappearancedelay.md) ### Type Methods - [interactiveSpring(duration:extraBounce:blendDuration:)](swiftui/animation/interactivespring(duration:extrabounce:blendduration:).md) ## Relationships ### Conforms To - [Copyable](swift/copyable.md) - [CustomDebugStringConvertible](swift/customdebugstringconvertible.md) - [CustomReflectable](swift/customreflectable.md) - [CustomStringConvertible](swift/customstringconvertible.md) - [Equatable](swift/equatable.md) - [Escapable](swift/escapable.md) - [Hashable](swift/hashable.md) - [Sendable](swift/sendable.md) - [SendableMetatype](swift/sendablemetatype.md) ## See Also ### Adding state-based animation to an action - [withAnimation(_:_:)](swiftui/withanimation(_:_:).md) - [withAnimation(_:completionCriteria:_:completion:)](swiftui/withanimation(_:completioncriteria:_:completion:).md) - [AnimationCompletionCriteria](swiftui/animationcompletioncriteria.md)