Animate With SwiftUI: iOS, watchOS and visionOS from Udemy

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

What's inside

Learning objectives

The basics of animation timing in swiftui
How to make ios app animations look better
Understanding basic animation
Designing spring animations
How anchor points affect animation
Understanding animation and motion in swiftui
How to create meditation and relaxation animations
Swiftui animation techniques
How to build animations for ios applications

Animating in 3d
Motion on a circular path
How to build animations in swiftui to tell stories
Principles of animation in ios
How to create ovet and subtle ios animations
How to make ios animations feel analog, familiar and more comprehensive
Show more
Show less

The basics of animation timing in swiftui
How to make ios app animations look better
Understanding basic animation
Designing spring animations
How anchor points affect animation
Understanding animation and motion in swiftui
How to create meditation and relaxation animations
Swiftui animation techniques
How to build animations for ios applications
Animating in 3d
Motion on a circular path
How to build animations in swiftui to tell stories
Principles of animation in ios
How to create ovet and subtle ios animations
How to make ios animations feel analog, familiar and more comprehensive
Show more
Show less

Syllabus

SwiftUI Animation Concepts & Techniques

Use withAnimation to get a default animation instance in SwiftUI. Get the source code ?‍? https://gist.github.com/amosgyamfi/e48227688a0d46dc7bbd3d780fe62e18#file-defaultanimationwithanimation-swift

This video shows you how to get a default animation instance when using the animation modifier in SwiftUI.

Get the source code ?: https://gist.github.com/amosgyamfi/8828f99b3d2ad1fb854efb8e64840c55

Using the new Phase Animator in SwiftUI, you can build complex and multi-step animations. Rather than animating between 2 states, you can define multiple steps that happen in sequence. In this video, you will learn the basics of how it works.

Discover the various standard easing types in SwiftUI and how to use the correctly.

Source code: https://gist.github.com/amosgyamfi#:~:text=amosgyamfi%20/-,LoadFromRemoteURL.swift,-Last%20active%2017

In this tutorial, we will use the Model3D view in SwiftUI to load 3D content and animate its rotation for visionOS.

NOTE: In the introduction, I mistakenly mentioned iOS. That should be visionOS.

Let's create the Siri animation in visionOS using SwiftUI's 2D, 3D, and hue rotation animations.

In this video, you will learn how to transition a hamburger icon into a back icon by animating scale, rotation, spacing, width, and offset.

Learn how to combine rotation, scale transform, and opacity to transition a hamburger icon into a close icon.

Discover how to build a clone of the Twitter Like animation with SwiftUI. Note: There is another section where you can find this animation. That explains animating specific properties.

When animating in SwiftUI, you can put .delay() before or after (repeatCount or repeatForever). Each approach gives you different results. Let's look at that in this video.

Using SwiftUI, you can delay animations using the dispatch queue, the delay modifier, or the standard easing equations. Learn how to do that in this video.

In SwiftUI, we can use the alignment parameter to arrange views to the right, left, top and bottom depending on the stack container. This alignment parameter is also animatable. In this video, we look at how to use alignment to create movement.

In this video, we will learn how to make a smooth dashed border rotation animation like 'marching ants' in SwiftUI. This will be done using the dash phase parameter of a shape view.

In this video, we will build the sun and moon animation. You will learn how to

move objects on a circular path
change anchor point position
animate scale parameters such as X and Y.
mask a view using clip shape

In this video, you will build an animation similar to the retweet animation in the Twitter iOS app to demonstrate how to reset an animation to its original state using Dispatch Queue.

Using a gradient start-point or end-point in SwiftUI, we can easily replicate the iOS shimmer animation/effect (Slide to power off). This video shows you how to do that.

In this video, we learn to animate the starting point of the stroke of a path in SwiftUI.

In this video, we will learn to animate the start-point or the end-point of a SwiftUI gradient using a ternary conditional operation.

How to create path drawing animations using the locations at which a path starts and ends.

Rotation Mode determines whether objects animating along the path rotate to match the path tangent. The possible values for this property are described in “Rotation Mode Values”. The default value of this property is nil, which indicates that objects should not rotate to follow the path. In this video, we will look at Rotation Mode using Kite and SwiftUI.

In Core Animation, you can move an object from its state of rest directly to a destination using animation. Additionally, you can use animation to move an object at rest to another position before it finally comes to rest at a defined destination. Multiple animations on an object can be grouped and run concurrently. Enter Basic, Keyframe, and Group Animations in Core Animation using SwiftUI. In this section, we will dive into the above animations in detail using different examples.

In this video, we will learn how to create basic animation using a timeline animation tool called Kite, and SwiftUI.

In this video, we will learn how to animate the device background in SwiftUI to transition from one color to another using Keyframe animation.

In Core Animation and SwiftUI, you can use the duration of an animation group to clip the individual animation durations in the group. Let' break it down. For example, we have an individual fadeout animation in a group that lasts for 6 seconds. Setting the duration of the animation group to, for example, 2 seconds will clip the fadeout animation so the remaining 4 seconds of the fadeout animation will not be displayed. Lets' see how Group Animation works in Core Animation, SwiftUI, and Kite.

