Animations in SwiftUI

Animations in SwiftUI is a feature which helps us in animating the state transitions. Animation have become an important part of UI these days.

SwiftUI is an innovative and simple way to build User Interfaces for all Apple Devices with the power of Swift. It uses a declarative syntax, which tells what the user interface will do and also provides an interactive design canvas with the small amount of code.

Let’s begin working on the basic animations in SwiftUI…

So, firstly we will create a New Project in Xcode.

After that from the Template dialog, we need to select Single View App type under iOS.

After selecting the template , we can enter the Project Name and  we need to set User Interface as Swift UI, by default it is set as Swift.

In project, as we move on to ContentView.swift, we will find some code written. By default, there are two structures that are already declared within this file.

The first structure conforms to the View protocol and describes the View’s content. The second structure declares a preview of that View.

We can preview the UI for the app , by clicking on the Resume Button.

Types of Animations in SwiftUI

There are mainly two types of animations in SwiftUI :-

1.Implicit Animations

Implicit Animations are those animations which are specified using .animation() modifier.

In .animation() modifier we can add different types of animations like easeIn, easeOut, easeInOut , we can specify the duration as well for the animation.We can change the various properties while performing the animation.

On toggle, we are changing the size of the image using scaleEffect() modifier.

The output for the above code is –

Before Animation

On Toggle , the output will be

You can find the reference video for the animation, click on this link Video

2.Explicit Animations

Explicit Animations are those which are defined using withAnimation{} closure.

While defining the animation, we have specifically used easeInOut Animation with a duration of 2 seconds and we have set it to repeatForever.

The output for the above code will be an animation in an infinite loop.

You can find the reference video for the animation, click on this link Video_1

Conclusion

So, I hope this blog will help you out in learning about the basic animations in SwiftUI and will also help you in starting with its implementation.For more details about the Animations in SwiftUI you can go to https://developer.apple.com/tutorials/swiftui/animating-views-and-transitions

Thank you