An Introduction to Animations in SwiftUI

There are quite a few ways to animate content in SwiftUI. SwiftUI animations have a declarative syntax, meaning you describe what results you want to achieve, and SwiftUI does the heavy lifting. Animations in SwiftUI tend to be state-driven (i.e., they depend on state changes, making them reactive and easy to reason about).

SwiftUI provides pre-made modifiers such as animation, transition, and scaleEffect, which allow the effective application of animation effects to views. It is generally more straightforward than UIKit, as you don’t need to meddle with an imperative syntax or manage synchronization manually, nor do you need a deep understanding of layer properties.

SwiftUI offers a good balance of flexibility and control using implicit and explicit animations. In contrast, more complex custom animations can be achieved using animatable properties and modifiers, which will require additional effort.

On the other hand, to this...

Technical requirements

You will find the code related to this chapter here: https://github.com/PacktPublishing/An-iOS-Developer-s-Guide-to-SwiftUI, under the CH9 folder.

Gestures

Gestures are a way to recognize and respond to touch events. They are used to add interaction to SwiftUI views. Some examples of gestures that are used include zooming in on images by pinching, dismissing views by swiping down, and double tapping.

We can conceptually divide gestures into three categories: basic, advanced, and composite.

Basic gestures attach a single simple straightforward gesture to a view, such as tapping or swiping, and they are typically simple to implement because they can be implemented with a few lines of code. These actions mimic natural human actions and are intuitive for human users. Their behavior is what the user normally expects by having been exposed across multiple applications and as such they minimize the cognitive load required to interact with the app; users don’t need to think hard to remember complex gestures.

Complex gestures, both advanced and composite, instead involve multiple touch points (multiple fingers) and multiple...

Creating implicit animations

Implicit animations are animations where the behavior of the animation is implied and not described in detail. They are the most straightforward way to add animations to your app views. The simplest requirement to implement them is to apply the .animation modifier to a view, and SwiftUI will automatically apply any changes to the properties of that view.

Implicit animations will automatically occur when a value changes in a view, without you needing to specify the animation effect to apply. SwiftUI will apply interpolation while transitioning between animation states automatically. This allows you to add animation effects with minimal code. The default animation is often what the user is accustomed to seeing in an iOS app, and therefore it is often the right choice in terms of usability.

Note

When talking about animation, easing refers to the adjustment of the speed and movement of the animation to create a more natural, organic-looking movement...

Transitions

SwiftUI transitions allow you to animate the insertion and removal of views from the UI. To apply a transition to a view, we use the .transition(_:) modifier.

The basic transition types that SwiftUI provides include the following:

• opacity: This transition causes views to fade in or out when they’re inserted or removed
• scale: This transition causes views to grow or shrink in size when they’re inserted or removed
• slide: This transition causes a view to slide in or out from the edge of the screen when it is either added or removed
• move(edge:): This transition moves a view in or out from the specified edge of the screen
• offset(x:y:): This transition moves a view by the specified amount of typographical points when it is inserted or removed

By default, if you don’t specify a transition, iOS will apply a default transition when presenting (adding) or removing views from the screen. There are several default transitions available...

Summary

In this chapter about SwiftUI animation, we began by defining gesture recognizers, as these are often combined with animation. Then, we examined how to combine gesture recognizers with animation. We have covered simple implicit animation and more complex explicit animations. We completed the chapter by examining animated transitions, which are used to spruce up the presentation of views in the UI.

In the next chapter, we will begin discussing application architecture.