In this video, you will discover how to clone the Siri animation using 2D and 3D rotation.

This video demonstrates how to bring illustrations into Xcode and animate with SwiftUI. You will create Duolingo's Get Started onboarding flow animation.

Career center

Learners who complete Animate With SwiftUI: iOS, watchOS and visionOS will develop knowledge and skills that may be useful to these careers:

iOS Developer

An iOS Developer crafts applications for Apple's popular mobile platform, designing, building, and maintaining software that runs on iPhones and iPads. A significant aspect of modern app development is creating engaging and fluid user interfaces, which heavily relies on animations. This course, "Animate With SwiftUI: iOS, watchOS and visionOS," directly teaches how to implement captivating animations using SwiftUI, the declarative framework for Apple platforms. By understanding concepts like basic animation, spring animation, and animation timing, learners can build delightful user experiences, making their applications stand out. The course's focus on making iOS app animations look better ensures developers create polished and professional products.

See salaries and explore the career path for iOS Developer

VisionOS Developer

A VisionOS Developer specializes in creating applications and experiences for Apple's spatial computing platform, the Apple Vision Pro. This emerging field heavily relies on sophisticated 3D interactions and immersive animations to build compelling virtual and augmented reality environments. The "Animate With SwiftUI: iOS, watchOS and visionOS" course is directly applicable to this highly specialized role, with dedicated content on animating in 3D, using Model3D views, and adding particle effects with Reality Composer Pro for visionOS projects. Learners will gain practical skills to build dynamic and interactive spatial interfaces, mastering techniques like 3D rotation and creating engaging visual effects that are critical for innovative visionOS applications.

See salaries and explore the career path for VisionOS Developer

Motion Designer

A Motion Designer creates animated graphics, effects, and interfaces to enhance digital products and storytelling. This career path is perfectly aligned with the "Animate With SwiftUI: iOS, watchOS and visionOS" course, which is fundamentally about mastering animation. Learners gain expertise in a wide range of techniques, including basic and advanced spring animations, precise animation timing, various easing curves, and 3D animation. The course also teaches how to build accessible animations and incorporate motion principles that make apps feel intuitive and engaging. For an aspiring Motion Designer focusing on app interfaces, this course provides the practical, hands-on SwiftUI skills needed to bring dynamic visual concepts to life across Apple's ecosystem.

See salaries and explore the career path for Motion Designer

User Interface Engineer

A User Interface Engineer specializes in the development and implementation of the graphical and interactive elements of software applications, bridging the gap between design and code. This role demands meticulous attention to detail and a strong command of front-end technologies to create visually stunning and highly responsive user experiences. The "Animate With SwiftUI: iOS, watchOS and visionOS" course is an excellent fit, as it directly teaches how to build sophisticated animations using SwiftUI, the declarative framework for Apple platforms. Mastering techniques like spring animations, 3D transformations, and accessible motion control will enable a User Interface Engineer to precision-craft delightful and high-performance app interfaces, ensuring a polished final product.

See salaries and explore the career path for User Interface Engineer

Interaction Designer

Interaction designers focus on creating intuitive flows and engaging experiences for users interacting with digital products. The role often involves defining how elements react to user input, crucial for which animations play a transformative role, providing feedback, guiding attention, and enhancing usability. The "Animate With SwiftUI: iOS, watchOS and visionOS" course is exceptionally relevant as it covers the foundational principles of animating anything imagined using SwiftUI, with an emphasis on making app animations "look better, delightful, and valuable." Learners explore practical implementations of spring animations, precise timing, and various easing techniques, all fundamental to crafting thoughtful and responsive interactions that elevate the user experience.

See salaries and explore the career path for Interaction Designer

Prototyper

A Prototyper creates preliminary versions of products or features to test concepts and gather feedback before full development. These prototypes often need to be highly interactive and visually representative of the final product to accurately convey the user experience. The "Animate With SwiftUI: iOS, watchOS and visionOS" course is specifically beneficial for a Prototyper as it teaches how to build animations and interactive prototypes using SwiftUI, a powerful tool for rapidly developing dynamic interfaces. By mastering techniques like spring animations, custom timing curves, and the creation of detailed UI clones, learners can produce realistic and engaging prototypes that effectively demonstrate complex interactions and ensure design validation.

See salaries and explore the career path for Prototyper

Mobile Application Developer

A Mobile Application Developer builds software for smartphones, tablets, and other portable devices. This broad role often specializes in platforms like iOS, watchOS, and visionOS, which are central to this course. The course "Animate With SwiftUI: iOS, watchOS and visionOS" is tailor-made for this career path, equipping learners with essential skills to create highly interactive and visually appealing applications. It covers a wide array of animation techniques, from basic to 3D, and addresses accessibility concerns, ensuring that applications are not only delightful but also inclusive. The ability to craft polished app animations is a key differentiator for successful mobile applications in today's competitive market.

See salaries and explore the career path for Mobile Application Developer

Augmented Reality Developer

