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