Create a tutorial walkthrough of your iOS app
When a user opens up your app for the first time you want to give them a walkthrough on how to use the app by showing them exactly where to tap and to select which option. This is a tutorial that will help you achieve that.

Create a new iOS project named WalkThrough. Close Xcode and Open terminal and write the following commands:
$ cd <path to project folder>
$ pod initNo open the Podfile that you have just created and add the following pod in it:
pod 'lottie-ios'
Open terminal and write:
$ pod installNow open WalkThrough.xcworkspace
The App and UI Elements:
The app is simple. It randomly picks babies names and user can also suggest new names. It consist of three screens i.e. ScreenOneViewController.swift, ScreenTwoViewController.swift and ScreenThreeViewController.swift
What we will demonstrate is when the app is opened for the first time it shows a popup asking user if they want a walk through of the app. If they select yes the process will start and walk them through all the three screens and show a popup when it’s finished. We’ll be only adding walkthrough on first screen for the sake of this tutorial and you’ll get a full idea of how it’s done and you can then create it for your own app.
LottieFiles:
LottieFiles contains some great animations that you can use to make your UX great.
You can browse animations and download .json file fo the animation because this is all you need. I’ve downloaded two animations one is called tap.json and other is called point.json as it is clear from the name that one will be used to point at something and other will be used to tell user to tap.

Implementing WalkThrough scenario
I’ll use UserDefaults to identify if user has gone over the walkthrough or not. So in my ViewController.swift I’ve a SegmentedController called boyGirlSegment and a UIButton called spinButton and I want to add animation that it first tell user to tap girl segment, then boy segment and finally press the button. So I’ve made these three AnimationView which comes under LottieFiles:
let girlSegmentTap = AnimationView(name: "tap")let boySegmentTap = AnimationView(name: "tap")let spinButtonTap = AnimationView(name: "point")
and then in a function I’ve called:
func startWalkThrough(){girlSegmentTap.frame = CGRect(x: 0, y: 0, width: 65, height: 60) //1girlSegmentTap.center = CGPoint(x: self.view.center.x+80, y: boyGirlSegment.center.y) //2girlSegmentTap.loopMode = .loop //3girlSegmentTap.animationSpeed = 0.5 //4girlSegmentTap.contentMode = .scaleAspectFill //5self.view.addSubview(girlSegmentTap) //6self.view.bringSubviewToFront(girlSegmentTap) //7let girlSegmentTapGesture = UITapGestureRecognizer(target: self, action: #selector(girlSegmentTapDone(sender:))) //8girlSegmentTap.addGestureRecognizer(girlSegmentTapGesture) //9girlSegmentTap.play(fromFrame: 0, toFrame: 8, loopMode: .loop, completion: nil) //10}
- Giving animation view a frame of 65w and 60h.
- Setting center of animation view. Since it’s on the right side so I’ve added 80 in
x .loopindicated that you want the animation to keep on goinganimationSpeeddetermines how fast the animation will played- As animation consist of images so
.scaleAspectFillworks great to fit the image in the frame we defined in the first step. - Adding
AnimationViewto theSuperView - Bringing animation view to front
- Initializing tap gesture recognizer so that we can know when user has tapped the element we want them to tap.
- Adding that gesture to the animation view
- Finally, playing the animation. We have given it frame 0 to 8 you can see when you are downloading an animation. As sometimes you just need it to play upto a certain level again and again.
That’s it! The next steps are similar in terms of following these 10 steps. SO here is the rest of the code, I’ve three steps in total and the first step was the girlSegmentTap :
@objc func girlSegmentTapDone(sender:UITapGestureRecognizer)boyGirlSegment.selectedSegmentIndex = 1namePicker.reloadAllComponents()girlSegmentTap.isHidden = true//Add another AnimationView here or just finish the walk through}
RUN IT!

SOURCE CODE
I’ve put this small example on Github: Download Full Source Code
