[1/3] - Twitter Clone - Animated Splash Screen | Sandra L | Skillshare

[1/3] - Twitter Clone - Animated Splash Screen

Sandra L, Front Development

[1/3] - Twitter Clone - Animated Splash Screen

Sandra L, Front Development

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
3 Lessons (27m)
    • 1. 1 intro

    • 2. 2 goToLogin

    • 3. 3 animateKeyFrames

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this class, you will start by building an animated splash screen just like the twitter app using keyframe animations.

This class is part of the 3-part series to build a Twitter Clone:

  1. Twitter Clone - Animated Splash Screen
  2. Twitter Clone - Twitter Login SDK
  3. Twitter - Real Time Database with Firebase 3.0


Prerequisites & Requirements:

You will need access to a Mac computer running OS X 10.10 or later No prior programming experience is required. The course has been specially designed for beginners. The first chapters will walk you through the download and install process of the XCode 8 Application (to build iPhone Apps).

Meet Your Teacher

Teacher Profile Image

Sandra L

Front Development


My name is Sandy. I am a freelance Front End Engineer based out of Toronto, in Ontario, Canada.

- Check out the latest Learning Path Series :

React.js - Front End & Fullstack - React 16.8 + 

Intro to React: Getting Started - watch Intro to React: Learn the fundamentals - part 1 - watch Intro to React: Learn the fundamentals - part 2 - watch Build a Countdown Timer with React.js - watch Simple Todo List with using React & HTML5 Localstorage - watch React, Node.js - Build a Quote Generator with a Restful API - watch Build a Weather App with React, Bootstrap & HTML5 LocalStorage - watch Learn React Redux in less than 1 hour - watch Getting Started with React Router - watch Introduction the React Hooks - ... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. 1 intro: So we're going to start to with our Twitter clone application. On the beginning of this tutorial will be to create a splash screen. So let's go create a new exclude project, which is gonna be a single your application. Click next, and I'm gonna call this one Tweeter clothing next, and then Crete's perfect. So we're gonna start with the main story wards. For now we have this single, do you? And what? I'm gonna just trade away. He's actually creating a new class and you file and that's gonna be cooking class. Click. Next, I'm gonna name this one splash screen view controller and this must be a subclass of you. I've you control. OK, click next and then creates Perego. So we've got our new file. So what we're gonna do right away is going back to this story board and connect this one with this you controller. So we're gonna forget with this angel foul, which is provided at the start of the off every projects. Instead, I'm gonna select this one, go to Identity Inspector right here. So you're gonna see the class and I'm gonna tie splash screen view control or which of a name that's you've used to create this class. So that could be something different for you. So make sure that you connect this one with this. You controller, OK, And to begin with. So we're going to replicate this blast cream off the two applications. You know, these Twitter logo, Which is that progressively growing up to display the interface of the main interface off the Twitter applications to see and read the tweets. So I am providing with a few sets. So right here in this boulders set, you're gonna find this Twitter and ago, PNG foul. So you're going to simply drag this one over to your projects to the roots of your project , like so release. Then give this one checked. Could be Adams. Could be items if needed, and then finish. Okay, We're gonna get back to this one a little bit later, but it's gonna be in a better that's we're gonna use as generic have at our image profile image. Okay, so for now we're good. So we have this twitter logo that we're gonna use. So we have this Twitter logo that we're gonna use to create the Tweeter splash screen. So let's start with this blessed rain of you controller. We're gonna create one global variable here. And that's gonna be I'm gonna call this one Tweeter logo, which is gonna be up type you are. Image you. Actually, I'm gonna also name this one too little girl image of you. Actually, it's better. Tweeted ago Image view off type your image, you And this is an optional and basically so what we're gonna do is initializing so this twitter logo image you right here, injured load. That's gonna be you. An image you like. So we're gonna initialize this one we're gonna provide with bounce bounce informations for this tree logo image you that's gonna be with you. Our image, you and then frame. I'm actually I didn't need to do this first step right here. So you have the options to proceed by creating so starting with this one and then provide with the frame like so I'm gonna show you, like so frame or bounds? I think you can Yet, but just so you know, so you can. So you have either options. So this one, this line is not absolutely required and said you could Angel is by providing with the rex with the frame. Instead, you could angel eyes by providing with frames directly. So we're gonna live it as is. So you know that you have the two options, so that's gonna be with CGE Rex, and we're going to select right here. So we're gonna need to specify the X and Y coordinates and the width and height so they're all gonna be up type city flutes. There you go. So what we want is to position this logo in the middle of the strength, So in order to calculate that, So we're gonna do it dynamically by first referring to the bounce off the parents. You So the view of this controller that's gonna be self of you bounce and then with we're going to do that with divided by two to get So I made a typo, Let me close this on the right. So that's gonna be bounced then, with divided by two to get like half of the with off the parent you. So the view off these controller, we're gonna do the same for the y coordinate. So that's gonna be self view bounce, then heights divided by two. So that's not enough. So we also want to put in the middle so and take into accounts of the dimensions off this element itself, meaning that we're gonna provide with the within the heights. So this one is gonna be 100 by 100 so that's gonna be a square shape. And basically, you need to also include So the bounds of the sediments in the calculation off the center right here meaning that you're gonna put this one in Paris is and substructure It's half off the width of this element. So meaning that energy put this one in the middle, you're gonna need to subscribe. So half off the with of this element itself that you want to place in the center seem for the heights. So we're gonna put this one's in brackets divided by two and then minus 50 which is half off 100 right here. Okay, so we're almost done. So we're just going to choose rep, finish with one causing practices. So then So we're gonna also provide with an actual image for this imagery because for now, so we're nuts, providing with any image that's gonna be tweeter local image. You pretty image that's gonna be with your image. And then we're going to specify the image that we won't shoot bad. Do this one. It's gonna be named. And the name of this one is sound. This logo right here. So you can simply I like this one and then copied from here. Commence. See, Go back to splash screen and then here specify the name off this image view of the image of this image. You okay, so next we want to add. So let me see. I need to unwrap this one. Okay, this is an optional. So I'm gonna need to interrupt this one right here. Okay, then I'm gonna at this one to the view off the parent you. So that's gonna be self if you add subdued and then specify. So the Twitter logo image you so that needs to be added to the view. Because here we are creating this one problematically. So we need to add it to view in order to make it visible. Okay, so that is almost down. Let's see what happens when we run this application. Okay? I'm actually nothing and wides because we have white on white. So what we're gonna do is actually providing with the colors of Twitter for the background color of these you. So we're gonna change the background color. And I have found this website that provides with every brand colors and you just need to actually look up this one right here. And we're gonna look up Twitter to get the exact color of Twitter here ago. So we're gonna need this one. So that's an ex code, and basically you can find any converters. So from X to RGB, in order to get the RGB values so off type city floats in order to then applied to your applications to the view of your application and the results of this website, which is the Tweeter Bren resources just in the case, you need it that provides with a set off logo that you can downloads with different formats or your application. So that's very useful. So here confined so old a specification about the twitter, Brendan. So, after converting this X code value with to RGB values, So we're gonna do self of you background color and then specify the color like so. So that's gonna be with the reds green blue and al fall perimeters. So basically, you're gonna get So for every power you're gonna get of siege, it floats. So we're going to divide. So that's gonna be 85 divided by 2 55 which is the highest value to create a collar. Then for the green is gonna be 1 72 divided by 2 55 for the blue is gonna be to 38 divided by 2 55 And there wasn't in putting like adults, and then zero it's too implying that this is a city felt. Finally, we're going to specify an Al Fong which is used to control the opacity. So that is a value between zero and one. So we're just gonna have, like, opaque colored one being the full color, so that's not gonna be transparent at all. That's it. So let's try that again. We're going to run the application, and this time we're gonna be able to see our logo, um, the Twitter caller background. So let's run that again. Now we're going to be able to see the Twitter logo on the Tweeter Brendan colors. Okay, perfect. So just a few adjustments that is left to do. So now we can see that the image is not completely perfect because this is not the original dimensions of that image, actually, So something that you can do is to change the content mode of that image. You I'm gonna do that right here. So that responds to something. You're familiar with it? Actually, you can do it programmatically we're going to select skill aspect fits. So you know, that's this part. When you have an image, you I don't know if it's gonna be actually available, so because we have no image you on the right here. But normally, when you have an image, you can select it and you're gonna find the content mode section where you can change so to expect feet scale to fill. So are you gonna find this? So if you go back to one project, which is the image gallery, for example? So that is something that you get your from the storyboard when you add an image to your story born, but then so programmatically So this is the way that we're gonna do it like so Okay, so that's run that against you're going to see that this time So the Inspectorate. Sure it's gonna be respected. It's not gonna be distorted here ago. So we have our small ago on the Twitter Brendan Color. So that's perfect. That's gonna be the first step. Next, we're going to see how to animate this logo to make its grow and disappeared to display like another view. 2. 2 goToLogin: So we're gonna complete our animation function right here by allowing so we're gonna have one completion. Actually, it's not gonna be Neil and the last step. So once the animation is complete, so we're gonna allow the user to then say greater another view, which is gonna be like the log in view. And you're gonna be able to with this looking view to authenticate using your trader credential. So that's going to the second step off this tutorial. We're gonna create the Tweeter log in page so that you're gonna use to log in to your application. So let's go to the main story board. We're going to start by adding, So one another view right here's will no longer be a single the application. So we're gonna do that with the object library view controller. I'm gonna put this one right here a year ago, and we're not gonna create so right away a new class for this one. So what we want is to allow to this one, actually, for the convenience, I'm gonna put it side by side because I'm gonna then create the cigarettes from here. So you're gonna put your finger in control than drug over like so here you go. And you're going to see the option we're going to select, actually present Model E here ago. And then we're gonna also provide with one item to fire. That's gonna be good too. Le Guin. Like so? So for now, we're gonna leave them side by side. I will want to change them so later on. But for now, we're just gonna leave them side by side. It's more convenience. Okay, so we got our Segway with unidentified air perfects. Let's go back to splash screen view controller and basically so right Here's instead of having meal, I'm gonna actually retype this one just to have, like, the full thing completion. Uh, I think it's like so and there. Okay, never mind. So let's just actually So So this is parentis is. Then you have, like, the period, and then you're gonna open this one. So when this is a block, so that's gonna be with the curly brackets, like So So this is how you create the block for the completion. Then you're gonna have one variable, which is gonna corresponds to it. If this is like, this is a bullion we'll put finished and then inside. So this block So I'm gonna then perform So when I want to do so once the animation is complete, basically. So what we want is to use this function, which is performed to form. So that is performed Segway here ago with identify those who have just created this one. So this is go to log in. Sander is gonna be self meaning that this is gonna be this view controller, which is going to send to the next few with this using the Segway. With this identify, we're gonna need shoot refer to this one with self. Very. But so once this is complete, we're gonna go to the next year. So which is blank for now, Although we should be able to see, like, this model animation. Okay, so that doesn't appear anyway. So that's why so something we could do just to make it more obvious. Invisible. I mean, that's really up to you. You could put like an indication, like a visual cue. Like, let's say we could add, like legal. Put this one right here, but I'm gonna put something like Logan nothing very fancy just to show you like this is actually going to another view. You go and you can see I could be showing, like, starting to shows, lighting up from the bottom to and you can actually see it like showing up so sliding up from the bottom. So we won't tracking the disabled this one because we want to create the effect of just bill ago animating growing up and just see, like, this view next. So something you can do is select the sick weight and uncheck this function, which is animates so we don't want the segment too present itself with the annual rates option. It's gonna be just showing up. Okay, let's try that again, Perego. So that's a little bit better. So the other thing I'm going to do just to get things clean and organized, I'm gonna separate. So this part, So I'm gonna put it in its in its own function. I'm gonna name this one. So funk, uh, go to lugging with you and kept this right here from here on, then paste it right here and then call this function instead. And this one is gonna be So go to le give you perfect and that's gonna be a rap for our first, some part of this demo for the Twitter splash screen. So we're gonna be able to then move on to the Logan View year ago, OK, so we're gonna be able to then move on to the other part, which is to allow users to log in using the Twitter credentials. So for that, we're going to need to create in your project with the five days as decay. So if you haven't done so So you're gonna need a Gmail accounts in attitude, access the energy to access through the Five Days services, which which is gonna allow us to save data to the cloud and also to authenticate. So we're gonna be able to implement the authenticate service using fire base and, more specifically, the Tweeter with the Tweeter as decay. So we're gonna do that next 3. 3 animateKeyFrames: we're gonna continue with our splash screen demo. And this time we're gonna take care off animating So this local So I'm just gonna get rid of this function that I'm not gonna be using. And here I'm gonna create another one. This one is gonna be the function animates. And we're gonna use the any mates que frame function that we're gonna call actually on this class, which is your eye view. And that's gonna be any mates a key frame here ago right here. So it's gonna take several parameters. Well, guys, start with that. So starting with the duration that we're going to specify, actually outside right here, let's be duration equal to one dogs ever. So that's gonna be a type like so this is always like a city float for the interval. And what we're gonna do is actually supporting this one outside. That's gonna duration. That's gonna be a floats. And then we're gonna put this one right here, which is expecting, actually an object of type time duration. So I'm interval. Sorry. So that's why we're gonna need to write this one with me. Time interval like so we're gonna write this one so inside the time interval function like so to convert it into a duration. And that's gonna indicate So how long this animation is gonna take? Then we're gonna have a delayed, and we're going to specify this one as being I'm gonna put 1.5, okay. And here as well, I'm gonna actually put it outside. It's gonna be 1.5. I think it's gonna be fun, actually. So let me check. Just might put this one without to wrapping its inside. Um, or I think this is actually expecting Let's check. So for this one, this is also a time interval for this parameter. So for the two first burners, so that's going to have type time interval. So I just want to check if this is actually required to rapids inside. So this time interval, we're going to see for the options. So we're gonna live. It's empty by simply putting two square brackets like so it looks like we have to okay, and finally gonna have the animations block. So we're gonna simply click on it to open this block, and this is where we're gonna create our animation. So that's gonna be the key frames. We're gonna have different key friends in order to indicate how we want to animates. And also how long for each step. So that's gonna be steps for the animation. So we're gonna do that by going add a key frame, like so with a related start science training that we're gonna have a start time, which is gonna be related to the duration right here. You see, let me remove that. That wasn't really necessary, because anyway, time Interval is off type double. Miguel was changing back. If this is required and we want this one, so the first step to start so at zero. So meaning that this is going to start to right away. So that's gonna be the first step. Then we're gonna have a related duration on related means that this is gonna be a durations related to the this duration, like 1/3 of the entire duration, which is one second Tuttle. Then we're gonna have the animation. So what we want is to animates this Twitter logo and let me leave it empty for now. So I'm just gonna actually describe this step, so I'm gonna put first step. That's gonna be. That translates to the key frame. Then second step, I'm gonna have the same. Actually, I'm gonna copy it from here. We're just gonna change the related start times of this time. It's gonna be like after the first step. So we want this once it starts that half of the one second animation and that's gonna be the same duration related duration, which is gonna be, like 1/3 of the entire duration. Then we're gonna have 1/3 and last step. Let me copy it as well. I'm finally that this one is gonna be starting so towards the end off the animation, that's gonna be like at 80% of it. So if you come by the three, you're going to see that this is gonna add up to one second total. So this is the related duration for each of them. So what we want is to then change the bounce of these Twitter logo. So we're going to start by referring to the Twitter logo image view and then refer to the bounds. So we want to change the dimensions of it. We're gonna do that with CG rights. We're gonna have an ex lie within heights. So we're going to refer, actually to the bounce of the view itself. So that's going to self view, frame and then size with meaning that here. So I'm just specifying that for the X so that's gonna corresponds to the with Off the view Divided by two The girl this is placed in the center Same for the white coordinate. So that's gonna be self view frame and then heights. And that's gonna be I have a type of here it's not gonna work on then divided by two and for the with. So this is where we're gonna actually change things a little bit. So this is originally so that's 100. So that is the original bounce that would provide for this image. You were gonna put it at 90. You're gonna see that's it's gonna create like the slide effects off a slight to bounce the effect. So this is gonna be shrinking slightly to then grow completely. So let's do the same for this parts. I'm gonna close it. Actually, no, I think that the error was coming actually, from here, you need to interrupt this one. I only have one. Prentice's So one thing to unwrap this optional right here. Okay, so we're good for this first key frame. First, a step second step it's gonna be We're gonna make this one so much bigger, so it's gonna shrink slightly, so it's gonna shrink. It's likely by 10%. So we're going to reduce it to 90 by 90 1st step, then we're gonna make this one much bigger on the second step. So that's gonna take, like, 1/3 off the one second animation to get to this from this to this. And finally, we're gonna make this one so big that it's gonna disappear from the screen and it's gonna be 3000 by 3000. That's it. So this is how you create G frames and for the completion, so we don't need to do anything for now. So meaning that's once the animation is complete. You could do something else and this completion block. But for now, we're just gonna make it equal to new. Here we go. So let's review that very quickly before we actually activate this one. So we create an animation with a duration, a delay, so that's going to start actually, one second and 1/2 after the start of the application. So here is specified duration. For this animation, that's gonna be one second a delay. One second and 1/2. No options. So we're gonna live. It's empty. With two square brackets, you could look it up. So by simply, you know, uh, keeping your finger on option and then over this one, Then click to have this little windows showing use of the different options. And then you can go to the class, the documentations to read more about the different options animation. Finally, we're gonna have this animation block right here. So this is all of that where we're going to specify the key frame. So that's gonna be the different steps of the animation introduced to create the bouncy effects off the treated will go so animating two gets completely bigger to then so showing , like creating in effect, off the Twitter logo of disappearing. We're going to see how it works. So I'm going to start by creating this function. So I'm going to start by calling dysfunction. So in beauty load, actually, right here. So that's maybe animates here ago and let's see how it works. And here ago, That's perfect. So we have just created our animation. So what we're going to do next? So you see that this is now, like, leaving us with a white screen. So ultimately So what Ramon is to then navigate to and now the screen. So that's gonna be another view that we're gonna need to create. So we're gonna do that next and basically so we want to have, like, another view, but also create, like, a sink. Quit meaning that you're gonna cigarette you. Another view. So we're going to see that next.