EducaSwift

SwiftUI makes it easy to add animations to your apps, providing a simple and declarative way to create smooth transitions and visual effects.

Basic animation

To animate views in SwiftUI, you can use the .animation modifier. In this modifier we need to indicate what variable will trigger the animation, so all the UI that uses that variable will be animated:

struct AnimationExample: View {
    @State var isScaled = false

    var body: some View {
        VStack {
            Text("EducaSwift!")
                .font(.largeTitle)
                .scaleEffect(isScaled ? 1.5 : 1.0)
                .animation(.default, value: isScaled)

            Button("Animate") {
                isScaled.toggle()
            }
        }
    }
}

Placing our animation definitions

When we define an .animation, it should be placed after the use of the variable we want to animate (it could be even in the parent).

Text("EducaSwift!")
    .font(.largeTitle)
    .animation(.default, value: isScaled)
    .scaleEffect(isScaled ? 1.5 : 1.0) // <-- This should be before the animation

VStack {
   Text("EducaSwift!")
       .font(.largeTitle)
       .scaleEffect(isScaled ? 1.5 : 1.0)

   Button("Animate") {
       isScaled.toggle()
   }
}
.animation(.default, value: isScaled)

Custom animations

We can define a custom animation applying differents 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. - Apple's documentation.

Here you have a guide of the most common easing types:

There is a few predefined animations with different easing types that you can use in the .animation modifier. Let's try the .bouncy one.

Text("EducaSwift!")
   .font(.largeTitle)
   .scaleEffect(isScaled ? 1.5 : 1.0)
   .animation(.bouncy, value: isScaled)

We can specify the duration of the animation as well. Only some predefined animations provide this option.

Text("EducaSwift!")
   .font(.largeTitle)
   .scaleEffect(isScaled ? 1.5 : 1.0)
   .animation(.bouncy(duration: 3), value: isScaled)

Animation transition

We can animate when a view appears and disappears:

@State var isVisible = false

var body: some View {
   VStack {
       if isVisible {
           Text("EducaSwift!")
               .font(.largeTitle)
       }

       Button("Animate") {
           isVisible.toggle()
       }
   }
   .animation(.default, value: isVisible)
}

In this case we can define the transition, applying .transition modifier to an specific view:

@State var isVisible = false

var body: some View {
   VStack {
       if isVisible {
           Text("EducaSwift!")
               .font(.largeTitle)
               .transition(.scale)
       }

       Button("Animate") {
           isVisible.toggle()
       }
   }
   .animation(.default, value: isVisible)
}

Quiz Time!

Next Question

Your Score:

Repeat

Share