跳转至
Structure

Animation

Specifies the timing curve of a changing on-screen value.

Declaration

@frozen struct Animation : Equatable

Overview

An Animation is just a timing curve

Every animation has 3 parts:

  1. The numerical value in memory that changes over time --- usually a @State property
  2. How the View depends on this numerical value --- often using a view modifier
  3. The timing curve describing how this change happens --- this is the Animation

For example, say I want the screen to be green sometimes, but red at other times. The current color of the screen would be stored as a @State property. Then, the screen might use the foregroundColor(_:) modifier to actually make the screen this color. And finally, when I change the screen color, I can specify a timing curve, or Animation, to describe how it will happen.

Types of timing curves

There are many different types of timing curves, or Animations. For example, how long does the animation last (duration)? Does it move at the same speed the whole time (linear), or does it ease in and out? Or maybe it goes so fast at the beginning that it actually overshoots the target and has to go back. This is called a spring animation.

Main types

There are a few main types of timing curves:

  • linear: The value changes at the same speed the whole time.
  • easeIn: The value begins by changing slowly, then speeds up towards the end.
  • easeOut: The value begins quickly, and slows down towards the end.
  • easeInOut: The value begins by changing slowly, goes quickly in the middle, and ends slowly.
  • spring(response:dampingFraction:blendDuration:): The value begins very quickly, then overshoots the target and springs back.

Modifiers

There are also a few modifiers that can be applied to timing curves:

Using an animation

Once you have an animation, there are 3 main ways to use it:

  1. By applying it to a view using animation(_:), so any animatable properties of the view change with that timing curve.
  2. Directly when changing a @State property, using the withAnimation(_:_:) global function.
  3. By attaching the timing curve directly to a @Binding property, using animation(_:), so any changes to the binding happen with a certain animation.

See each of those respective pages for specifics of how to use each.

Putting it all together

Putting all of the sections above together into one example, here is what it looks like:

struct AnimateView: View {
    @State private var flag = true

    var body: some View {
        VStack {
            Rectangle()
                .foregroundColor(flag ? .yellow : .red)
                .frame(width: flag ? 50 : 100, height: flag ? 50 : 100)
                .rotationEffect(.degrees(flag ? 90 : 0))
                .animation(.easeInOut)

            Button("Animate") {
                self.flag.toggle()
            }
        }
    }
}
A gif displaying a view containing state variable flag and a VStack with a rectangle and a button reading "Animate"; when the button is pressed, flag is toggled and the properties of the rectangle change, resulting in it changing from yellow to red, growing in size, and rotating 90 degrees, all in an easeInOut animation timing curve type.

Availability

iOS 13.0+

macOS 10.15+

tvOS 13.0+

watchOS 6.0+

Topics


Instance Property

customMirror The custom mirror for this instance.

debugDescription A textual representation of this instance, suitable for debugging.

description A textual representation of this instance.


Type Property

default An identity animation that happens immediately.

easeIn An animation where the effect starts out slower and then ends more quickly.

easeInOut An animation where the effect starts out slower and ends slower, while moving most quickly in the middle.

easeOut An animation where the effect starts out more quickly and then slows down.

linear An animation where the effect happens at a constant speed throughout.


Type Method

==(lhs:rhs:) Returns a Boolean value indicating whether two values are equal.

easeIn(duration:) An animation where the effect starts out slower and then ends more quickly.

easeInOut(duration:) An animation where the effect starts out slower and ends slower, while moving most quickly in the middle.

easeOut(duration:) An animation where the effect starts out more quickly and then slows down.

interactiveSpring(response:dampingFraction:blendDuration:) A convenience for a spring() animation with a lower response value, intended for driving interactive animations.

interpolatingSpring(mass:stiffness:damping:initialVelocity:) A persistent spring animation, specified using a physics spring model.

linear(duration:) An animation where the effect happens at a constant speed throughout.

spring(response:dampingFraction:blendDuration:) A persistent spring animation.

timingCurve(_:_:_:_:duration:) An animation with a fully customized timing curve.


Instance Method

delay(_:) Adds delay to your animation that runs before it starts.

repeatCount(_:autoreverses:) Adjusts the number of times the animation should repeat itself.

repeatForever(autoreverses:) Adjusts whether the animation repeats forever.

speed(_:) Changes the speed of an animation.