How to create animate in Swift with UIView animate?

View Animation

Tested on: Xcode 12.2, Swift 5.3

You are able to animate numerous of components using UIView.animate to create cools effects. With this knowledge you should be able to move and fade any components, changing animation ease and repeating an animation. With this knowledge only, you are not able to animate components with auto layout. But don't worry about it as ' the next reference will explain about constraints animation.

The topics that will be covering are preparation step the step that you need to do before doing animation and the 3 different UIView.animate methods.

  1. Preparation Step
  2. animate(withDuration:animations:)
  3. animate(withDuration:animations:completion:)
  4. animate(withDuration:delay:options:animations:completion:)
  5. Animation options parameters
  6. Animatable properties

Preparation Step

UIView.animate preparation phase. Place the component at it initial positon

Note: For viewWillAppear, We are assuming that you want to create an animation when a app is launched.

Before you start creating animation, you have to make sure that your component is at the initial position or state. For example, if I want move to a component from point A (out of the screen) to point B (original locations) as shown in the image above. I need to place the view at position A first. (Of course, if the current postion is the initial position, you do not need this step )

You can place the initial position (Point A) at viewWillAppear() because it postion the components before it appear. However, as mentioned this cannot be used if constraints are applied on the view.

The code example show below move the label out of the screen by subtracting the the width of the screen. In this way, we can ensure that the label is always out of the screen no matter the screen size.

Swift Code :

override func viewWillAppear(_ animated: Bool) {
  super viewWillAppear(animated)

  label.center.x -= view.frame.width

}

Once you done placing your component in the initial postion, you can use one of the following method to create you animation.

animate(withDuration:animations:)

UIView.animate(withDuration: animations:) takes in two parameters:

  1. withDuration - the duration of the animation in seconds. ( 0 means that the change are made with animation )
  2. animations - take in a closure. Inside the closure, it is the final positon of the animation. This parameter cannot be NULL.

Note: For viewDidAppear, We are assuming that you want to create an animation when a app is launched.

Continue from above (Preparation) UIView.animate should be place inside viewDidAppear(). This move the animation back to it final position.

Swift Code :

override func viewDidAppear(_ animated: Bool) {
  super viewDidAppear(animated)

  UIView.animate(withDuration: 1, animations: {
     label.center.x += view.frame.width
  }

}

animate(withDuration:animations:completion:)

UIView.animate(withDuration: animations: completion:) takes in addition parameter called completion. ( Look at animate(withDuration:animations:) to understand with duration and animtions)

  1. completion - take in a closure. The closure is begin called after the animation is end. For example, if you animation during is 1s, after 1s, this block of code will be called.

Swift Code :

override func viewDidAppear(_ animated: Bool) {
  super viewDidAppear(animated)

  UIView.animate(withDuration: 1, animations: {
     label.center.x += view.frame.width
  } completion: { _ in
     print("Animation Ended")
  }

}

animate(withDuration:delay:options:animations:completion:)

animate(withDuration: delay: options: animations: completion:) take in addition two more as compared to animate(withDuration: animations: completion:)

  1. delay - The amount of time in seconds to wait before performing the animation.
  2. options - take in a list of UIView.AnimationOptions. Which indicate how the animation show perform. Check out the below for the list of options available

Swift Code :

override func viewDidAppear(_ animated: Bool) {
  super viewDidAppear(animated)

  UIView.animate(withDuration: 1, delay: 1, options: [.repeat, .curveEaseInOut], animations: {
     label.center.x += view.frame.width
  } completion: { _ in
     print("Animation Ended")
  }

}

Animation options parameters

Animatable properties