How to Learn Basic SwiftUI Animation in Five Minutes.
Imagine downloading an app on your phone and realizing at the touch of every button you had to run to Google or YouTube to watch a video about what was happening on the app. How frustrating? This is why I love to see a little motion or details on my app. For me, a moving design on your app is like a virtual assistant between you and the users of your product. Here are some examples of in-app animation designs. I am absolutely excited to see colors and shapes in motion, which is why I decided to explore animations in SwiftUI. In this article, I am going to teach you how to code your first animation in SwiftUI. If you are not familiar with SwiftUI click on this link to learn more.
Getting Started…
Before you consider introducing animation in your app, think about your users. Who are they? Will animation be optional in your app? In a world where every developer is striving to make the world’s best app, using animation effectively can enhance your user experience. However, too much of anything can be bad, and this rule applies to using animations in your app too. I recommend you check Apple’s Human Interface Guideline on animation to ensure an effective use of animation in your design.
Hands-on Tutorial
Grab your computer and let’s code our first animation in Xcode. In this tutorial I am going to show you how to code a circle to move from one point to another.
- Open a new project in Xcode. Not familiar with Xcode? Click on this the link to learn how it works.
- We are going to embed a circle in a ZStack, add some modifiers and make it animate by selecting .animation(.default).
- First, create a ZStack to place a circle and text on top of each other.
- Add
Color.pinkto your background, select your preferred color. - Add
.edgesIgnoringSafeArea(.all)to fill the entire view with your background color. - Add a
Circle() - Add a modifier
.frame(width:100,height:100) - Select
.foregroundColor(color)to add a background color to your circle. - Next, add a button. The action will be onButtonTap and the label will be a Text view
Text("Click Me").You will see an error because we have the not defined onButtonTap yet. - Add a variable
@State var color = Color.blueto get the circle to change color. - Add some modifiers (.padding, .foregroundColor, .background color and cornerRadius) to modify the button view.
- Add a variable
@State var onTop = falsethat will store whether the circle is on top or not. Add.offset(y:self.onTop?-350:0) - To get our circle to animate add a modifier
.animation(.default) - Write a function onButtonTap to switch the color of the circle between blue and white. If the circle is at the top, the color changes to blue, if the circle moves down, the color changes to white.
func onButtonTap() {
self.onTop.toggle()
if onTop {
color = Color.blue
} else {
color = Color.white
}Congratulations! You just learned to code your first animation in SwiftUI. Remember to intentionally use animation in your design.
Below is what the complete code look like.
struct ContentView: View {
@State var color = Color.blue
@State var onTop = false
var body: some View {
ZStack {
Color.pink
.edgesIgnoringSafeArea(.all)
Circle()
.frame(width:100, height: 100)
.foregroundColor(color)
.offset(y: self.onTop ? -350 : 0)
.animation(.default)
Button (action: onButtonTap) {
Text("Click Me")
.font(.title2)
.padding()
.foregroundColor(color)
.background(Color.black)
.cornerRadius(10)
}
.offset(y:300)
}
}
func onButtonTap() {
self.onTop.toggle()
if onTop {
color = Color.blue
} else {
color = Color.white
}
}
}struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
