iOS Animation with Swift I - Basic UIView Animations | Sandra L | Skillshare

iOS Animation with Swift I - Basic UIView Animations

Sandra L, Front Development

iOS Animation with Swift I - Basic UIView Animations

Sandra L, Front Development

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
17 Lessons (42m)
    • 1. Welcome!

    • 2. WhatYouShouldKnow

    • 3. WhatYouNeed

    • 4. Class Goals & Presentation

    • 5. HelloWorld App Overview

    • 6. Animating Hello World

    • 7. Delay & Completion Parameters

    • 8. Fade In & Out Effect

    • 9. Overview

    • 10. Displaying Quotes - IBAction

    • 11. Alpha Changes

    • 12. Random Colors

    • 13. Overview

    • 14. Blur Visual Effect

    • 15. Spring Animation

    • 16. KeyFrame Animation

    • 17. Animating the Login Form

  • --
  • 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

Welcome to the 1st lesson of this 5-part series of iOS Animation with Swift.

This 1st Part will set the stage for basic, yet very cool, animation effects with Basic Animation API of UIKit to animate move, size and color. 

What you will learn

  • Create move and fade animation
  • Adjust animation easing to customize visual effects
  • Using spring and keyframe animations

What you will build

  1. The first demo, Hello World, will show you how to animate objects on the UIKit. You will greet users with move and fade animations, create and adjust animation easing to customize visual effects. 
  2. The second app demo, Random Quote, walks you through the creation of a single page application to display random quotes and author names.
  3. Finally, Spotify Splash Screen, combines all of the above. topics include:
  • blur visual effect UIView
  • move and fade effect
  • keyframe animation
  • animated login form



