Animation on SwiftUI is a lot easier to achieve than UIKit with so much more support provided by Apple. I wonder if this will be a good thing or bad thing but regardless, we need to make good use of what is provided right.

In this tutorial, you’ll learn how to perform a scaling animation in SwiftUI.

Prerequisites

To follow along this tutorial, you’ll need some basic knowledge in:

A basic familiarity with Swift.
At least Xcode 11

Setting up the view

You will be given a button where you will animate when the button is clicked. The first thing to do is to create a variable know if the button is being clicked or not.

@State private var isAnimated = false

1	@State private var isAnimated = false

Then you will create another variable which represent Animation so that it is easy to tweak from here.

var animation: Animation {
    Animation.linear
}

var animation: Animation {

Animation.linear

}

You can play around with the animation in a bit if you create your variable as above. You will create a button and a Rectangle that will simulate the animation.

VStack(spacing: 20) {
    // 1
    Button("Rotate") {
        self.isAnimated.toggle()
    }
    // 2
    Rectangle()
        .foregroundColor(.green)
        .frame(width: 200, height: 200)
        .scaleEffect(isAnimated ? 0.5 : 1)
        .animation(animation)
}

VStack(spacing: 20) {

// 1

Button("Rotate") {

self.isAnimated.toggle()

}

// 2

Rectangle()

.foregroundColor(.green)

.frame(width: 200, height: 200)

.scaleEffect(isAnimated ? 0.5 : 1)

.animation(animation)

}

When you click on the button, you will toggle the bool value.
A rectangle is created with its properties defined.

Scaling Effect

You may modify the animation effect from here by replacing the animation.

var animation: Animation {
    Animation.easeOut
}

var animation: Animation {

Animation.easeOut

}

Let’s explore multiple different animation. The first would be easeOut where it will slow down at the end of the animation.

The next animation is easeIn where it will start slow then it will speed up.

The next animation is linear where it will maintain a constant speed throughout the duration of the animation.

The last one is easeInOut where it will start slow then speed up and finally slow down at the end.

Non Stop Animation

Requirement changes, now you are required to rotate the rectangle non stop. I know it looks like a Square, I should have given it a bigger width. Anyway, let’s tweak the animation a little bit.

You will need to tweak 2 line of code to make this to work. With repeatForever, it will animate non stop and by including false, it will not reset but rotate continuously.

var animation: Animation {
    Animation.easeInOut
    .repeatForever(autoreverses: false)
}

var animation: Animation {

Animation.easeInOut

.repeatForever(autoreverses: false)

}

And the effect is as shown:

Anchor Point

You can even scale to your desired anchor point. Currently the default anchor point is center. Let’s try bottomLeading and it should scale to the left bottom.

.scaleEffect(isAnimated ? 0.5 : 1, anchor: .bottomLeading)

1	.scaleEffect(isAnimated ? 0.5 : 1, anchor: .bottomLeading)

You can even try many different anchor point such as leading, trailing, top, bottom, topLeading, topTrailing, bottomLeading and bottomTrailing. Have fun exploring.

SwiftUI has definitely bring the animation to a whole new level. I love SwiftUI! Check out more post that I posted about SwiftUI at http://daddycoding.com/swiftui/

SwiftUI: Scaling Animation

Prerequisites

Setting up the view

Scaling Effect

Non Stop Animation

Anchor Point

Be First to Comment

Leave a Reply Cancel reply