All right. 1
So the next thing that we want to do is we want to create this animation. 2
Notice how we've got all of the characters in our title label appear one by one and it looks almost 3
like we've got this typing animation, right? 4
So how can we create this? 5
Well, we'll need the help of something called a loop. In our WelcomeViewController, which is this screen 6
right here, 7
the first one that the user sees. At the moment, 8
we've got a titleLabel that's linked up to an IBOutlet. And the titleLabel just says these words statically. 9
So it's a emoji of a lightning symbol which gets treated pretty much the same as just any other letter. 10
And then it's got the word "FlashChat." 11
So how can we turn that titleLabel text into something that looks like the animation that you saw earlier 12
on? 13
Well, we can create a loop right here in the viewDidLoad. 14
Let's say that I had an array of items, right? Let's say, I had a fruit basket and inside this fruit basket, 15
I've got an array of fruits. 16
So I've got apple, pear, orange. 17
So I've got three fruits in this array of fruits and I can use a Swift for loop which basically just 18
looks like this: for fruit in fruit baskets. 19
Print fruit. 20
So in this case, what's happening is I'm looping through this array of fruits right here. 21
And for every single item inside this array, 22
so this one and then this one, and this one, each of them are going to get printed into the console. 23
So if we run our app right now, you can see that in sequence of how they were added in the array, they're getting 24
printed. 25
So what these three lines of code does is it looks inside this array, and for every single item, it's going 26
to trigger this code. 27
Now, we don't have to limit ourselves to arrays. 28
We can also do the same with text. 29
So let's say that we had something called titleText and I'm going to set it to equal the same string 30
as you have inside the titleLabel. 31
So we've got this piece of text which is a string that says this. And I want to print out every single 32
character in this string. 33
Well, I can do the same thing as I did before. 34
So I can say, for letter in titleText, go ahead and print each of these letters. 35
So now if I hit run, what you'll see is that it now separates out each of these characters in my string 36
and it prints them out one by one. 37
So the important thing to remember is that the code in here in between the curly braces of the for loop 38
gets run for as many times as there are letters in the titleText. 39
So if we had other code in here, they're also going to be run each time we get to a different letter. 40
Now, you can see we're getting kind of closer to our end goal, right? 41
Because we're able to separate out each of these characters, and all we need to do is to simply start 42
out by emptying out our titleLabel to raise a titleLabel.text equals an empty string, and then 43
we're going to add in each letter in the for loop. 44
So it will say titleLabel.text.append and we can append a character, 45
so that's going to be our letter. 46
Now, if you run the code as it is right now, you'll see that it's actually not quite what you might expect 47
to happen. 48
The entire string appears almost as if it happened at exactly the same moment. 49
So why is that? 50
Well, it's because our computer is actually working really, really fast, and it doesn't take it any time 51
at all to loop through the letters inside the titleText. 52
So it doesn't 53
in less than a fraction of a second, 54
so we can actually see that animation of typing. 55
So what do we have to do? 56
Well, we could create a timer, so that we add each letter after an incremental amount of time. 57
So maybe the first letter gets added immediately. And then after a tenth of a second or naught 58
.1 seconds, we get it to show "F," and then after naught .2 seconds, we get it to show "L," and then 59
"A," and then "S-H, " and then we end up with our typing animation. 60
So how can we do this? 61
Well, we can use our timer that we've seen previously in, for example, the Egg Timer Lessons, and as well 62
as other modules as well. We can get a hold of our timer and we can use scheduledTimer withTimeInterval. 63
The TimeInterval I want to create is nought .1 seconds, and I'm gonna set repeat to false, I only 64
want it to run once, and then inside this block, once you've got it highlighted like this in blue, so if 65
you don't, you can click away, and then select it. It'll get highlighted and then hit enter. 66
Now once you've hit enter, we can go ahead and give this timer a name. 67
We'll just call it timer with a lowercase "T." 68
And then the part where it says "code" is going to be the code that's going to be triggered after this 69
time interval. 70
So that is, of course, appending our letter. 71
Now, you're going to get an error saying that the title label needs to be clearly marked with "self" because 72
we are, of course, inside a closure denoted by this syntax that you should have seen before. 73
And if you don't remember what closures are, then be sure to review the section on closures inside the 74
Clima module. 75
Now, if we run our app as it is right now, it's still not going to behave the way you think it should 76
behave. And everything actually still appears on the screen at the same time. 77
So what's going on here? 78
Well, what happens in this full loop is for every letter in the title text, it schedules a timer that 79
waits for .1of a second and then it adds the letter to our titleLabel text. But, unfortunately, 80
we're setting up as many timers as there are letters in our titleText. 81
So the first timer is set for this emoji. 82
The second timer is set for the "F" letter, and then for the "L" letter et cetera. But all of these timers got 83
started pretty much at the same time. 84
So in order to fix this, we have to change the time interval so that it takes into account a delay for 85
every subsequent letter. So we can do that by creating a variable, let's call it character index, and we'll 86
start it with zero. And then inside the for loop, we're going to add 1 to the character index. 87
Now, if I go ahead and print the character index as well as the letter that we're currently on in our 88
loop, if I hit run, you'll see that the first time the loop run, the character index was zero 89
and my letter is this lightning emoji. 90
The second time the loop was run, the character index gets increased by 1in the last loop, 91
so now it's equal to 1, 92
and the letter we're now onto is "F." 93
So what we can do here is we can use this character index to multiply the time interval. 94
So if we had naught .1 times 0, it's still 0. 95
So the first time that happens immediately, and then naught .1 times 1 is going to be a delay of 96
.1 seconds. Nought .1 times 2 is a delay of naught .2 seconds. 97
Now, we can delay each letter by .1 of a second, so that they appear incrementally after each other. 98
Now, we're getting a error here saying that you can't multiply a double by an integer. 99
So how can we fix this? 100
Well, we could, in fact, change this into a double by casting it like so. 101
Alternatively, you can simply turn this character index into a double by writing 0.0 102
and you'll notice that if you check this now, it has turned its data type into a double. 103
Both of these options work to remove that error. 104
And now what I want to show you is I'm going to print the value of naught.1 times the character 105
index, and then I'm going to print the letter, 106
and I'm also going to add a line just in between to show you when each time the loop has run. 107
So, now if I hit run, you can see that the first time the loop has run, 108
the naught .1 times zero is, of course, zero. 109
So we've scheduled a timer with zero second delay to print this character. 110
Next time the loop is run, 111
naught .0 times one is naught point 1. 112
So we've scheduled a timer to be delayed by naught .1 seconds to print the letter "F," and then 113
so on and so forth. 114
So, now when you run the app and you look at it, you can see that it prints out this typing animation 115
by looping through each of the letters in our titleText and adding them on after naught .1 second 116
delay each time. And there are other ways of doing this animation. 117
There's actually lots of other ways that I can think of. 118
And the reason why we chose this is because I wanted to talk about loops. And if you've never come across 119
this concept of loops and looping in programming, then I really urge you to head over to the next lesson 120
where we're gonna be doing a Deep Dive on loops, and, specifically, look at the "for" in loops, as well as 121
the "while" loops that exist in Swift. 122
So for all of that and more, I'll see you there.