Animate With SwiftUI: iOS, watchOS and visionOS

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

Welcome to Animate With SwiftUI: iOS, watchOS, and visionOS. This course gives you the good foundations and the basic principles of animating anything you could imagine using SwiftUI. We will first go through how things change over time so that you know for example, how things move. We will then look at creating Basic Animation as well as Spring Animation. 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, watchOS, and visionOS.

NOTE: As of 11/09/2022, I will keep on deleting the 2020 and 2021 animation videos from this course. The reason is that I am updating this weekly with new animations to replace the old content.

Learning Objectives

• Understanding animation and motion in SwiftUI

• Working with Anchor Points (Center of mass)

• Understanding Basic Animation

• Creating Spring Animations on iOS

• When and How to Use Easings

• How to make iOS App Animations look better

• The basics of Animation Timing

• Animating in 3D

• Building Clones of Dynamic Island Animations

• Accessible animations and Reduce Motion on iOS

Main Sections (updated weekly)

Creating Basic Animation

• Create your first SwiftUI animation

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

• How to animate scale transform (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 corner radius

• Animating Touch ID using mask offset

Animating Visual Effects

• How to animate color

• How to animate gradients

Mastering Animation Timing and Pacing

• What is animation timing?

• What is animation pacing?

• How to change an animation 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

Using Custom Timing Curves

• Sinusoidal

• Circular

• Exponential

• Special Effects

Learning Spring Animations

• Understanding Spring Animation Parameters

• What is stiffness?

• What is Damping and Damping Fraction?

• What is Mass?

• What is Response

• What is Initial Velocity?

Cloning Dynamic Island Animations with SwiftUI: First Class Citizen Apple Apps

• Airdrop

• Silent/ringing

• Call Coming In

• Message Coming In

• Approving FaceID

• Privacy

• Music: Now Playing

• FaceTime Bubbling

• Throw Timer into the Island

• Airpods Pro Charging

• Airpods Max Charging

• Battery Charging

• Apple Maps Directions

Cloning Dynamic Island Animations with SwiftUI: Third-party Apps

• Uber Arriving

• Lyft Arriving

• Flighty: Airplane Landing

• StepsApp: Steps Counting

Drawing and Animating Path in SwiftUI

• How to bring a compound path from Sketch

• How to make an animated matching ants

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 steps 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 voiceovers 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