How to Create iOS Animations and Transitions in Swift UI

Animation is a critical part of iOS user interface. Using the right animation at the right place will improve user experience. In SwiftUI you can add animations to a view or to view’s state. In this post you will see,

• How to add animation to individual view
• How to add animation effects for state change
• How to add effects through view transition

How to add animations to individual views?

With the help of the animate(_:) modifier you can add animation to a view. A view’s color, opacity, rotation, size and other properties are animatable.

Lets create a button and try animating them on rotation and size change.

1
Button(action: {
2
  self.showGraph.toggle()
3
}) {
4
  Image(systemName: "chevron.right.circle")
5
    .imageScale(.large)
6
    .rotationEffect(.degrees(showGraph ? 90 : 0))
7
    .padding()
8
}

Let’s turn animation for buttons rotation by adding, animation(.easeInOut)

1
Image(systemName: "chevron.right.circle")
2
    .imageScale(.large)
3
    .rotationEffect(.degrees(showGraph ? 90 : 0))
4
    .padding()
5
    .animation(.easeInOut)

Add another animatable change by making the button larger when the buttons state value changes.

1
Image(systemName: "chevron.right.circle")
2
    .imageScale(.large)
3
    .rotationEffect(.degrees(showGraph ? 90 : 0))
4
    .scaleEffect(showDetail ? 1.5 : 1)
5
    .padding()
6
    .animation(.easeInOut)

You can turn off animation for specific property by adding the .animation(nil) just below the animatable property.

1
Image(systemName: "chevron.right.circle")
2
    .imageScale(.large)
3
    .rotationEffect(.degrees(showGraph ? 90 : 0))
4
    .animation(nil)
5
    .scaleEffect(showDetail ? 1.5 : 1)
6
    .padding()
7
    .animation(.easeInOut)

Add animations to state changes

Let’s apply animations when we toggle the “showGraph” state. Here, toggling showGraph state will display a view accordingly. Lets wrap showGraph.toggle() with a call to the withAnimation function.

1
Button(action: {
2
  withAnimation {
3
    self.showGraph.toggle()
4
  }
5
}) {
6
  Image(systemName: "chevron.right.circle")
7
    .imageScale(.large)
8
    .rotationEffect(.degrees(showGraph ? 90 : 0))
9
    .scaleEffect(showGraph ? 1.5 : 1)
10
    .padding()
11
}

1
if showGraph {
2
  HikeDetail(hike: hike)
3
}

Let’s add two seconds long basic animation in the withAnimation function.

1
withAnimation(.easeInOut(duration: 4)) {
2
  self.showGraph.toggle()
3
}

Adding transitions

Lets add on-and-off fading transition by adding transition(_:) modifier to the view,

1
HikeDetail(hike: hike)
2
  .transition(.slide)

Now the view will appear and disappear by sliding in and out.

Next up let’s create a transition static property for “AnyTransition”. This keeps our code clean when we expand with transition. We can use the dot notation to use our custom transition.

1
extension AnyTransition {
2
  static var moveAndFade: AnyTransition {
3
      AnyTransition.slide
4
  }
5
}

Let’s add our custom transition moveAndFade with the help of dot notation.

1
HikeDetail(hike: hike)
2
  .transition(.moveAndFade)

And now we are going to use move transition so that the view moves in and out from the same edge.

1
extension AnyTransition {
2
  static var moveAndFade: AnyTransition {
3
      AnyTransition.move(edge: .trailing)
4
  }
5
}

Now that you know how basic animation works,You can tackle some complex animations from here. Hope you enjoyed reading this post. Will meet you with another one soon!