Other Topics in this Series: 

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. Welcome!: this lesson is part of the five part series Rus Animations with Swift. In this first section, we're going to set the stage for basic animation effect with the basic animations FBI's of the U. Y. Kids to animate, move, size and color. The first name will show you how to animate objects on the bike. 2. WhatYouShouldKnow: 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 3. WhatYouNeed: 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. 4. Class Goals & Presentation: The goal of the course is to teach you techniques from simple to complex. You will create nice animation effects to impress users and bring life to iPhone applications. This is how the course is broken down. Section one will be in introductions to basic U Y animation AP Eyes. You will create, move and fade animation. You're gonna learn to adjust animation with easing options. Plus with spring and confirm animation, you will set the stage for cool visual effects in Section two. We're going to take it up a notch. We will dive into high levels of the U I kids methods to animate a few layers. First, you'll be creating a casino slot machines to create a fun experience. We're going to apply a lot of what you have learned in Section one, and you're gonna add great inns, animation and also sound with the AP Foundation primer, and we're gonna reproduce together or tweeters blast screen with this logo swimming effect with the Section three, you'll be prepared to create custom transition and custom Segway, and the key to this section will be this project. We're going to use collection views to create a picture gallery with an advanced user interactions design. Every time you talk on the cell, you will get this great special visual effects when you're transitions to full screen. Finally in section for I will walk you through the creation of these weather up. We're gonna use an A p I and we're gonna use new techniques of transform, cross dissolve and fade animation to take your experience with IOS You I to the next level . So get your ex got ready started products will be available for download in every section. So if you're all set, we can then get started. 5. HelloWorld App Overview: Hello, everyone In this first video, Listen, you're gonna learn to create your first animation with this up, Heather worked, You're gonna play with position and also color changes. So we're gonna go to X code on the left, you have the main story board. And on the right, there is the view control file. So you can have the two fouls side by side by going to the top and click on the assistant editor, Aiko. Like so So on the main storyboard, you have three outlets first, hear the word a second label and the 3rd 1 which isn't visible for now. So the animation that we want to create is a slight down and slide up effect, so you can see that in the view will appear method. We have those three labels and we are changing the appearance and position first by using view bounce heights, and we can, by changing the white origin of the hello word label, place it outside of the bounds off the street. So we're using the minus an equal sign in order to create a Dick Riminton on assignment at the same time, we're doing the same with the second label by using view, bounce, height as well. But this time we use plus an equal like so we can position this label outside of the bounds of the screen further down. And that's gonna allowed to create a slide of effects for this label. And finally, the hidden label. We are changing the Alfa by using 0.0. So that's the float value. We can make it invisible below. You have viewed it appear. And inside we have this function that we call animate restoration. And it's called on the U I view class. And this is where we're gonna place a code in order to create the animation, just like we've seen in the first seconds of this video. And we're gonna do that next together in the next video. This 6. Animating Hello World: animate restoration is a method that you call in the US You close? It takes two parameters. The 1st 1 is an Ennis time interval that corresponds to the duration. This is to indicate by how long they want the animations to be. In that case, people the animations to be just one second. The second perimeter is an animations closure. This is where you're gonna place your code in order to create your animation. So in that example, it's commended out for now, and we're gonna remove the common signs in order to allow the animations who starts once the view appears. So we're gonna build and round in order to see the results. So you can go to the top and click on the A room I can hear, and you're gonna be able to see once the view loads and appear. They had a word sliding down smoothly. Here you go. And we're gonna be doing the same for the second label. Not just now. Next, we're gonna take care off the cold, it changes of the background, and we have another any major with duration code to write below to animate the background color. And you see that we also have the duration parent, which is gonna be two seconds. And we also have delay in options were not going to be taking care of that just right now. First, what we're gonna do is allow to animate the change of the background color. So we have a line of code riches committed out. For now, we're going to remove the comments signs in order to allow the animation of the background color from white to yellow. So we're gonna build Enron as well and a good to be able to see the animation of the Hill. A word starts and then followed by the animation of the background color to yellow in just two seconds. 7. Delay & Completion Parameters: So now we have the animation of the L word label and also the background color change changing to yellow when I see how this looks and that looks pretty nice. And that would be even nicer to have a slight delay between the two. And I'm gonna show you how to use the delay perimeter. So in this second animate with duration function, we have these delay perimeter. We're gonna update the value to half of a second, and we're gonna build and run again. And you're gonna be able to see that once the hello World animation starts half of a second later, we're gonna have the change off the background color to yellow. So let's build and run, have the word, and then it changes to yellow. We can even make its more delayed by using the value of one second and 1/2. So we're going to see how this looks by building and run again. And this time you're gonna see the handle word first. And then it's gonna be slowly changing from white yellow after a delay of one second and 1/2 during two seconds. So we're gonna put it back to half of a second. Now we continue with the animation. This time we're gonna look at the steak and label my first animation. So we're gonna go back to this first an image with duration that's we were using to animate the hear the word label. And we're gonna update the code with the completion paradigm. So for now, it is set to kneel, and what we want is to start another tusk to execute another code once the animation ends. So we're gonna go to completion and we're gonna starts. We're gonna use the curly brackets in order to create a closure, And that's gonna be the completion closure inside. We're gonna have another some other code that we want to start executing once the animation ends. So that's gonna be self second animation, and that's a function that we have defined declared so right below. And there is always a perimeter which is a bull for the completion barrier that we must always specified. And here we're gonna write, finished in in order to indicate that we want this go to execute once the animation ends. So we don't have anything in that function. So just to indicate that the code is executing as expecting. We're going to write a print and we're just going to write something like second animation starts. Do we get are able to see that when we build and run, we're gonna have the animation of the other words. And right after when it's finished, we're going to see we're gonna be able to read in the console. Second animation starts, so he's just to indicate that this is working properly. So we're gonna try that we're gonna build in room. So we're gonna have our animation have a word. And here you go, you can read in the console a second animation start. So that was just the tests. And now it's time to right. Some actual code united creates an animation. So I'm going to remove this line, and I'm going to replace with an unmatched with duration. So we're gonna do just like we did for the other word label. We're gonna call this method on the U. E. B class. So it's gonna out to complete and just make sure to select to the one that takes the parameters delay and also options. So we're gonna fill out with the correct information. So that's gonna be double values for the N s time interval duration. So that's gonna be just one second for delay. We're just gonna leave it as zero options so we can leave it. Neil, by using just the square brackets, we're gonna have the opportunity to use the options later animations. So we're gonna create a closure for the animations and at a code in order to create the animation for the second labeled and completion. It's gonna be left as Neil because once the animation ends, we don't want anything else to happen. Is just gonna be the animation of the second label. So now we're gonna do just like for the hello word label. We're gonna create a slight up effect for the second label this time. So you see, that in view will appear we set this one so outside of the bounds of the screen by using the plus an equal sign. So we're going to do the opposite this time in that's animation block. So we're gonna call self second label center. Why? And we're gonna update the Y origin with minus equal son. And so we're gonna build and run to see how this looks and you're gonna be able to see these times. That's we have the Halo word label sliding down on the screen, the color changing to yellow and then the my first animation label, which is showing from the bottom. We're gonna finish with another animation, and we still have to animates the visibility off the third label. We're going to see that next with this function that we have right here so background color and want this one to start. So once the animation of the background color from white to yellow is finished, so you can't expect to use the completion parent, er, we're going to see that in the next video. Listen in. Swift self is inferred and is not required, although you probably not, is that we were using self from time to time. So use the self property to refer to the current instance objects. So it's true that it's not always required, although we're using self in the animations closure, the closure is a class that requires a strong refers to self to avoid the allocation and memory leak so self will be dedicated once the animation is complete. So There's not each worry too much about that now, But just keep in mind that self is always recorded when we are inside a closure or a block . 8. Fade In & Out Effect: in the words of my first animation. So we're gonna be able to see the complete and full animation of this up. We're going to complete this second animate with duration with the completion parent. Or we have this function the last one background color that we're gonna call. So once the animation ends, so we're going to see and we must always specify that it is when it's finished. So this is a bold perimeter. You can either either leave it as void or right finished. So we're gonna saved we're gonna save build and rum, and this time you're gonna be able to see in action. So the complete animation. So that's going to start with their Heather word label, my first animation yellow and then black and my hidden label. See you next time 9. Overview: in this demo, you're gonna build a random court generator, so that's gonna be a fun and colorful random code generator. You're gonna have a different background color every time you display in your quote, and we're gonna be doing just like we did in the previous demo. We're gonna work with any mate of you duration and the perimeters duration and the animations closure. Plus, we're gonna work with an A P I, which is an application program interface Internet. You get the quotes data, so we won't be making up the quotes information. It's not gonna be hard coded either. They will be coming from the Internet instead. So let's see what the APP is made up. So we're gonna go to the starter projects and open the Rendon Court and start folder. So you have the main story board on the left and a few controller on the right and have to outlets first, the quote label and the author label. And we have also this button random quote that we're gonna linked to the I B action, and that's going to trigger the function, said quote that we're going to use in order to do an a P I call and this one is available inside the file data service. So here you're going to see that there's a lot of information that may be confusing if this is the first time that you're working with an A p I. So the first thing you need to see is that we're using a completion hander as a perimeter to return a quote and another. And we have this first variable, which is a euro, and that corresponds to this FBI service, which is called Charismatic. So this is where we're gonna get our random court information. Then we open and in a serial session and recall the method shared session followed by the A task with euro that takes two parameters. So first, the euro, which is this euro that we have just defined as a string second, a completion handler and this completion hander is going to return three information. So the data response and an error if there's any and so we're interested in the response, the data and that's gonna be in the form of Giessen ferment. So I'm gonna compete this link and I'm gonna pace. It's in the address bar and the browser. So you're gonna be able to see what type of data that we can return with this link. And here you see that we have the keys, cortex and quote author. And we have a different values, different values Every time we refresh the page and we're interested in the value of the quick text and quote author key and we're gonna go back to the code and you're gonna be able to see that inside the Jew blocks. In the case we have valid Justin Data. We're gonna create this variable. And we have this convenient class with a swift, which is and is just on serialization that allows you to parse through Giessen data. And we want to return the value on the keys, quote, text and quote author that we're gonna assigned to these two variables before passing them to the completion handler that we're going to join the main cute because every i p a cold is done on the back threat. So we don't need to go too much into details with a P. I call how we parse data. It's just important to know how we can get the data from the Internet and how we can apply it implemented in our code in order to display on up. And finally, in the case we have in vestiges inquiry. So that's gonna be the next block of court, which is gonna run in catch. I'm gonna show you next how to use these data that we get from the A p I coal. And we're gonna finish to complete this function, which is said quote data in order to display the quotes on up. And that's gonna be in the next video. Listen. 10. Displaying Quotes - IBAction: so we're going to start building our application. So we're gonna go inside this function set quote where you can see the commenced quotes, and we're gonna update the values for those labels with the date I returned by the A p I. So we're calling this function, get quick data on an instance of data service. So remember that this is where Richard the FBI calls, and we're gonna return the value for the court and an author, and we're gonna start with quotes. We're gonna write self quote label and update the value of the text property with quote. So they stuck with that. We're going to say, building room. And also, in order to be able to see if it's affected, we're gonna need to update also the idea Action for this button. Random quote. We're gonna lengthy. I be actions to the random quote by clicking on the empty circle, press control in drag, and we go sub dates the value of the out property off this quote label in order to actually be able to see that quote every time repressing the bottom. So we're gonna run this and they gonna be able to see that every time your present, the bottom random quotes, we're gonna have a new quotes generated and displayed on the up. And we're gonna do the same for the author. So we have these other commence where we're going to write an optional bindings, and national biting is a condition and an assignment at the same time. So if the condition is true, the assignment is gonna be effective. So we're going to write the Constant eight author, which is gonna be a new consent to which we're gonna assigned the variable author, which is the date I returned by the A p I under the condition that the data is valued from the Jason from the A P I call. And then we're gonna assign these new Constance to the text property off the author label. So we're gonna try that begin a built and Rome, and we're gonna also change the value of the Africa pretty of this label in order to actually be able to see every time we click on the bottom. So let's click on random coat. We're gonna be able to read a different quote and a different author every time repress cool the next thing we want to do is just to add some extra informations for is just for the appearance. We're gonna add some quotes, do the quotes label. First, we're gonna need directory, right a string, and in order to add variable to be able to add a variable to a string, we need to use interpolation. And this is done by using backslash and Prentice's. So this is what we call interpolation in Swift. Also, we're gonna add some actual quotes, and in order to be able to display them, we're gonna need to escape them by using the backslash. So the backslash is in order to escape so swift. Understand that this is an actual strength and we're gonna just saying for the author we're gonna add quote. But that's just to indicate that this is a string and we're gonna interprets we're gonna use interpolation in order to be able to return the data. So the value of this actual variable on the screen we're gonna build and run, and they're gonna be able to see that now we have a quotes with quotes. Next to what we would like to do is allow to get a default value every time we get an empty string, which can happen sometimes when you work with Justin data from the Internet, you may have either in value Giessen or sometimes no value. In that case, we could have empty string for the authors. So we're going to do the comparison by using the double double, equal signs and check if it's empty. And in that case, if it's empty, we want to return a note. So that's gonna be this strength. So we're going to say that and we're gonna make a test. We're going to see if we can actually renda M'lee generate a quote with an author, which is actually, you know, with the Nemesis String. And there you're gonna be able to read a known and here you what we see is mainly what we look for. It is by a known author 11. Alpha Changes: So we have a nap, which is up and running. So every time we press on the button, we haven't you cooked, displaying each time and would like to add some enhancements, like having a smooth fade in and out effect every time a person the But So we're going to start to buy updating Thea offer already interviewed Low to by putting it back to zero. So it's gonna be showing just when we press on the button and we have these functions that's already available, ready to use for fade in and out at the bottom of this foul. So if you controller and this is where we're date the value of the property, Alfa. So when we fading, we want the authority to be one and zero. When we call fade outs, every gonna first call fade out. So at the beginning of the function, said quotes in order to fade out. So the quotes first to fade out the label and then we're gonna make we're gonna call fate in in order to display the new quotes every time impressing the bottom so there's gonna be fade out first to fade out the label and then faded again to switch to the new quote. That's pretty simple. We're gonna try that save and then building run. So now it's invisible. We're gonna be able to see the first quote only when repressing the bottom. And here you go. So and this is happening, happening concurrently. So first fade out and then fade in. So the result is for the smooth. You have been this fading and out effect every time you present the random could, but and the final touch will be to update the background color every time repressing the bottom. So that's gonna be the final touch in this application. And we're gonna use this function, which is get random color, which is available at the bottom of the fall. You got first. So you're not sure what's going on with the random function? If this is the first time that you're using it, we're going to see that together in the next video. Listen, 12. Random Colors: in this last video. Listen, I'm gonna walk you through this function which is get random color that returns a value of type you y color. So it returns the result off this function your eye color, that's X four parameters. And if you are familiar with the RGB colors, they normally check a value between zero and 2 55 In that example for I west, we're going to return a value between zero and one Internet to return a call it and for the last perimeter Alpha, this is to adjust the capacity. So by using 0.8, we're going to get something which is slightly transparent, not for the opaque one would it would be fully opaque. And we have those three constants for random, red, green and blue, to which we're gonna sign a CJ flowed value. And we're gonna use this function art for random, which is a built in function in swift, very convenience and which ever value that we pass as an argument, it's gonna meet the limits off the number that we can generate, then return assigned to this constant. So in that case, we're gonna have every time, each time a value between zero and 2 55 assigned to this constant, then assigned to the perimeter as a value to the perimeter. Off these function your white color. Then it's gonna be returned to whichever property on which we call dysfunction. Get random. Call it. So I think that this is always better showed than explained. So we're gonna go straight call dysfunction and assigning to the background color property of the View. So now we're gonna update the value off the background color in the view by calling this function self get random colors. So that's gonna be each time that would switch to a new quotes. So all of that is gonna happen together, we're gonna save build. And Rome, we're gonna press and random quote, and here we're gonna be able to see a new background corner every time you press on the bottom. So that's pretty sweet. Accidents 13. Overview: in this part of the module, We're gonna apply everything that we've learned so far. So we're gonna look at you. I view animations and work with Parlamento such as duration and delay. And we're gonna be learning also new stuff, like key frame animations, easing animations and option perimeters. We're gonna use spring animation, and that's gonna let us customize the animation a little bit in order to add more flexibility and have more control on the animations. So we're going to see all of that in action next. So let's have another view of the projects fall. So on the left, you have the storyboards who have more than one few controllers, and on the right, we have the view control. So we have three outlets. So first we have these continue buttons. So that's for the 1st 1 Then we have the you I image you that six full screen and the container where we're gonna be displaying messages. So that's gonna be messages that we're gonna have rotating, fading in and out to display informations about a Spotify like application, and here re initialize the story messages with a string object. So that's gonna be the messages string messages that we're gonna be using to display on about. So let's run and build to see how this looks so far. So you're going to see that for now. We just have these great background color view with the sweaty find logo at That's up. We're gonna be adding a dimension that's gonna be in the next video Listen. 14. Blur Visual Effect: Before we begin with the visual effects, I'm gonna show you the view hierarchy. So on the left, you have this panel that you can collapse and we're going to see the different outlets that we have on our view. First, the background image and the visual effective you and we use this object to create the blur effect. So I'm gonna show you how you can actually, at these to your storyboard. So you're going to search in the objects library for visual, and it's gonna show up. You have visual effective, you with blur that provides a blur effect. And to at this one you simply drag it onto the view hierarchy like so So here you go. So now you have this visual effects. I'm just gonna keep the only one, because that was just with the example as to help to add it. And on the right, you have the attribute, inspector, where you can specify the blur style, and in that example, we're gonna use dark. You could also use extra light or light, So let's move along. So now we're gonna go back to the view controller. We're gonna start with the animation and you're gonna go to view did appear so writes inside the first block animate with duration. So this is where you're gonna create the animations to display, to fading, to make the background image fading. So we're going to update the property value off. Uh, we're gonna any made from 0 to 1, and we're gonna do the same for the continue button that we see in the storyboard. So it is that there, when the view well appear and when it appears, we want it to any mates from 0 to 1. So we're gonna update this value from 0 to 1. Here it is. So we're going to save this and see the reels. So once the view appears, you're gonna be able to see the image smoothly fitting in and the button as well. So what we would like to do as well for the bottle nous to see a slide up effects like the button moving up slightly at the same time. But this is fitting in. So we're gonna use again the same self continue button outlet, and we're gonna change. We're gonna update the why Origen. So the position on the Y access so that's gonna be self continue. But then and that's gonna be center. And what for? The y Axis, Vertical e. So we're gonna use minus and equal sign, and we want to de Crimmins of the value by 30. So you're going to see the button slowly moving up while this is fading it. So we're going to see the result. Build and run. And here you go. So now you can see that this is slowly moving up while this is appearing on the screen. So that's pretty nice. We're gonna continue to customize this animation than this time. We're gonna also use the delay perimeter and spring animation interviews. Creates the slights, bouncy effects. We're going to see that together in the next video. 15. Spring Animation: So now we're gonna continue to customize Thea animation of these buttons. So we're gonna use the delay perimeter in order to allow the animations to start slightly later. When the view appears. Also, we're gonna use spring animation in order to at some flexibility, to control the animation. And that's gonna be the parameters such as using spring with temping an initial spring velocity. So let's start with the delay perimeter that we're gonna add right after the duration. So right now the duration is two seconds, so that's gonna be delayed. But lower case and we're gonna use afloat as well. So that's gonna be the report twice. So that is an Ennis time interval. And we're gonna continue with this other parameters that I have just introduced to you, which is using spring with damping, and that's gonna allowed to create these bouncy effect, and we're gonna use a value of 0.6 right in the middle, and then we're gonna use also one which is required. So whatever you use using spring with temping and this is initial spring velocity and for this one, which is gonna use zero, So we're going to save this Also, we have this error which is indicating that there is a missing perimeter and ex code is saying that we should also add the option sperm enter even if it's left empty, we're gonna use of square brackets. So we must always add this burner. It's spurt of the combination for this function. So no, we can save building run. We're gonna be able to see that the animation of the button start how of a second after the image the view appears and we're gonna see that this is gonna be slut league bouncing up and down slightly. So it's not very. It's very subtle. So we're gonna change the value to make it more so. The lower, the value of the temping, the bouncier, the effect is and we're gonna change also the velocity you're going to see a little bit different. So it's a little bit stiff near the end of the animation. So we're gonna change when you play with animation. You must always play with the values, tweak a little bit. So we're going to change damping and the velocity. And this time we're going to see like a more pronounced bone. See if it. So that's it for this part Off the visual effects of the animation. So what we're gonna be doing next is working with this function, which is marketing messages. It takes one index. That's an integer is a perimeter. And what we're aiming for is to display different messages on the screen, make them rotating. And we have these array this outlets. So first this outlet, which is a label which is empty for now. So we're gonna use the string subject that we have added to the messages Murray and we're gonna be displaying displaying them one after another. We're gonna make them fade in and out, and that's gonna be pretty nice. So we're gonna be doing that in the next lesson. 16. KeyFrame Animation: So we're gonna work with this function, marketing messages and inside we're gonna have multiple animations that we're going to run in sequence. So we're gonna use this function that we call in the U I View class as well. And it is animate key frame with duration. And it has the same characters as for the animate with duration that we used in previous demos. So we have first the duration. So that is 10 seconds. We have the delay and you have options as well. So that is empty. We use the square brackets and we also have the animations closure. So this is where we're gonna add the key friends. So we have to at the moments. So that is at key frame with related starts time. That's pretty straightforward. So we have the first character, which is to indicate when we want these animations to start in the animation sequence compared to the 12th and the related duration. So that's going to be related to the 12th duration off the entire animation. So in that case, that's gonna last like 10 milliseconds for the second animation. The second key frame we want we wanted to start nearer to near the end of the 10 seconds and to last five minutes seconds. So that's gonna be pretty quick. And we said earlier that we have in outlets which is named message and want to update the text poorly with the message that's gonna be a string. And you see that we have defined this constant message, which is gonna be a string that we're gonna assign to it. And that's gonna be a string object objects at a specific in this position. So you see that we're using this index perimeter, and we're gonna pass an index Meritor, which is gonna be an insurgent through this American ING message. So we're gonna be seeing how we can actually use that. So first, what we're gonna do is allow this message label to be visible to fade in, actually, so we're gonna update the Alfa priority of that's and so we're gonna go to the top. So that's gonna be the first step in the process. So we're first going to allow this message label to be visible. So when we started the animation, so this is at first invisible when the page loads is visible appears. So we're gonna update to Huff 0.5. So it's gonna be slightly transparent. So that is a value between zero and one. And we're gonna set it back to zero when we finish the animation. So that's gonna be the sequence final. So the sequence of animation is targeting this outlets, which is empty for now. So what we want is to display messages one after another. So we're gonna call this method. So once the animation of the continue button ends and that's where we're going to update the completion perimeter So we're gonna add their curly braces to add this closure. And inside we critical self marketing messages and it takes one burner, so that's gonna be an integer order to indicates a value. So that's gonna be the index that we're gonna use for the first position in the area. So that's gonna be the first message. So we must always indicate, so if it's truthful, so that's a Bogan parameters. So we're just gonna use underscore, so that's also acceptable. And once we pass the index, we're gonna be able to refer to the index position off the messages for rate in that case, we're gonna be displaying the first messages. So we're going to run and build. You got to see. That's once the animation of the button is finished. We're gonna have this first message music for everyone. So that's gonna last 10 seconds until we reached the end of the animation. And then it's gonna disappear very quick, like five million seconds. So the next step and the ammunition will be to irritate the messages one after another. So we're gonna update as well. The completion parent, er that we have in that function so animate key frame restoration, we're gonna call the same function insides. But before that, we're gonna need to update the index value because obviously we want to display the next message in that messages array so that that's gonna be index plus plus in order to increments by one each time. And then we're gonna pass this new index value to the marketing messages. And because we have only four objecting that array, we want to make sure that we don't go outside of the bounds of the array. Otherwise Thea will crush. So we're gonna check if the index is equal to the count number off the object that we have in that array. So that's gonna be account minus one, because every rate is zero index. So that's going to start at zero to for the last object to be three. So we want to check if the index is equal to three, then reset the index to zero. So once we've checked that the index is not equal to zero, then we can increments by one each time. And then this new whichever value that we have a signed shoot index, we re best to the marketing messages function and then gonna be able to sign the new string value to the message label. So we're gonna try that. First, we're gonna get the first message, so it's gonna be fading out, and then we're gonna pass on to the next message Message number two. That's gonna be another 10 seconds and then fading out. And then we pass on to the next message. So something which is a little bit off is that the further we go, the further down the message is going, and that's because I have this line of code right here. So I want the labels to be going down 30 pixels further down every time we call this method . And that's gonna be another sequence in the animations that I must add right in the middle . So we're gonna have another key frame, so right here, and we're gonna update the value off the white on the Y axis for this message label. And we're gonna allow this one to start at this time in the sequence of the key frames. So that's gonna be 10 milliseconds leader and for the related duration, So that's gonna be five minutes sick, and so that's gonna be fairly quick. So I have this key from animations function, which is already ready, and I'm going to remove these commence. So I just need to call these all the function, which includes another animate with duration. So that's gonna be another animations which is added in jerky from, so that's gonna be very convenient. So I'm gonna call this one, because what I want is for every messages to go up. So we're gonna have the effect of the message going slightly going up while this is fading it that we're gonna call self key frame animation and also so while the animation is so while the messages invisible, we're gonna also then again allow the message label to go down in order to keep going up and down so it doesn't just keep going down. It's gonna go up, then down and then up again. But that happens in the background. So when it's not visible, so we're going to see how this looks. Now we're going to see the messages displaying and then slamming up every time it appears the 1st 1 So that's pretty sweet. You're going to see the same happening for the second message. Here you go. 17. Animating the Login Form : to complete this animations project. So we're gonna be working on the Logan form. So you're gonna go on the lugging view controller. So you have two outlets. So first, the email filled and password field. So what we're gonna be doing is animating this looking form in order to and made their appearance. You're gonna see that when we launch the stream. So the app we're gonna click on continue. You're going to see that they're not visible for now. So we're gonna any mate. Their appearance allow them to appear like sliding from the left of the screen in order to go to the center. So for that, we're going to use again in view. Did appear animate with duration where you see the commence, we're going to start with email filled. So what we do to begin with is positioning this fields outside of the bounds of the screen . So in view, did load were using center X first on the email filled, and we have signed the value of you bounds with. So we use the minus and equal sign in order to determine this value and assigning at the same time to the exposition. So that's gonna position this field outside of the bounds of the strength. So that's the same also for the password filled. So we're gonna update this inanimate with duration. So when the view appears so we're gonna copy this line of code and then paste it right here , refer to its with itself and also updates. So this one, by using plus the plus sign instead and that's gonna allow to position this filled. So at the center of the screen, we're gonna do the same old sofa password. So that's it. We're gonna run the up, you're gonna be able to see that. First, we're gonna have the splash screen. Then we're gonna click on continue and we're gonna have So those two fields appearing Zehr sliding from the left an introduction make it less stiff. So at some originality, you can update the value of the using spring using spring with damping, and that's going to allow it to create like a shaky, bouncy effects. So this time, when you're going to start the up, we're gonna be able to see that when you click continue, we're gonna have that effect. So that's something that you can achieve by playing with the values off the using spring with damping and also velocity. And remember also that the lower the value off the using spring with damping. So the more pronounced so the less subtle will be the bouncy effects.