iOS Animation With Swift III - Layer Animation & Twitter Splash Screen | Sandra L | Skillshare

iOS Animation With Swift III - Layer Animation & Twitter Splash Screen

Sandra L, Front Development

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (16m)
    • 1. Intro

      0:16
    • 2. What You Need

      0:34
    • 3. What You Should Know

      0:51
    • 4. Twitter SplashScreen Intro

      2:46
    • 5. Layer Mask

      2:43
    • 6. Reveal and Animation with Core Animation

      7:35
    • 7. AnimationDidStop()

      1:28

About This Class

Welcome to the 3rd part of this 5-part serie of iOS Animation with Swift.

What you will learn

  • to create layer mask with iCore Animation and CALayer
  • use scale transform to expand images and logos
  • 25aff9e6

Other Topics in this Series

Transcripts

1. Intro: and this lesson, we're going to dive into higher levels of the U I. Kid methods to animate view layers and create cool visual effects were going to replicate together this Twitter's question example. With this logo zooming effects. This lesson is part of the five part series IOS Animations with Swifts. 2. What You Need: And what do you need for the class? The first important thing is that you need a very innovex code installed on your machine at the time of recording were at version 7.3. To download a copy of X Code, you can go to the developer Apple Page and head over to the Mac APP store. You need a Mac operating system for this course. You cannot use windows. You need to work on the Mac. Also, an iPhone device can be used to run your up. But this is optional because you can use the simulator that comes built in with X code. An apple developer account is not required for this class, but if you consider publishing your work, this is highly recommended that you get on account. 3. What You Should Know: So what? You should know for this class. For the best learning experience, you should have a working knowledge of X Code Swift and the Iowa, says Dickey. Projects and demonstrations will include a complete walk through a particulate animations with swift. But keep in mind that I will not be teaching swift. This class is more intended for students already familiar with programming and swift and using X coat. So you should know about variables, Constant's data, types, classes and properties, dictionaries, arrays, loops, functions and also closures. These also best if you know how to start and run a project with ex coat. Create a class file with an ex code also creates a graze on the interface builder and create outlets. And I be actions. If you haven't said yes to all of the above, you're good to go. We can then get started, and I will show you next in the next video. What we'll be doing in this class 4. Twitter SplashScreen Intro: in this lesson, we're going to reproduce the example of the Twitter splash screen with the Twitter logo, which is zooming in to rebuild the Twitter timeline. So we're gonna go to the main story board. So where we have one single the application and we have one outlet, which is a U Y. Image you and we're gonna add an image to it. So we have a few assets first the Twitter logo. So we're gonna use this to go as the musk, which is going to reveal toe, then the timeline of Twitter's. So that is this screenshot. So this screenshot we're gonna use it so as the timeline. So we're not gonna be building a fully functional twitter up. We're gonna be using this screenshot instead. And also the view controller. So here, you see that we declares of these outlets right here. And also we have an instance of see a lawyer. So inside view did load. So we nish life this mask with contents as well. So where we define the consent of this mask, which is gonna be the Twitter logo mask and something you're probably familiar with, So that is this Class C G image. So you're probably remembering that we're using C J caller in the previous demo with the slot machine and this is coming from the courts core framework. So we have at the top this import which is committing out. So we're governor removed these signs in order to be able to access. So all the glasses provided by this room work next. We're using this weird, um, word, which is gravity resized, expects. And what you should keep in mind with this sentence gravity mode is that the purpose of contents varieties to determine how the content should be aligned within the labour pounds . So it works a bit like the suspect content moods that we use with the images, just like in the interface builder in the main story. Words right here. So you see that here we have the content mode which could be skilled to fill aspect feel I spent feeling right here and aspect fit. So it's very similar. So what? You need to bear in mind that we use this in order to allow the image to fit probably within the layer bounce without this storing the aspect ratio and for the bounce with. That's pretty simple. Sui wants the bounce off the mass to be 100 by 100 and for the younger points. So that's gonna be half of the points starting from the top left corner of the view And for the position of the mass, we want to position this one in the middle at the center of the view. So we're gonna use the height and the width off the view divided by two in order to position this one right at the center. So we're gonna be doing that. So first we want to go to the main story board. So where we're gonna add our were Twitter screen Shut. That's gonna be the first step and then in view controller. So this is where we're gonna add a mask right here. And we're gonna be doing that in the next video. Listen, 5. Layer Mask: So we're gonna continue with building the Tweeters Splash Crane. So what we're gonna do is head the mask, something we should do as well is just still building in run so you can see the view. So how it is without the mask. So this is what we would have, which who looks like a Twitter timeline, and then we're gonna add a mask, and we're gonna do that right here by putting. So we're gonna sign this mask, choose the layer, then the mask of the image of you. So we're going to write to mask a simple of that's we're gonna save and then build in room again. Here you go. So now you can see that we have this mask, which is the Twitter logo. It's not very easy to distinguish because for now, so the view, the background color of the view is white. What we're gonna do next is apply the Tweeter Brende callers to the view. So right here, I put a comments. I'm gonna show you to take you to one website that I found online, which gives you all the brand colors off different popular brands. And we're gonna look for Twitter right here. So this is where you have the color and in X codes. This is what we get. We're gonna take the RGB color so you could find any converted online in order to convert the next value into RGB. And we're just gonna translate That's into our Giambi radio. So we're going to write self you that grown color, and we're gonna use the function you y color and that's gonna be read. So instead you floats. So I got the value Edify divided, divided by 2 55.0 in order to return of value afloat value between zero and one and then it's 172 So we're gonna right? 1722 55 0 And for the Alfa, we're gonna keep you 12. You noted for it to be fully opaque, so we're gonna save that and run. And now this time you're gonna be able to see a woman states on my bad. Sorry for the last value is gonna be true. 38. So, for the value, the Tweeter Bren Cohen is gonna be 85 for the red one, senator for the green and then to 38 for the blue. I was just maybe distracted. Like, let's see that this time you're gonna be able to see area go. So the Tweeter brand colors. So next what we're gonna do is any meetings, this logo so it can expand. Zoom in to reveal the timeline. That's gonna be the next step. 6. Reveal and Animation with Core Animation: Finally, we are focusing now on the most interesting part off this lesson, because we're gonna create the animation. So there is dysfunction animates right here. So inside of which we define a key frame animation. So which is an instance of a glass See a key frame animation. And we want to create an animation on the bounce. We want to animate the change in the Brownsville. So we're signed self to the delegates of the key frame animation, and it works very much like the animate with duration that we used in the first module. So we're gonna define the duration and also a big in time, which corresponds to when we want to the animations to start and recorder implement a slight delay by adding this plus one So meaning that this is going to start So one second after we load the view and below we have this comment. So this is where we're gonna define the start of the animation. So how we want the animation to starts and we're gonna van create also how we wanted to ends meaning that we wanted to bounce like creative balance effects. We wanted to zoom before it's finishes on the on by revealing the timeline, the Twitter timeline. So we're gonna start by the animation right here. So here, we're gonna do find So the initial bounce, basically, we're gonna use this glass which is in its value, gonna open parentheses, and we're gonna use He directs to define the bounce. So the initial bounce that we want for this Sorry before this in Texas gonna be see direct like so. And this is where we're gonna define. So the value of the bounce that we want for the initial, the initials, the starting point of the animation. So for the starting point, what we want is to have the initial bounce off the mask loco, as we have defined right here, which is 100 by 100. So that's gonna be a mask and downs. So what we want is for the animation to start with the value off 100 by 100. Simple Is that next we're gonna go there, bounce, zooming effect. So this is where we're gonna initialize the different sequence off the animation. So I'm gonna name this one middle bounds and here, as well we're gonna use in his value and we're gonna use as well see direct. It's gonna take a parameter which is gonna be see direct and here, insightful as a value of these parameters. See, directs. We're gonna call again, see, directs of the Sea Direct Function, which is gonna take an X and Y coordinates and within Hunt. So I made a typo. Innocents actually, is not gonna help for the auto complete like, so it's better. So it's better with the auto complete. So we're gonna right there are for the X and Y And finally, for the with and light, we're gonna actually decrease the value of the initial value by 10 for each, for the with the night. And that's gonna create this effect off the logo, decreasing slightly by 10 points for the width and height and then expanding again. So that's gonna create this bouncing effect. So we have actually to parentis is just so we get rid of the error. So we're gonna continue by defining them the final bounce that we want for this animation. So that's gonna be just like that's up. We can actually Compean pace to save some time. So we're gonna use Thean, his value. We're going to keep a zero and zero for the X and Y again. And this time, what we want is to create a big frame for the logo so big that we won't be able to actually see it's on the screen. So it's gonna be decreasing slightly by 10 and then completely expending to reveal the timeline. So that's for the bounds. What we want next is to sign So the the values that we have just defining to the values and key times for many of the key frame animation So the key frame animation will be a sequence of animation which is gonna be rendered one after another. So we're gonna do find the value. So that's one property to which we're gonna assign the different bounce that we have specified. So that's gonna be first angel bones followed by Middle Bounce. So that's gonna be the second animation and then final bounds for the last part. Finally, we want to also create the timelines with the key time. So that's gonna be the related durations for each of the animation for each step that is gonna go through. So we're gonna have zero. So We want this one to start immediately at 00 and then we're gonna have 0.3 the second animation, which is gonna be the Beetle. But bounds will start at 30 minutes. It goes after the 1st 1 is finished, and then the last one, it's gonna be at one. And then we're gonna also add some timing functions to the animation, so that's going to allow to add some flexibility to the animation. Instead of having the same speed of the animations from start to finish, we can use timing function, and that is very similar to the options that we use with animate with durations like care of linear. So which is when you play the same speed, but you have also cure is out. Occur is in. So we're gonna do a key frame animation, and we're gonna add this pretty, which is timing function, and that's gonna be so that's gonna be a lot off writing here. So it's good if you can out a complete and that's gonna be key. C A. A is gonna come up. Casey. Immediate signing function is in is out. So that's gonna be for the 1st 1 But then we're gonna add another one separated by. Come out. I'm gonna actually Compean pieced It's gonna be easier gonna cookie this one and then paste right here. And for the 2nd 1 is gonna be just ease outs like so. And I think I have an extractor, and this is in that instance. Okay, that's it. Okay, So that's thing we want to do is now adding the animations to the mask. So we have our layer self musk, and then we're gonna do add animation and we're gonna add So for the first Mariner, the key frame animation that we have just created and for the key that's gonna be the bounds because we want to animate. We want to enemy the change in the bounds. So that's gonna be three different steps of this first step, which is gonna be the initial bounce. That's right in the middle. We gonna have this and then the second final bounds, it's gonna be this one. So now that we have completed this animate function, we need to now apply it, and we're gonna call this one in the view did load. So the animation is going to start as soon as the view loads and we're gonna run now, the application gonna open the simulator, and I'm gonna sees that now we have the logo, which is gonna expand. Although the animation starts and then completes its gonna go back to the Twitter logo. It's not really what we want as the final results that function so below, which is animation. This stop. And we're gonna need to complete this one to complete this video. Listen, and we're going to see that next. 7. AnimationDidStop(): So to complete this demonstration and complete the animation, we can look at this function, which is animation this stop, which is provided by the Class C A animation. So something that you can do whenever you have questions about so functions or classes, you can keep your finger down on the option key and hover over at the same time. So you're gonna press the option key and hope for her. You're going to get this question mark, and then you're gonna click on it, and they're gonna have this window expanding the in order to provide more information about this function. So this function is called when the animation completes its active duration or is removed from the object object. It is a touch, too. So basically, it means that the class, which is provided this function, is aware of when as to when the animation is complete. And from that you can then decide of what you'd like to perform as a task wants. The animation is complete, and basically what we want is to remove the mask when the animation is complete in order to keep to keep revealing the time willing. So we don't have again the mask, which is hiding the timeline. So it's not what we want. So we're going to right itself. Image view Lay a mask. So what we want is to remove the mask that we have applied to the image you and we're gonna set it to Neil as simple as that. So we're going to run that and go to our senior later and you're going to see the animation , which is now complete, and now the mask is removed from the layer off the image you.