The way a view changes over time to create a smooth visual transition from
one state to another.
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 ``View/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()
}
@Video(source: "animation-01-overview-easein.mp4", poster: "animation-01-overview-easein.png", alt: "A video that shows a circle enlarging then shrinking to its original size using an ease-in animation.")
When the value of `scale` changes, the modifier
``View/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()
}
}
@Video(source: "animation-02-overview-easein-repeat.mp4", poster: "animation-02-overview-easein-repeat.png", alt: "A video that shows a circle that repeats the ease-in animation three times: enlarging, then shrinking, then enlarging again. The animation reverses causing the circle to shrink, then enlarge, then shrink to its original size.")
A view can also perform an animation when a binding value changes. To
specify the animation type on a binding, call its ``Binding/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))
}
}
}
@Video(source: "animation-03-overview-binding.mp4", poster: "animation-03-overview-binding.png", alt: "A video that shows a box truck that moves from the leading edge of a view to the trailing edge. The box truck then returns to the view's leading edge.")
Members (40)
get · iOS 13.0+
description
TypeScript
get description(): string
Swift declaration
var description: String { get }
A textual representation of this instance.
Calling this property directly is discouraged. Instead, convert an
instance of any type to a string by using the `String(describing:)`
initializer. This initializer works with any type, and uses the custom
`description` property for types that conform to
`CustomStringConvertible`:
struct Point: CustomStringConvertible {
let x: Int, y: Int
var description: String {
return "(\(x), \(y))"
}
}
let p = Point(x: 21, y: 30)
let s = String(describing: p)
print(s)
// Prints "(21, 30)"
The conversion of `p` to a string in the assignment to `s` uses the
`Point` type's `description` property.
Repeats the animation for a specific number of times.
Use this method to repeat the animation a specific number of times. For
example, in the following code, the animation moves a truck from one
edge of the view to the other edge. It repeats this animation three
times.
struct ContentView: View {
@State private var driveForward = true
private var driveAnimation: Animation {
.easeInOut
.repeatCount(3, autoreverses: true)
.speed(0.5)
}
var body: some View {
VStack(alignment: driveForward ? .leading : .trailing, spacing: 40) {
Image(systemName: "box.truck")
.font(.system(size: 48))
.animation(driveAnimation, value: driveForward)
HStack {
Spacer()
Button("Animate") {
driveForward.toggle()
}
Spacer()
}
}
}
}
@Video(source: "animation-16-repeat-count.mp4", poster: "animation-16-repeat-count.png", alt: "A video that shows a box truck moving from the leading edge of a view to the trailing edge, and back again before looping in the opposite direction.")
The first time the animation runs, the truck moves from the leading
edge to the trailing edge of the view. The second time the animation
runs, the truck moves from the trailing edge to the leading edge
because `autoreverse` is `true`. If `autoreverse` were `false`, the
truck would jump back to leading edge before moving to the trailing
edge. The third time the animation runs, the truck moves from the
leading to the trailing edge of the view.
- Parameters:
- repeatCount: The number of times that the animation repeats. Each
repeated sequence starts at the beginning when `autoreverse` is
`false`.
- autoreverses: A Boolean value that indicates whether the animation
sequence plays in reverse after playing forward. Autoreverse counts
towards the `repeatCount`. For instance, a `repeatCount` of one plays
the animation forward once, but it doesn’t play in reverse even if
`autoreverse` is `true`. When `autoreverse` is `true` and
`repeatCount` is `2`, the animation moves forward, then reverses, then
stops.
- Returns: An animation that repeats for specific number of times.
Creates a new animation with speed controlled by the given curve.
- Parameters:
- curve: A curve that describes the speed of the
animation over its duration.
- duration: The duration of the animation, in seconds.
An animation created from a cubic Bézier timing curve.
Use this method to create a timing curve based on the control points of
a cubic Bézier curve. A cubic Bézier timing curve consists of a line
whose starting point is `(0, 0)` and whose end point is `(1, 1)`. Two
additional control points, `(p1x, p1y)` and `(p2x, p2y)`, define the
shape of the curve.
The slope of the line defines the speed of the animation at that point
in time. A steep slopes causes the animation to appear to run faster,
while a shallower slope appears to run slower. The following
illustration shows a timing curve where the animation starts and
finishes fast, but appears slower through the middle section of the
animation.
The following code uses the timing curve from the previous
illustration to animate a ``Circle`` as its size changes.
struct ContentView: View {
@State private var scale = 1.0
var body: some View {
VStack {
Circle()
.scaleEffect(scale)
.animation(
.timingCurve(0.1, 0.75, 0.85, 0.35, duration: 2.0),
value: scale)
Button("Animate") {
if scale == 1.0 {
scale = 0.25
} else {
scale = 1.0
}
}
}
}
}
@Video(source: "animation-14-timing-curve.mp4", poster: "animation-14-timing-curve.png", alt: "A video that shows a circle shrinking then growing to its original size using a timing curve animation. The first control point of the time curve is (0.1, 0.75) and the second is (0.85, 0.35).")
- Parameters:
- p1x: The x-coordinate of the first control point of the cubic
Bézier curve.
- p1y: The y-coordinate of the first control point of the cubic
Bézier curve.
- p2x: The x-coordinate of the second control point of the cubic
Bézier curve.
- p2y: The y-coordinate of the second control point of the cubic
Bézier curve.
- duration: The length of time, expressed in seconds, the animation
takes to complete.
- Returns: A cubic Bézier timing curve animation.
get · iOS 13.0+
customMirror
TypeScript
get customMirror(): SDKHandle
Swift declaration
var customMirror: Mirror { get }
The custom mirror for this instance.
If this type has value semantics, the mirror should be unaffected by
subsequent mutations of the instance.
Repeats the animation for the lifespan of the view containing the
animation.
Use this method to repeat the animation until the instance of the view
no longer exists, or the view’s explicit or structural identity
changes. For example, the following code continuously rotates a
gear symbol for the lifespan of the view.
struct ContentView: View {
@State private var rotationDegrees = 0.0
private var animation: Animation {
.linear
.speed(0.1)
.repeatForever(autoreverses: false)
}
var body: some View {
Image(systemName: "gear")
.font(.system(size: 86))
.rotationEffect(.degrees(rotationDegrees))
.onAppear {
withAnimation(animation) {
rotationDegrees = 360.0
}
}
}
}
@Video(source: "animation-17-repeat-forever.mp4", poster: "animation-17-repeat-forever.png", alt: "A video that shows a gear that continuously rotates clockwise.")
- Parameter autoreverses: A Boolean value that indicates whether the
animation sequence plays in reverse after playing forward.
- Returns: An animation that continuously repeats.
get · iOS 13.0+
debugDescription
TypeScript
get debugDescription(): string
Swift declaration
var debugDescription: String { get }
A textual representation of this instance, suitable for debugging.
Calling this property directly is discouraged. Instead, convert an
instance of any type to a string by using the `String(reflecting:)`
initializer. This initializer works with any type, and uses the custom
`debugDescription` property for types that conform to
`CustomDebugStringConvertible`:
struct Point: CustomDebugStringConvertible {
let x: Int, y: Int
var debugDescription: String {
return "(\(x), \(y))"
}
}
let p = Point(x: 21, y: 30)
let s = String(reflecting: p)
print(s)
// Prints "(21, 30)"
The conversion of `p` to a string in the assignment to `s` uses the
`Point` type's `debugDescription` property.
A convenience for a `spring` animation with a lower
`response` value, intended for driving interactive animations.
get · iOS 13.0+
interactiveSpring
TypeScript
static get interactiveSpring(): Animation
Swift declaration
@export(implementation) static var interactiveSpring: Animation { get }
A convenience for a `spring` animation with a lower
`duration` value, intended for driving interactive animations.
This uses the default parameter values.
Causes the animation to report logical completion after the specified
duration, if it has not already logically completed.
Note that the indicated duration will not cause the animation to
continue running after the base animation has fully completed.
If the animation is removed before the given duration is reached,
logical completion will be reported immediately.
- Parameters:
- duration: The duration after which the animation should report
that it is logically complete.
- Returns: An animation that reports logical completion after the
given duration.
An interpolating spring animation that uses a damped spring
model to produce values in the range [0, 1] that are then used
to interpolate within the [from, to] range of the animated
property. Preserves velocity across overlapping animations by
adding the effects of each animation.
- Parameters:
- mass: The mass of the object attached to the spring.
- stiffness: The stiffness of the spring.
- damping: The spring damping value.
- initialVelocity: the initial velocity of the spring, as
a value in the range [0, 1] representing the magnitude of
the value being animated.
- Returns: a spring animation.
An interpolating spring animation that uses a damped spring
model to produce values in the range [0, 1] that are then used
to interpolate within the [from, to] range of the animated
property. Preserves velocity across overlapping animations by
adding the effects of each animation.
- Parameters:
- duration: The perceptual duration, which defines the pace of the
spring. This is approximately equal to the settling duration, but
for very bouncy springs, will be the duration of the period of
oscillation for the spring.
- bounce: How bouncy the spring should be. A value of 0 indicates
no bounces (a critically damped spring), positive values indicate
increasing amounts of bounciness up to a maximum of 1.0
(corresponding to undamped oscillation), and negative values
indicate overdamped springs with a minimum value of -1.0.
- initialVelocity: the initial velocity of the spring, as
a value in the range [0, 1] representing the magnitude of
the value being animated.
- Returns: a spring animation.
get · iOS 13.0+
interpolatingSpring
TypeScript
static get interpolatingSpring(): Animation
Swift declaration
@export(implementation) static var interpolatingSpring: Animation { get }
An interpolating spring animation that uses a damped spring
model to produce values in the range [0, 1] that are then used
to interpolate within the [from, to] range of the animated
property. Preserves velocity across overlapping animations by
adding the effects of each animation.
This uses the default parameter values.
An interpolating spring animation that uses a damped spring
model to produce values in the range of one to zero.
These vales are used to interpolate within the `[from, to]` range
of the animated
property. Preserves velocity across overlapping animations by
adding the effects of each animation.
get · iOS 17.0+
base
TypeScript
get base(): SDKHandle
Swift declaration
var base: any CustomAnimation { get }
method · iOS 13.0+
delay
TypeScript
delay(delay: number): Animation
Swift declaration
func delay(_ delay: TimeInterval) -> Animation
Delays the start of the animation by the specified number of seconds.
Use this method to delay the start of an animation. For example, the
following code animates the height change of two capsules.
Animation of the first ``Capsule`` begins immediately. However,
animation of the second one doesn't begin until a half second later.
struct ContentView: View {
@State private var adjustBy = 100.0
var body: some View {
VStack(spacing: 40) {
HStack(alignment: .bottom) {
Capsule()
.frame(width: 50, height: 175 - adjustBy)
.animation(.easeInOut, value: adjustBy)
Capsule()
.frame(width: 50, height: 175 + adjustBy)
.animation(.easeInOut.delay(0.5), value: adjustBy)
}
Button("Animate") {
adjustBy *= -1
}
}
}
}
@Video(source: "animation-15-delay.mp4", poster: "animation-15-delay.png", alt: "A video that shows two capsules side by side that animate using the ease-in ease-out animation. The capsule on the left is short, while the capsule on the right is tall. As they animate, the short capsule grows upwards to match the height of the tall capsule. Then the tall capsule shrinks to match the original height of the short capsule. Then the capsule on the left shrinks to its original height, followed by the capsule on the right growing to its original height.")
- Parameter delay: The number of seconds to delay the start of the
animation.
- Returns: An animation with a delayed start.
method · iOS 13.0+
speed
TypeScript
speed(speed: number): Animation
Swift declaration
func speed(_ speed: Double) -> Animation
Changes the duration of an animation by adjusting its speed.
Setting the speed of an animation changes the duration of the animation
by a factor of `speed`. A higher speed value causes a faster animation
sequence due to a shorter duration. For example, a one-second animation
with a speed of `2.0` completes in half the time (half a second).
struct ContentView: View {
@State private var adjustBy = 100.0
private var oneSecondAnimation: Animation {
.easeInOut(duration: 1.0)
}
var body: some View {
VStack(spacing: 40) {
HStack(alignment: .bottom) {
Capsule()
.frame(width: 50, height: 175 - adjustBy)
Capsule()
.frame(width: 50, height: 175 + adjustBy)
}
.animation(oneSecondAnimation.speed(2.0), value: adjustBy)
Button("Animate") {
adjustBy *= -1
}
}
}
}
@Video(source: "animation-18-speed.mp4", poster: "animation-18-speed.png", alt: "A video that shows two capsules side by side that animate using the ease-in ease-out animation. The capsule on the left is short, while the capsule on the right is tall. They animate for half a second with the short capsule growing upwards to match the height of the tall capsule. Then the tall capsule shrinks to match the original height of the short capsule. For another half second, the capsule on the left shrinks to its original height, followed by the capsule on the right growing to its original height.")
Setting `speed` to a lower number slows the animation, extending its
duration. For example, a one-second animation with a speed of `0.25`
takes four seconds to complete.
struct ContentView: View {
@State private var adjustBy = 100.0
private var oneSecondAnimation: Animation {
.easeInOut(duration: 1.0)
}
var body: some View {
VStack(spacing: 40) {
HStack(alignment: .bottom) {
Capsule()
.frame(width: 50, height: 175 - adjustBy)
Capsule()
.frame(width: 50, height: 175 + adjustBy)
}
.animation(oneSecondAnimation.speed(0.25), value: adjustBy)
Button("Animate") {
adjustBy *= -1
}
}
}
}
@Video(source: "animation-19-speed-slow.mp4", poster: "animation-19-speed-slow.png", alt: "A video that shows two capsules side by side that animate using the ease-in ease-out animation. The capsule on the left is short, while the right-side capsule is tall. They animate for four seconds with the short capsule growing upwards to match the height of the tall capsule. Then the tall capsule shrinks to match the original height of the short capsule. For another four seconds, the capsule on the left shrinks to its original height, followed by the capsule on the right growing to its original height.")
- Parameter speed: The speed at which SwiftUI performs the animation.
- Returns: An animation with the adjusted speed.
A spring animation with a predefined duration and higher amount of
bounce that can be tuned.
- Parameters:
- duration: The perceptual duration, which defines the pace of the
spring. This is approximately equal to the settling duration, but
for very bouncy springs, will be the duration of the period of
oscillation for the spring.
- extraBounce: How much additional bounce should be added to the base
bounce of 0.3.
get · iOS 13.0+
bouncy
TypeScript
static get bouncy(): Animation
Swift declaration
@export(implementation) static var bouncy: Animation { get }
A spring animation with a predefined duration and higher amount of
bounce.
An animation with a specified duration that starts slowly and then
increases speed towards the end of the movement.
An easing animation provides motion with a natural feel by varying
the acceleration and deceleration of the animation, which matches
how things tend to move in reality. With an ease in animation, the
motion starts slowly and increases its speed towards the end.
Use `easeIn(duration:)` when you want to specify the time it takes
for the animation to complete. Otherwise, use ``easeIn`` to perform the
animation for a default length of time.
The following code shows an example of animating the size changes of
a ``Circle`` using an ease in animation with a duration of one
second.
struct ContentView: View {
@State private var scale = 0.5
var body: some View {
VStack {
Circle()
.scale(scale)
.animation(.easeIn(duration: 1.0), value: scale)
HStack {
Button("+") { scale += 0.1 }
Button("-") { scale -= 0.1 }
}
}
}
}
@Video(source: "animation-09-easein-duration.mp4", poster: "animation-09-easein-duration.png", alt: "A video that shows a circle enlarging for one second, then shrinking for another second to its original size using an ease-in animation.")
- Parameter duration: The length of time, expressed in seconds, that
the animation takes to complete.
- Returns: An ease-in animation with a specified duration.
get · iOS 13.0+
easeIn
TypeScript
static get easeIn(): Animation
Swift declaration
static var easeIn: Animation { get }
An animation that starts slowly and then increases speed towards the
end of the movement.
An easing animation provides motion with a natural feel by varying
the acceleration and deceleration of the animation, which matches
how things tend to move in reality. With an ease in animation, the
motion starts slowly and increases its speed towards the end.
The `easeIn` animation has a default duration of 0.35 seconds. To
specify a different duration, use ``easeIn(duration:)``.
The following code shows an example of animating the size changes of
a ``Circle`` using the ease in animation.
struct ContentView: View {
@State private var scale = 0.5
var body: some View {
VStack {
Circle()
.scale(scale)
.animation(.easeIn, value: scale)
HStack {
Button("+") { scale += 0.1 }
Button("-") { scale -= 0.1 }
}
}
}
}
@Video(source: "animation-08-easein.mp4", poster: "animation-08-easein.png", alt: "A video that shows a circle enlarging, then shrinking to its original size using an ease-in animation.")
- Returns: An ease-in animation with the default duration.
An animation that moves at a constant speed during a specified
duration.
A linear animation provides a mechanical feel to the motion because its
speed is consistent from start to finish of the animation. This
constant speed makes a linear animation ideal for animating the
movement of objects where changes in the speed might feel awkward, such
as with an activity indicator.
Use `linear(duration:)` when you want to specify the time it takes
for the animation to complete. Otherwise, use ``linear`` to perform the
animation for a default length of time.
The following code shows an example of using linear animation with a
duration of two seconds to animate the movement of a circle as it moves
between the leading and trailing edges of the view. The color of the
circle also animates from red to blue as it moves across the view.
struct ContentView: View {
@State private var isActive = false
var body: some View {
VStack(alignment: isActive ? .trailing : .leading) {
Circle()
.fill(isActive ? Color.red : Color.blue)
.frame(width: 50, height: 50)
Button("Animate") {
withAnimation(.linear(duration: 2.0)) {
isActive.toggle()
}
}
.frame(maxWidth: .infinity)
}
}
}
@Video(source: "animation-07-linear-duration.mp4", poster: "animation-07-linear-duration.png", alt: "A video that shows a circle moving from the leading edge of the view to the trailing edge. The color of the circle also changes from red to blue as it moves across the view. Then the circle moves from the trailing edge back to the leading edge while also changing colors from blue to red.")
- Parameter duration: The length of time, expressed in seconds, that
the animation takes to complete.
- Returns: A linear animation with a specified duration.
get · iOS 13.0+
linear
TypeScript
static get linear(): Animation
Swift declaration
static var linear: Animation { get }
An animation that moves at a constant speed.
A linear animation provides a mechanical feel to the motion because its
speed is consistent from start to finish of the animation. This
constant speed makes a linear animation ideal for animating the
movement of objects where changes in the speed might feel awkward, such
as with an activity indicator.
The following code shows an example of using linear animation to
animate the movement of a circle as it moves between the leading and
trailing edges of the view. The circle also animates its color change
as it moves across the view.
struct ContentView: View {
@State private var isActive = false
var body: some View {
VStack(alignment: isActive ? .trailing : .leading) {
Circle()
.fill(isActive ? Color.red : Color.blue)
.frame(width: 50, height: 50)
Button("Animate") {
withAnimation(.linear) {
isActive.toggle()
}
}
.frame(maxWidth: .infinity)
}
}
}
@Video(source: "animation-06-linear.mp4", poster: "animation-06-linear.png", alt: "A video that shows a circle moving from the leading edge of the view to the trailing edge. The color of the circle also changes from red to blue as it moves across the view. Then the circle moves from the trailing edge back to the leading edge while also changing colors from blue to red.")
The `linear` animation has a default duration of 0.35 seconds. To
specify a different duration, use ``linear(duration:)``.
- Returns: A linear animation with the default duration.
A smooth spring animation with a predefined duration and no bounce
that can be tuned.
- Parameters:
- duration: The perceptual duration, which defines the pace of the
spring. This is approximately equal to the settling duration, but
for very bouncy springs, will be the duration of the period of
oscillation for the spring.
- extraBounce: How much additional bounce should be added to the base
bounce of 0.
get · iOS 13.0+
smooth
TypeScript
static get smooth(): Animation
Swift declaration
@export(implementation) static var smooth: Animation { get }
A smooth spring animation with a predefined duration and no bounce.
A spring animation with a predefined duration and small amount of
bounce that feels more snappy and can be tuned.
- Parameters:
- duration: The perceptual duration, which defines the pace of the
spring. This is approximately equal to the settling duration, but
for very bouncy springs, will be the duration of the period of
oscillation for the spring.
- extraBounce: How much additional bounce should be added to the base
bounce of 0.15.
get · iOS 13.0+
snappy
TypeScript
static get snappy(): Animation
Swift declaration
@export(implementation) static var snappy: Animation { get }
A spring animation with a predefined duration and small amount of
bounce that feels more snappy.
A persistent spring animation. When mixed with other `spring()`
or `interactiveSpring()` animations on the same property, each
animation will be replaced by their successor, preserving
velocity from one animation to the next. Optionally blends the
duration values between springs over a time period.
- Parameters:
- duration: The perceptual duration, which defines the pace of the
spring. This is approximately equal to the settling duration, but
for very bouncy springs, will be the duration of the period of
oscillation for the spring.
- bounce: How bouncy the spring should be. A value of 0 indicates
no bounces (a critically damped spring), positive values indicate
increasing amounts of bounciness up to a maximum of 1.0
(corresponding to undamped oscillation), and negative values
indicate overdamped springs with a minimum value of -1.0.
- blendDuration: The duration in seconds over which to
interpolate changes to the duration.
- Returns: a spring animation.
A persistent spring animation. When mixed with other `spring()`
or `interactiveSpring()` animations on the same property, each
animation will be replaced by their successor, preserving
velocity from one animation to the next. Optionally blends the
response values between springs over a time period.
- Parameters:
- response: The stiffness of the spring, defined as an
approximate duration in seconds. A value of zero requests
an infinitely-stiff spring, suitable for driving
interactive animations.
- dampingFraction: The amount of drag applied to the value
being animated, as a fraction of an estimate of amount
needed to produce critical damping.
- blendDuration: The duration in seconds over which to
interpolate changes to the response value of the spring.
- Returns: a spring animation.
get · iOS 13.0+
spring
TypeScript
static get spring(): Animation
Swift declaration
@export(implementation) static var spring: Animation { get }
A persistent spring animation. When mixed with other `spring()`
or `interactiveSpring()` animations on the same property, each
animation will be replaced by their successor, preserving
velocity from one animation to the next. Optionally blends the
response values between springs over a time period.
This uses the default parameter values.
A persistent spring animation.
When mixed with other `spring()`
or `interactiveSpring()` animations on the same property, each
animation will be replaced by their successor, preserving
velocity from one animation to the next. Optionally blends the
duration values between springs over a time period.
func animate<V>(value: V, time: TimeInterval, context: inout AnimationContext<V>) -> V? where V : VectorArithmetic
Calculates the current value of the animation.
- Returns: The current value of the animation, or `nil` if the animation has finished.
Omit the output parameters from the call. The result contains $ret and $out, with context inside $out.
get · iOS 13.0+
default
TypeScript
static get default(): Animation
Swift declaration
static let `default`: Animation
A default animation instance.
The `default` animation is ``spring(response:dampingFraction:blendDuration:)``
with:
- `response` equal to `0.55`
- `dampingFraction` equal to `1.0`
- `blendDuration` equal to `0.0`
Prior to iOS 17, macOS 14, tvOS 17, and watchOS 10, the `default`
animation is ``easeInOut``.
The global function
``withAnimation(_:_:)`` uses the default animation if you don't
provide one. For instance, the following code listing shows
an example of using the `default` animation to flip the text "Hello"
each time someone clicks the Animate button.
struct ContentView: View {
@State private var degrees = Double.zero
var body: some View {
VStack {
Spacer()
Text("Hello")
.font(.largeTitle)
.rotation3DEffect(.degrees(degrees), axis: (x: 0, y: 1, z: 0))
Spacer()
Button("Animate") {
withAnimation {
degrees = (degrees == .zero) ? 180 : .zero
}
}
}
}
}
@Video(source: "animation-04-default-flip.mp4", poster: "animation-04-default-flip.png", alt: "A video that shows the word Hello flip horizontally so that its letters appear backwards. Then it flips in reverse so that the word Hello appears correctly.")
To use the `default` animation when adding the ``View/animation(_:value:)``
view modifier, specify it explicitly as the animation type. For
instance, the following code shows an example of the `default`
animation to spin the text "Hello" each time someone clicks the Animate
button.
struct ContentView: View {
@State private var degrees = Double.zero
var body: some View {
VStack {
Spacer()
Text("Hello")
.font(.largeTitle)
.rotationEffect(.degrees(degrees))
.animation(.default, value: degrees)
Spacer()
Button("Animate") {
degrees = (degrees == .zero) ? 360 : .zero
}
}
}
}
@Video(source: "animation-05-default-spin.mp4", poster: "animation-05-default-spin.png", alt: "A video that shows the word Hello spinning clockwise for one full rotation, that is, 360 degrees. Then Hello spins counterclockwise for one full rotation.")
A `default` animation instance is only equal to other `default`
animation instances (using `==`), and not equal to other animation
instances even when the animations are identical. For example, if you
create an animation using the ``spring(response:dampingFraction:blendDuration:)``
modifier with the same parameter values that `default` uses, the
animation isn't equal to `default`. This behavior lets you
differentiate between animations that you intentionally choose and
those that use the `default` animation.
An animation with a specified duration that starts quickly and then
slows towards the end of the movement.
An easing animation provides motion with a natural feel by varying
the acceleration and deceleration of the animation, which matches
how things tend to move in reality. With an ease out animation, the
motion starts quickly and decreases its speed towards the end.
Use `easeOut(duration:)` when you want to specify the time it takes
for the animation to complete. Otherwise, use ``easeOut`` to perform
the animation for a default length of time.
The following code shows an example of animating the size changes of
a ``Circle`` using an ease out animation with a duration of one
second.
struct ContentView: View {
@State private var scale = 0.5
var body: some View {
VStack {
Circle()
.scale(scale)
.animation(.easeOut(duration: 1.0), value: scale)
HStack {
Button("+") { scale += 0.1 }
Button("-") { scale -= 0.1 }
}
}
}
}
@Video(source: "animation-11-easeout-duration.mp4", poster: "animation-11-easeout-duration.png", alt: "A video that shows a circle enlarging for one second, then shrinking for another second to its original size using an ease-out animation.")
- Parameter duration: The length of time, expressed in seconds, that
the animation takes to complete.
- Returns: An ease-out animation with a specified duration.
get · iOS 13.0+
easeOut
TypeScript
static get easeOut(): Animation
Swift declaration
static var easeOut: Animation { get }
An animation that starts quickly and then slows towards the end of the
movement.
An easing animation provides motion with a natural feel by varying
the acceleration and deceleration of the animation, which matches
how things tend to move in reality. With an ease out animation, the
motion starts quickly and decreases its speed towards the end.
The `easeOut` animation has a default duration of 0.35 seconds. To
specify a different duration, use ``easeOut(duration:)``.
The following code shows an example of animating the size changes of
a ``Circle`` using an ease out animation.
struct ContentView: View {
@State private var scale = 0.5
var body: some View {
VStack {
Circle()
.scale(scale)
.animation(.easeOut, value: scale)
HStack {
Button("+") { scale += 0.1 }
Button("-") { scale -= 0.1 }
}
}
}
}
@Video(source: "animation-10-easeout.mp4", poster: "animation-10-easeout.png", alt: "A video that shows a circle enlarging, then shrinking to its original size using an ease-out animation.")
- Returns: An ease-out animation with the default duration.
An animation with a specified duration that combines the behaviors of
in and out easing animations.
An easing animation provides motion with a natural feel by varying
the acceleration and deceleration of the animation, which matches
how things tend to move in reality. An ease in and out animation
starts slowly, increasing its speed towards the halfway point, and
finally decreasing the speed towards the end of the animation.
Use `easeInOut(duration:)` when you want to specify the time it takes
for the animation to complete. Otherwise, use ``easeInOut`` to perform
the animation for a default length of time.
The following code shows an example of animating the size changes of
a ``Circle`` using an ease in and out animation with a duration of
one second.
struct ContentView: View {
@State private var scale = 0.5
var body: some View {
VStack {
Circle()
.scale(scale)
.animation(.easeInOut(duration: 1.0), value: scale)
HStack {
Button("+") { scale += 0.1 }
Button("-") { scale -= 0.1 }
}
}
}
}
@Video(source: "animation-13-easeineaseout-duration.mp4", poster: "animation-13-easeineaseout-duration.png", alt: "A video that shows a circle enlarging for one second, then shrinking for another second to its original size using an ease-in ease-out animation.")
- Parameter duration: The length of time, expressed in seconds, that
the animation takes to complete.
- Returns: An ease-in ease-out animation with a specified duration.
get · iOS 13.0+
easeInOut
TypeScript
static get easeInOut(): Animation
Swift declaration
static var easeInOut: Animation { get }
An animation that combines the behaviors of in and out easing
animations.
An easing animation provides motion with a natural feel by varying
the acceleration and deceleration of the animation, which matches
how things tend to move in reality. An ease in and out animation
starts slowly, increasing its speed towards the halfway point, and
finally decreasing the speed towards the end of the animation.
The `easeInOut` animation has a default duration of 0.35 seconds. To
specify the duration, use the ``easeInOut(duration:)`` method.
The following code shows an example of animating the size changes of a
``Circle`` using an ease in and out animation.
struct ContentView: View {
@State private var scale = 0.5
var body: some View {
VStack {
Circle()
.scale(scale)
.animation(.easeInOut, value: scale)
HStack {
Button("+") { scale += 0.1 }
Button("-") { scale -= 0.1 }
}
}
}
}
@Video(source: "animation-12-easeineaseout.mp4", poster: "animation-12-easeineaseout.png", alt: "A video that shows a circle enlarging, then shrinking to its original size using an ease-in ease-out animation.")
- Returns: An ease-in ease-out animation with the default duration.
Skipped declarations
1 declarations were excluded from these bindings. Each reason comes from the generator or the iOS SDK compiler.
Animation.init(_:)
This declaration needs Swift generic type arguments. (no canonical witness for A)