An Augmented Reality Developer builds interactive experiences that superimpose digital content onto the real world. This field demands a strong understanding of 3D graphics, spatial interactions, and responsive animations to seamlessly integrate virtual elements. The "Animate With SwiftUI: iOS, watchOS and visionOS" course offers crucial skills for this role, particularly its focus on visionOS development. Learners explore animating in 3D, working with Model3D views, and incorporating particle effects using Reality Composer Pro. These capabilities are fundamental for creating immersive and believable AR applications on Apple platforms. This course helps an Augmented Reality Developer craft fluid, engaging, and context-aware animated content that enhances real-world perceptions.

See salaries and explore the career path for Augmented Reality Developer

User Interface Designer

A User Interface Designer focuses on the visual and interactive elements of a digital product, ensuring it is aesthetically pleasing and intuitive. In this role, understanding how motion and animation contribute to a compelling user experience is vital. "Animate With SwiftUI: iOS, watchOS and visionOS" provides a practical understanding of how animations are constructed within the SwiftUI framework, which is increasingly used for Apple app interfaces. While typically not coding the final product, a User Interface Designer who takes this course will gain a deeper insight into the feasibility and impact of various animation possibilities, enhancing their ability to design delightful and valuable app interactions. This knowledge fosters more effective collaboration with developers.

See salaries and explore the career path for User Interface Designer

User Experience Designer

A User Experience Designer focuses on enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction with a product. Animations are a powerful tool in UX design, guiding users, providing clear feedback, and creating a sense of delight and polish. This course, "Animate With SwiftUI: iOS, watchOS and visionOS," delves into making app animations "look better, delightful, and valuable," which is a core tenet of good UX. While typically a User Experience Designer conceptualizes, they may find this course helpful by offering a comprehensive understanding of animation principles and their practical implementation within SwiftUI. This knowledge empowers them to design more feasible and impactful animated experiences.

See salaries and explore the career path for User Experience Designer

Swift Developer

A Swift Developer specializes in programming using Apple's powerful and intuitive Swift language, often creating applications for iOS, macOS, watchOS, and now visionOS. While Swift Developers work on various aspects of an application, the ability to build sophisticated and performance-optimized user interfaces, particularly with engaging animations, is a highly valued skill. The "Animate With SwiftUI: iOS, watchOS and visionOS" course provides comprehensive training in using SwiftUI, a modern Swift-based framework, to implement a myriad of animation types. By mastering concepts from basic animation to 3D effects and accessible motion, a Swift Developer can craft visually rich and interactive applications that stand out in the competitive app market.

See salaries and explore the career path for Swift Developer

Product Designer

A Product Designer is responsible for the overall strategy, design, and user experience of a product, guiding it from concept to market. While their role is broad, understanding the technical possibilities and impact of design elements like animation is crucial for creating successful and feasible products. This course, "Animate With SwiftUI: iOS, watchOS and visionOS," helps a Product Designer gain a deeper appreciation for how high-quality animations can make products "delightful and valuable." Knowledge of SwiftUI animation techniques, 3D effects, and accessibility can inform design decisions, improve communication with development teams, and empower the designer to envision and articulate richer, more engaging user experiences.

See salaries and explore the career path for Product Designer

Creative Technologist

A Creative Technologist explores the intersection of technology and creativity, often building innovative interactive experiences, prototypes, and digital art installations. This role demands a blend of artistic vision and technical proficiency to bring novel ideas to life. The "Animate With SwiftUI: iOS, watchOS and visionOS" course is highly relevant, as it empowers learners to craft dynamic and engaging animations across Apple's ecosystem. By mastering SwiftUI animation techniques, including 3D effects, custom timing, and storytelling through motion, a Creative Technologist can prototype and develop unique interactive applications. The course's exploration of advanced concepts helps in building innovative and immersive digital experiences that push creative boundaries.

See salaries and explore the career path for Creative Technologist

Technical Artist

A Technical Artist bridges the gap between art and programming, often in fields like game development or real-time 3D visualization. This role involves implementing visual effects, optimizing assets, and creating tools for artists, requiring both creative flair and strong technical skills. The "Animate With SwiftUI: iOS, watchOS and visionOS" course may be helpful for a Technical Artist, especially with its segments on animating in 3D, working with Model3D views, and utilizing particle effects with Reality Composer Pro for visionOS. While focused on app UI, the foundational principles of motion, timing, and spatial animation are highly transferable, enabling a Technical Artist to bring more dynamic and visually compelling effects to interactive digital environments.

See salaries and explore the career path for Technical Artist

Frontend Developer

A Frontend Developer focuses on the client-side of applications, building the parts of a website or app that users see and interact with. While many frontend roles are web-based, the principles of creating dynamic, responsive, and visually engaging user interfaces are universal. This course, "Animate With SwiftUI: iOS, watchOS and visionOS," may be useful for a Frontend Developer by providing a deep dive into animation techniques using SwiftUI, a powerful framework for Apple platforms. Understanding concepts like animation timing, easing, and creating delightful UI movements helps build a strong foundation in modern interface development, even if the specific framework differs from other frontend environments. The focus on making apps "look better" is universally valuable.

See salaries and explore the career path for Frontend Developer