iOS Dev Course: UIView Animations

How to animate view changes? How to create repeat animations? How to add autoreverse effect?

Let’s make a simple project with some UIView’s and animate these in quick guide!

Animations

Changes to several view properties can be animated — that is, changing the property creates an animation starting at the current value and ending at the new value that you specify. The following properties of the UIView class are animatable:

• frame
• bounds
• center
• transform
• alpha
• backgroundColor

To animate your changes, create a UIViewPropertyAnimator object and use its handler block to change the values of your view's properties. The UIViewPropertyAnimator class lets you specify the duration and timing of your animations, but it performs the actual animations. You can pause a property-based animator that is currently running to interrupt the animation and drive it interactively. For more information, see UIViewPropertyAnimator.

Read more on Apple Developer

Preparation

Create a new Single View App project.

Hotkey: shift + command + N

Single View App

Open Main.storyboard

Project Navigator, Main.storyboard file focus

How to add Elements to storyboard?

Just press: shift + command + L

Storyboard with elements

Add UITextField, UILabel, UIButton @IBOultets and @IBAction from UIButton.

Your ViewController.swift code should be:

Great! You are ready to animate your views.

First, Animate UITextField with autoreverse animation option

Let’s make animation using UIView function

class func animate(withDuration: TimeInterval, delay: TimeInterval, options: UIView.AnimationOptions = [], animations: () -> Void, completion: ((Bool) -> Void)? = nil)

Change buttonDidTap function body:

Autoreverse UIView animation

Run project on simulator. Tap on button and see the result.

Yeah! UITextField with empty text attracts our attention! It’s like a living!

Autoreverse animation

Second, Animate UILabel with repeat animation option

Change buttonDidTap function body:

Repeat UIView animation

Run project on simulator. Tap on button and see the result.

Not bad. UILabel repeat animation changes in loop.

Repeat animation

Nice. Now we can start animations using simple UIView functionality.
BUT!
How to stop it!?

Just call removeAllAnimations() func in view.layer

Add that code in else condition, before UIView.animate:

Remove existed animations

Run project on simulator. Enter text into UITextField. Tap on button (Repeat animation is starting). Tap again (animation in removing).

You’ve done it! Clap! Clap!

Remember, the receipt to success is continuous learning and communication with colleagues including, self-education.

This was a small guide about UIView animations. Read more on Apple Developer site. Don’t stop self-education.

GitHub project

Subscribe to my account to get notifications about new stories.

If you still have questions — write about it in the comments. I’ll answer them in future articles.