Build Beautiful Onboarding Screens With Lottie animations

Name: Build Beautiful Onboarding Screens With Lottie animations
Rating: 4.5 (59 reviews)

Develop stunning first impressions that capture your users' attention. Includes Combine framework & Lottie animations

Created byKelvin Fok

Last updated 10/2022

English

English [Auto],

What you'll learn

Build beautiful onboarding screens
Integrate Lottie (AirBNB) animations
Managing app states using Combine framework
Work with UIView animations & transitions
Cross fade between two images by adjust their alpha values via an algorithm
Implement protocols and delegates to communicate between child and parent objects
Use AVPlayer and AVPlayerLayer to create a video background
Code views programatically

Course content

7 sections • 39 lectures • 4h 57m total length

Introduction1:46
Hey guys, how’s it going and welcome to this course where you’ll learn to build beautiful onboarding screens!

In this course, we will be building together 3 different projects of different styles. As onboarding screens are your first impressions to your users, it’s important that this is done correctly because we want to impress them when they first download our app.

This course is designed for beginners and the ideal student is one who has worked with iOS for at least 6-9 months.

In this course, you will learn to build the projects step by step from scratch using the MVC architecture, with Swift 5 and the latest XCode 11.

Let talk about project 1 - the travel app. In this project, you will learn to make use of UIView animation and UIView transitions, as well as the touch gesture to create this effect that you see.

In project 2 - the fashion app, you will learn to code some views programatically, how to cross fade between 2 images, and how to use protocols and delegates to communicate between a child to its parent.

In project 3 - the holiday app, you will learn about AVFoundation by implementing the AVPlayer and the AVPlayerLayer to create a professional looking video backdrop. We will also be using Combine framework to handle the different app states such as AppWillResignActive and AppDidBecomeActive.

So guys, there are many useful concepts you will learn that will expand your ability to build complex features in your development journey. I look forward to seeing you in the lessons. Cheers!
Credits0:18
The stock images and video used in our XCode projects are downloaded from https://www.pexels.com/

Project intro0:11
Project files
If you want to follow along the tutorial and build the project from scratch, make sure to download image-assets.zip.
To download the finished project, please find onboarding-travel-app.zip
Setting up the UI9:21
Setting up models and touch gestures10:02
Create and manage onboarding models to display images and captions on onboarding screens, configure a dynamic pitch control, and handle touch gestures to navigate between items.
Handle labels animations10:22
Learn label animations for onboarding screens by moving the title and detail labels left and up, with alpha fading and spring-damped transitions. Advance the page index to reveal new captions.
Transit to main app at last index9:12
Check the last item before transitioning from onboarding to the main app, then instantiate the main view controller and update the window root with a cross-dissolve transition.
Add background images12:00
Add and animate background images for onboarding screens with a cross dissolve transition, and apply a dark view to improve contrast across travel themed images from assets.
General Refactor5:50

Project intro0:17
Introduce the project for building beautiful onboarding screens with Lottie animations, outlining the workflow and key concepts for this course.
Project file
If you want to follow along the tutorial and build the project from scratch, make sure to download image-assets.zip.
To download the finished project, please find onboarding-fashion-app.zip
Setting up the UI15:52
Setting up container views and onboarding items19:16
Learn how to set up container views and onboarding items by configuring collection view cells, adding labels, and binding title and detail text for dynamic onboarding screens.
Scrolling collection view programatically6:11
Handle background image and transition23:30
Learn to handle background images and transitions in onboarding screens using a scroll view; fade between five asset images to reflect current index.
Show explore button on last item10:25
Show an explore button on the last onboarding slide to transition to the main app, and hide the next button on that final item.
Transit to main app on Explore button tap11:47
Remove XCode warning and horizontal scroll indicator3:29
General Refactor6:15

Project intro0:10
Launch the project intro for building beautiful onboarding screens with Lottie animations within this course.
Project file
If you want to follow along the tutorial and build the project from scratch, make sure to download video-asset.zip.
To download the finished project, please find onboarding-holiday-app.zip
Setting up the UI7:13
Set up a new Swift single-view iOS project and build an onboarding UI with a full-screen view, vertical stack, label, and a get started button wired to outlets.
Handle Get Started button event7:07
Add background video19:21
Add a background video backdrop in a view controller using AVPlayer and AVPlayerLayer with resize aspect fill, loading a bundled video sourced from pixels.com.
Handle app states9:16
Manage onboarding states by subscribing to and removing app events, pausing the video when the app background, and resuming it on return, while cleaning up player to prevent memory leaks.
General refactor and closing3:17
Perform a general refactor by renaming the class to onboarding view controller and tidying the project. Compute a dynamic corner radius from the button height and test the onboarding screen.

Project Intro0:12
Explore how to design beautiful onboarding screens with Lottie animations, starting with the project intro.
Project File0:02
Setup UI8:48
Set up a full-screen, vertical paging collection view for onboarding, wire outlets, configure the layout and identifiers, and implement data source and delegate methods to display five colored cells.
Setup Collection View Cell7:35
Learn to assemble a collection view cell by adding vertical and horizontal stack views, a view and a label, and a get started button with precise constraints.
Add Onboarding Collection View Cell8:13
Create a custom onboarding collection view cell with outlets, actions, and a configure method, using a slide model (title, animation name, button color, title) to drive a two-slide onboarding flow.
Setup Lottie Animation11:55
Handle Action Button9:35
Use a closure to handle the onboarding button, scroll to the next slide in the collection view, detect the last slide, and transition to the main app via storyboard controller.
Add Page Control7:14
Add a top-right pitch control that updates as users scroll through onboarding slides and when the next button programmatically advances, using a dynamic page count and proper layout constraints.
Add Final Touches1:48
Add final touches to onboarding screens by rounding the get started button with corner radius and tightening the top space, then run the app to preview the refined layout.

Requirements

Basic competency with Swift
You have worked with iOS for at least 6 to 9 months

Description

Welcome to the Build Beautiful Onboarding Screens With Lottie animations course.

This course is designed for iOS developers (6-9 months of experience) who want to build beautiful onboarding screens that can immediately capture your users' attention when they open your app for the first time. This course aims to provide you with the thought process and the techniques required to build a professional looking onboarding view that is both dynamic and easy to customise.

In this course, we will build 4 unique projects of various styles.

In project 1 - the Travel App, we will learn to use UIView animation, UIView transitions and UITapGestureRecognizer to build out the animations.

In project 2 - the Fashion App, we will learn to code some views programatically, how to cross fade between two images, and how to communicate between child and parent objects via protocol and delegates.

In project 3 - the Holiday App, we will learn about AVFoundation via implementing the AVPlayer and the AVPlayerLayer. We will also use the Combine framework to manage the app states.

In project 4 - the Restaurant App (bonus), we will learn how to integrate Lottie animation into our screens.

More projects will be added to this course in 2022 and 2023.

Who this course is for:

New iOS developers who want to build their own apps
Students who have at least basic competency with Swift and at least 6 to 9 months experience working with iOS

Build Beautiful Onboarding Screens With Lottie animations

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 2min

Project 1 - Travel App8 lectures • 57min

Project 2 - Fashion App10 lectures • 1hr 37min

Project 3 - Holiday App7 lectures • 46min

Bonus1 lecture • 1min

Project 4 - Restaurant App (BONUS CONTENT)9 lectures • 55min

Bonus Content2 lectures • 39min

Requirements

Description

Who this course is for: