Animate With SwiftUI: iOS, watchOS and visionOS

Hi, my name is Amos Gyamfi. I have been using SwiftUI to create animations since its first release in 2019. I am so excited to teach you how to get started and build your next iOS, iPadOS, macOS, visionOS, and watchOS app animations using SwiftUI.

Welcome to Animate With SwiftUI: iOS, macOS, watchOS, and visionOS. This course gives you a solid foundation and the basic principles for animating anything you can imagine with SwiftUI. We will first go through how things change over time, so that you know, for example, how objects move. We will then look at creating basic animation and Spring Animation, using Phase Animator, Keyframe Animator, and more. You will learn how to make your app animations look better, delightful, and valuable using nothing but SwiftUI. So, let’s get started with Animate With SwiftUI: iOS, macOS, watchOS, and visionOS.

Learning Objectives

• Understanding animation and motion in SwiftUI

• Working with anchor points (center of mass)

• Understanding basic animation

• Creating phase-based, keyframe, and spring animations in SwiftUI

• When and how to use easings

• How to make iOS app animations look better

• The basics of animation timing

• Animating in 3D

• Accessible animations and Reduce Motion on iOS

Creating Basic Animation

• Create your first SwiftUI animation

• How to create rotational animation: Yahoo Weather, Sun, and Wind

• How to animate scale transforms (x, y, and xy)

• How to animate movement using offset (x and y)

• How to animate movement using alignment

• Create your first Apple Watch animation

• How to animate Hue Rotation

Implicit and Explicit Animation

• What is an implicit animation?

• What is an explicit animation?

Understanding and Animating Masks

• How to animate the corner radius of a view

• Animating Touch ID using mask offset

Animating SF Symbols and Visual Effects

• How to animate color

• How to animate gradients

• Using SF Symbol animation types

• Understanding Variable Color animations

Mastering Animation Timing and Pacing

• What is animation timing?

• What is animation pacing?

• How to change an animation's begin time using delay

• What is a repeat count?

• How to repeat an animation forever

• How to adjust an animation speed

Easing: Understanding How Things Move

• Default

• Linear

• EaseIn

• EaseOut

• EaseInOut

• Animating with Match Geometry Effect

Using Custom Timing Curves

• Sinusoidal

• Circular

• Exponential

• Special Effects

Using Phase Animator

• Create your first animation with Phase Animator

• Customizing your phase animation

• Create human-inited animations with Phase Animator

Learning Spring Animations

• Understanding Spring Animation parameters

• What is stiffness?

• What is damping and damping fraction?

• What is mass?

• What is a spring response?

• What is initial velocity?

• Understanding duration and extra bounce

• Modeling and using custom springs

Drawing and Animating Path in SwiftUI

• How to bring a compound path from Sketch

• How to make an animated matching ants

• Using animation trimming to draw and erase paths

• Understanding and animating with dash phase

How to Add Animations to Standard Controls

• How to animate a toggle switch

Animating in 3D

• How to replicate the FaceID confirmation animation

• 3D parallax animation on Apple TV

Building Clones of iOS App Animations

• Measuring heart rate on Apple Watch

• Breathe animation on Apple Watch

• Tide app's breathe animation

• StepApp's step-counting animation

Using Transitions

• Creating page-to-page transitions

• Creating view-to-view transitions

How to make SwiftUI Animations Accessible and Inclusive

• How to combine animating children into one element

• How to tell voice-overs that an animating element is a button

• How to label animating elements

How to Implement Reduce Motion For SwiftUI Animation

• How to disable animations when Reduce Motion is on

• How to present subtle/less excessive animations when Reduce Motion is on