iOS Animation with Swift V - Weather App | Sandra L | Skillshare

iOS Animation with Swift V - Weather App

Sandra L, Front Development

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

      0:49
    • 2. What You Need

      0:34
    • 3. What You Should Know

      0:51
    • 4. Project Files

      2:27
    • 5. Api Calls & Weather Forecast Data

      2:51
    • 6. OpenWeatherMap API Documentation

      4:21
    • 7. Get Weather Data (JSON response)

      3:57
    • 8. Table View

      4:39
    • 9. Animating the Table Rows

      2:11
    • 10. 5-day Weather Forecast

      7:05
    • 11. Display Date

      2:47
    • 12. Fade In & Out Transition

      2:57
    • 13. Cube Transition

      2:42
    • 14. Cross Fade Animation

      7:26

About This Class

This is the final demo of the iOS Animation with Swift 5-part serie.

In this lesson, I will walk you through the creation of a Weather App tutorial with  tableView rows animation, crossfade and cube transitions.  

We will use new techniques of transform, cross dissolve and fade animations to take your experience with iOS UI to the next level.

What you will learn

  • CrossFade and Cube Transition
  • Animating TableView rows
  • Display date with NSDate
  • display weather forecast with API calls (http://openweathermap.org/)

What you will build

829e590d

Other Topics in this Series

 

 

Transcripts

1. Intro: welcome to the final part of the IOS animations with Swift Siri in the Section one, you learn about the basic you animations, MP eyes decreed, move fade animations and also to work with easing options Spring and give firm animation. Then, in parts two and three, we dived into higher levels off the you like It methods to animate few layers to create cool visual effects, in part for with custom transition and custom sick way, we created this nice picture gallery within advanced user in Directions design. So finally, in this last part off the iris animations with Swift Siri's, we're going to use new techniques off transform, cross dissolve and fade animations to take your experience with Iowa's user interface to the next level. And I'm gonna walk you through the creation of this weather up. This lesson is part of the five part series IOS Animations with Sweets 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. Project Files: hello again. So we're going to start with our new projects, and I'm gonna get you to go to your starter products file. We're gonna go to with it up, then you're going to select Start. There you go. So you're gonna land on the main store board and here you're going to see that we have a few. We have many outlets. We have a city name, a label for the temperature, Another one for forecasts. And we also have a table. You. So we're going to use this one to display information about the weather. So we're gonna go to the controllers group. So this is where I keep all the code. So all the fouls code and it's gonna be very heavy for that demonstration. In terms of code and details, you can see that we have lots of code and also functions. We're gonna look at them in a moment. So here we have all these outlets that we're gonna be connecting to the storyboard. Also, these variable. So that's gonna be for the city data and because it's gonna be a lot of codes in order to keep things well organized and maintainable, it's always better to keep your code in separate fell. So this is what we do here. So first, we have a few methods to first mode the weather data, then display data display date. Sorry. So there's gonna be displayed date. It's going to take a string as a perimeter. And we haven't alert dialogue and also the table. You did her source in order to day how we want the table of you to look to look like and for the data. So we're gonna be working within the P I. So this is where we're gonna be managing the FBI calls, and you see already that we have lots of code in order to collects many data, lots of data from the FBI and then display them back on the application. So we're gonna be handling that. That's gonna be the first step. Then we have also another foul where we keep all the functions to run the animation, the different animation effects, where these up. So this is where it's gonna be handled. We're gonna have cube transition days. Which two? So that's gonna be a fade in fade in and out. Effects forecast switched to, and so forth. I totally understand it. If it seems confusing overwhelming at first I'm gonna walk you through step by step, introduced to build this up. And we're gonna be starting with how we can download the data from the FBI. And that's gonna be in the next video. I'm gonna walk you through step by step. 5. Api Calls & Weather Forecast Data : So I was explaining in the previous videos that this is always better to keep things well organized and more maintainable by keeping your code and separate fall. So this is what we do here. We have an extension of the view controller, and it's his view controller data. And this is where we're gonna be handling all the data, all the FBI calls in order to get our data for the data down note. And we start with this function, which is get city data and it takes two parameters. So that is a strain. And we have a completion handler, which is gonna be returning injury off CD objects. So the CD model that we haven't looked at yet we're gonna look at this file, which is city, and we have multiple parties for that city objects, and we're gonna be prompted to create this city, object with the associate, its properties right here. So when it's gonna be time to create our city objects, so we're gonna go back to view controller data. So inside this function, we have these constants, but we're gonna use in order to if, in the case you'd have a CD so we'll see how we're gonna use this function in the moment. But in the case, you have a city like New York, for example, that comes with a space. We're gonna have these function, which is very convenient string. By replacing occurrences of string, we're going to replace any space by no space. So we're gonna be able to have econ Captain ated results and used this one as a euro for the next step. So we're gonna be using these euro. So we're gonna need a key right here. I'll show you that, and then we're gonna call this method, which is data task with the euro on the shared session. So we're going to open a your own session, and it comes with two parameters. So that's gonna be the euro that we have just defined right here and then accomplishing handler. So that is the part which is which is important because it's gonna return the data that's we're interested in and the response and also an error if there's any error. So I'm gonna show you before we go to this part, which is where we're gonna actually collect the values for each key and then display so create our city. Objection then displayed on our up I'm gonna show you first these euro which is gonna be our FBI. So here, you're gonna be able to sign up. So I'm gonna let you do that. And we're gonna be interested in this one because we want to actually use a five day weather forecast for these for these applications. So we're gonna go to the A P I duck. So this is always where you're gonna be starting every time you want to start working within the P I. So here you can see that you can do a search by city name, so it gives you an example of how you can geo query your A P. I call like so. So we're gonna look at this example. So for now, it's invalid because there's no I p I key. So we're just gonna come back, I'll show you another example. So we're gonna be able to see how is the Justin Fermat's anyway? So what you gotta do is first register and then we'll take it from there 6. OpenWeatherMap API Documentation : So this FBI is really cool because it comes with a free plan and that allows you to make 60 FBI calls a minute. So in order to get started, you're gonna go to get a P I key and start you're gonna be prompted to sign up. So I'm not going to be doing that because already have a key. So as a member, you would be able to go to my home and then under set up, gonna find this sections where you're gonna be able to get your P I key. So just highlights and then copy this one and then you're gonna go back to ex code. So in view controller data, you're going to replace this segment of the euro with your actual A P I key. And then you're gonna be good to go. So I'm gonna show you an example off an A P. I call that we did for the City of London right here, and we're gonna be looking at these key, which is list, and this is where you're gonna be finding all the data response for the five day with the forecast for every three hours, and that is a lots. Actually, we're gonna be needing just five of them, so that's gonna be one for every day. We don't need to have to return the five the reserve forecast for every three hours. So I'm going to show you how to parse through just on data in order to return just five of them. So here you go. So let's look at some more details. So in that, so in one of them. So here, we're gonna have, for example, that temperature and that is a weird units. It's actually killed in units. We're gonna be converting this one into Celsius. You also have weather that we're gonna be looking at. So we're gonna use description and also clouds, wind speed and the rain volume. So now that we're all set with the A P I CO, what comes next? So we want to be able to get the data, use it and return it's to wherever we need. So if the response is successful, we're gonna be able to run this code inside, do and we're gonna have these ns dictionary that we're gonna be able to get by using this class that's gonna allow us to parts through the Justin from it. And from here, we're gonna be interested in the results from this key, which is list, Remember that we're looking at this in the browser, so we're gonna get the result from this key, and that's gonna be a collection off multiple dictionaries. So we're going to store this one in that Constance right here. So that's gonna be Data's. And also we declared these array, which is gonna include CD objects, so that's gonna be right here. So we're gonna be creating for every data that were returned one to create a CD, objects and then when it's created, we're gonna pen each of them to thes every that we have declared very dependent. That's gonna be city. But before that, we're gonna have that for you that we're gonna be running in order to collect the data for each of this dictionary and then a signings to one constant. So we're going to see what we're gonna be doing with that constants soon. And also, as I was explaining, So we're interested in just five days for guests, so for one, for guests for every day, So we're not going to need to return the result for all the dictionaries we're gonna parse through the data for every eighth day. So that's why we use these increment ations right here. So that's gonna be plus equals. Sign eights. We're gonna be in careening by one. We want to just keep through every eighth that we're gonna skip seven days and then go to the Nixon that's gonna allowed to return five results. Next is what we do is working with the different values that we have for the keys. So here we return the results as a dictionary of datas for every index. So we're going to start with zero, and then the next will be eight. So because we want to return five of them and then from city data, we're gonna get the value from weather. So let's go back to this review that we had in the browser. So let's look at that example. So that's one. Whether results, weather forecasts, results right here that you kept a collapse and then expand again and for whether you could get the information from Maine or description that we're using as well. And once this is done, you're gonna create your city object. And we're gonna pass each of this consent as the value for every poverty. Once this is done, repress its were panicked to the rate, and we can then pass it in the completion 100. What we're gonna do next is see how we can actually use this data interview to display AIDS in our and that's gonna be in the next video. 7. Get Weather Data (JSON response) : So now we're gonna go on the view controller, and you're gonna start to see how things are connected. And we're also going to start to write some code, so you're gonna go to beauty. It appear. So here we have these city constants to which we have a signed this drink Paris, and we have this line of code below, which is disgrace city weather. And this is a function that we have declared right here, that Texaco one parameter, which is a straight and that is a city. So we're going to remove the comments, signs and pass as a parent, the city consent. So let's see how this works inside display city weather. We have another function that we call load where the data and this one takes also a permit , er which is the same city. So we're gonna skip that. We're just gonna go straight to load with the data and see what happens inside. So we have this city parents that we're gonna use to then pass to dysfunction, get city data, so that's a lot of step. So this one, you're probably already familiar because we looked at that in the previous lesson. And this is the function that we used to do our epi I call and this city straight. We're gonna use this one to pass to the euro, and that's gonna be interpolated Internet to return a year Well, for the corresponding city. So we're gonna do an A P. I call for the City of Paris in that instance, and then you're gonna have, of course, you're a P I key that you must not forget. So back to the view controller. So what we're gonna do is then we have the completion handler, which is the array, and that's gonna assigned to self forecast. So we're gonna have a forecast for five day weather for guests for the City of fairies. So if you remember, if we go back to the download the data, we have this hurry, which includes CD objects, and we're going to create five day weather forecast for this year. Fairies and each of them is gonna be depended to this curry, and that's gonna be then return as a completion 100. So this is this array that we use as a result off the five day forecast. So this is the data and then we're gonna sign this to these forecasts, which is gonna include also CD objects. Then we're gonna use this one to then assign to the outlets that we have on our replication and finally display the weather data. So I put commencing order Jamaica things more in this datable Zaheer display, whether for one day, which is today. So that's going to start for to date first. And we have all this lines of code, and that corresponds to the outlets that we have right up here. But we're gonna need to connect to the layout to the main story board. So let's start with a CD name we haven't then forecast. And each time we're going to use actually, the first results of that we're gonna have in that a rate inside forecasts, and that's gonna be several in order to get the first. So the objects at the index position zero. So we're gonna go to the main story board and open the main. So the assistant editors. So we're gonna go to Maine storyboard to have it on one side and make sure that we connect the outlets to the corresponding variable. So first we have seating A. So you're gonna click, then drag over to city. We're gonna do the same foot temperature. So that's gonna be this one. Then we have forecasts, and that's gonna be for that label. And finally, we have dates that we could leave for now, we don't need to use the date. It's gonna be something that we're gonna be doing later. We have another functions for the display date, so that's gonna be next. So now what we're gonna do. So now that we have the A p I call, we're going to save and then we're going to run it, and we're gonna see how this looks. And here you go. So that's the first information that we get from the city of Paris. So it is 10 degrees with a clear sky. Next, we're gonna have also informations below that's gonna be displayed with the table of you. We're going to see that in the following video 8. Table View: So in this part of the demo, we're gonna look at that section where we're gonna create. We're gonna actually complete the table view, and we're gonna use that table of you to display information about the cloudiness, wind speed and also rent hole you. So we're gonna go back to the view controller so below you're going to see that we have the table. You did her source methods that we're gonna be completing. But first, we're gonna be still working with the data, and we're gonna be working still with displacing the weather and also load with the data. So this is where everything starts. So where you do the FBI call and you see here. So with these these three lines of code So this is where reassigned the results off the forecast. So we have the array that now includes five day with the forecast and at index positions ever. We want to return the result for the cloudiness, so cloudiness, then wind and rain, and we're gonna return thes three strings. Do this new array. So you see that we declare these Nouri, which is gonna take three string objects, so that's gonna be assigned to that parade and if we go back, so I'm just gonna do clean to remove all the warnings all the way. That's confusing. So we're gonna go to display city weather where we call this function load with the data and this is where we're gonna Then then pass this array right here. So we're going to start here, Let me take you back to the top. So I just want to show you where we have declared this A Raciti Data's with string objects . So we're gonna use this one and then right Self City Dida's. And that's gonna be a array. So the one that we're going to return from the completion handler and it's going to take strings as objects. Carrie, about now, let's go to the table view data source. Smith out. So we're gonna indicate so how we want the table of you to be displayed with the City Data's. So we're gonna go to number of rows in section, and that's gonna be so the number of objects that we have in their Raciti data. So that's gonna be sited eight as count Next, we want to configure the cell, so we're gonna go here and we're gonna start by creating this consenting. That's gonna be the result of CD Data's at index bath robe, every Coke and next we want to then update the data label text, poverty and was slain data as stream. And also, we're gonna update the weather icons. So we have a set of icon that we have prepared some gonna actually show you these array that I have declared at the top, and that's going to take strings as objects. And here we implement that array with cloud white, brain white. So let's look at view sets that we have for that application. So we have different icons available wind speed, then rain. So this one is the black rain whites and cloud white. So this is what we're using. So we're gonna be able to display that as icons. So we're gonna sign to one constant, and then we're gonna use Icahn's being corresponding and expect index bathroom and finally , on the custom cell, we're gonna call with the icon and then image. And for the name of this father is gonna be the icon that we have just define. We also have the weather information And that's the Serie that's we have declared the right dead. That's up. Break your So that's Klodian Esther in volume. And so far so I'm just gonna right cell whether info and that's gonna be text. And we're gonna pursued the same way. So we're gonna take this array and a sign. So whichever string object that we have a big corresponding index path group so one that steps. So when your work with the table view east to relook the data on the table, you So that's a built in method that comes with the table of your protocol. So you're going to write. So inside this place city, whether animate table, you're gonna right here self table view, reload data, that's it. So we're going to save, and then you're gonna be able to build and run, and we're going to see how this looks. There you go. So now you can have so the information's of cloudiness, the rain volume and also the wind speed for Perry's 9. Animating the Table Rows : So now we're gonna create an animation with that table view right here. We're gonna make it sliding up one after another when it appears so we're gonna go to that function animate table that you're gonna find so right after a table Jupiter source. So that's gonna be any meat table and inside this function, So you see that we're gonna reload the data off the table view. Also, we're gonna sign to these constants. So the number which of ourselves that we have visible for that table view and we're gonna also a sign in another Constance of the height off that table of you. And after that, for every cell that we have, we're gonna create a transformation on the translation transform. We're gonna use the transfer method CGF entrance Romek translations to affect the position , and that's gonna be on the Y axis here. So we're gonna use this table height constant in order to update the position on the Y axis off every cell. Next, we have another loop in order to animate. So the change from so invisible to visible we're gonna have an animate with duration function inside, and we're gonna any mate so each of the cell. So you see that we looked through all the cell visible for every millisecond. So we're gonna animate them one after another. And we're gonna use also using spring with damping, so spring animations in order to add some bouncing effects to the animation. And then we're going to set the translation back to zero. So meaning that every cell is gonna go back to the original position and that's gonna be back to visible. And you see that we animate them one after another. So here we have the index, which is initialized zero, and we're gonna increments by one each time. So here that this is where we're gonna add the delay, so they're gonna be animated, so one after another with an additional delay. So we're just gonna be running this method. Just see how it looks. So we're gonna go to this animate table right here where we're reloading the data and we're gonna call self any mates table, and here you're gonna be able to see the result this time. So we're gonna load again. Here you go. So now you have your animation pretty sweet 10. 5-day Weather Forecast: so far, we are displaying just one piece of information on that's application. So we want to be able to display one after another the five day weather forecasts for a specific see. So here we're gonna have a function that we're going to call, and that's gonna be changed with the data and we're gonna go to that extension. So where we're gonna be handling all the animation and we're gonna look at this one, which is changed weather data. So that's the first function we're gonna be looking at. It takes two parameters of first, the most important once that is day and that's gonna be an integer. And that's gonna corresponds to the index position off an array, which is gonna be cells Farkas. So when we're don't doing the A P, I call and when we have the five day forecasts of the five city objects, we're gonna be able to display so each of the information one after another and we start with the 1st 1 which is a index positions ever. We want to go to the next one, which is gonna be the position one, and this is what we do here. So with this perimeter. We're gonna pass this integer to these array in order to display. So the next weather forecasts for the next day. So we're gonna look at weather info and City data, so it works very similarly to what we have into controller. So we were assigning so to each outlet, the results off the sales for guest array. So first index position zero, and we're gonna go then to the next one. So when we go to the animation, when it's gonna be time to switch to the next one So if we go back to do control, you're going to see that this is very similar to what we've been doing. So also followed with data. So we use whichever data that we've been able to store to sell spur guests to every outlets of her city name, then her cast, and also the temperature and also for the city data so that we have for cloudiness, wind and rain volume. So we're gonna call this function right here, so change with the data and we're gonna pass, So that's gonna be this constant that we have right here. We're gonna pass this barrier and we're going to start to is there? So we're gonna build in run, Although you're not gonna be noticing any difference because we're gonna displace of the same date out. So that's gonna be for the first weather information that we have in that array. And what we want to be able to do ultimately is to be able to reject through the difference the five day with the forecast that we have in that Marie. So for that, we're gonna need to not only call this method right here, we're gonna need to call it also inside the same methods. So in the extension with the function change, where the data. We're gonna call this one right here. So we have some boilerplate code which is available. This one is called This function is called Delay Function, and I'm gonna walk you through what it does. So we're gonna go to view controller and we have this function at the top, which is delay, and it's extra parameters. That is a double to indicate the number of seconds and completion. And that's gonna be the coup that we want to run After the five delays. The five second delay is finished. So we have this pop time constant, and that's gonna be this function dispatches that's going to return. The result of this dispatch time function and the murder that it takes is the moment now which is dispatched time now. So if you keep your finger on option and click, you're going to see that this is the time that or cures immediately. So that's gonna be the time of now, then, with the delay that we indicate. So that's gonna be the time of now with five seconds and then we're going to run this all the function which is dispatch after. So for the first perimeter, we're gonna use pop time, and that's gonna be starting. So after the time that we have assigned to pop time, which is gonna be five seconds starting from now and we're gonna run these functions so completion after that And that's gonna be this function that we want to run after a five second delay. So we're gonna do the same actually, with that option right here, because we don't want the change to happen immediately. Obviously, we want it to start after a five second delay to allow sometimes to read every information and then we're gonna have this function inside as the completion handler inside this closure a year ago. So what's gonna happen is we're gonna have so the first weather data information displayed then after a five second today, we're gonna have a switch to the next day, and that's gonna be zero as well. We could change to want, but which is gonna keep it at zero. Then we're gonna go to animations where we're gonna have again after a five second delay, another change of the weather data and also something that you're noticing. So right here we're using. And if those conditions So we must use that because we need to increments. So the in the exposition of day because obviously we need to switch to rotate to look through every objects that we have in that parade. And for that, we're gonna need to increments every time we do a change. So we're gonna do day plus one, but also because we don't want to go beyond the bounds of the array because we have about four objects in that parade. We're gonna need to verify if the days not equivalents to the highest number on object number of that, A rate. So we're going to do focus counts minus one. And if it's equivalents to the last in exposition of that worry, we're going to reset the integer day to Sarah. Otherwise, it's gonna be implemented to allow to go to the next object in theory. So we're going to start with that enough explanation, which is gonna run to see how it looks. And here we're gonna be able to start with first day and we're going to switch to the next day in five seconds. So that's gonna be longer for the 1st 1 Okay, And then five seconds. So that's gonna be the next America. So that's for the temperature label. We want to be able to change also the information that we have. So you see that we are also updating the information in that function off the city data that we have in the table view. So for each date change that we have. So we're gonna go back to here first. So you see that we're calling self any made to table. We're gonna call this one as well inside the Dele. So that's gonna happen so in sync with this function and we're gonna go also to this one as well and allow also the table you to animates and to switch to the next data. 11. Display Date: So now we're going to display the date on up right here. So we're gonna go to view controller we're gonna find at the bottom of the fell. So these extension for the n estate class. So we have this convenience method which is gonna allow us to return before mats for the dates that we get from the A P I. So first we get an instance of the n estate for matter, and then we get so the date format. So that is year, month, day, and also the time, Although we're not going to be using the time. So a pre go back to the one example of the appear cool. So you receive that This is the date string which is returned from the A P. I call. So we're gonna need to use the string in order to then create a date. So let's go back to the top. We're gonna have this function which is displayed decks. We're gonna be able to create a date from the string that we pass as a perimeter and we're also going to create a date for the dates for the moment off now. So all this code is what we use in order to create. So the specific elements of the dates which are the day so the month index went rigged index and so forth that always returns an integer. And we are using this arrays in order to return actual text for the date. Finally, we have the even pills right here in order to determine if the date is is the dates of today. In that case, we're gonna assigned today to that out plates that we have declared at the top or the dates that corresponds to the weather forecasts. And that's gonna be the weekday, the month and the day. So you see that we have these outlets that we're going to connect to the main story board in a moment. First, we're going to see how we can actually call this method, and that's gonna be right here. So we're gonna call this method which is displayed date and as a perimeter we're gonna pass . So this we're gonna look inside the forecast array, so at index position zero, because this is where we're going to start, and then we could call the property date. So we're gonna call this method from here, but also, we're gonna call it from this extension. So we're we're dealing with the animations in order to allow the change of date every time we changed to the next. With the data information as well, we're gonna need to switch to the next end exposition in the array. We're gonna be able to say to switch to the next day to show that we're displaying the data for the following day. So we're going to say that and then we're gonna run, and you're gonna be able to see that this time we're gonna display the weather first for today and for the next day, which is gonna be centered in March to benefit. 12. Fade In & Out Transition : so here the change between the five day forecast is very dramatic. So you have the date and also the forecast. You see, this is happening very automatically. So what we would like to do is to add animation in order to have the smooth change between the two like you fade in and out effects. So we're gonna go to these animation extension, and we're gonna go further down where you're gonna find this functions, which are day switch to and forecasts switch to and each of them is sticking a string as a perimeter. And what we're gonna be doing is calling those methods so inside change with the data. So we're gonna be using So the data that's we get so actually like this one instead, we're gonna be calling the date and also the corresponding text text for the forecast. We're gonna allow to have a fading and out effect, so every every time we go through change, So we're going to start with date the day, so that's gonna be they switch to and for the stream perimeter. So that's gonna be self for guests, and then we're gonna pass, so we're gonna need to access the weather data information that we have at the specific index position. And we're gonna use day, which is our integer That's not gonna be the switch to but day. And then we're gonna use the property, Which is they in order to be able to display the new string. So at this index position and fade in and out creative, fading out effects, we're gonna be doing the same for pro guests. Wish to You're going. That's gonna be a string as well as a perimeter. So that's gonna be self forecast. And that that's gonna be at the index position that we need to go to. And that's gonna be disk. And this time you're gonna be able to see that when we change the weather information, we're gonna go through the senior later. So the change is going to be happening smoothly from one to another to the next one. So one thing we need to do left is we're gonna go to each of this functions because here we're gonna need to call again, so day switch to first, we're going to call self display date again, And that's gonna be date because we're gonna pass this as a string and prefer guests. We're gonna be doing the scene, so there's gonna be self forecast. We're gonna need to have date. So the expert e of the forecast outlets and we're gonna pass forecast as a parent. There you go. So we're gonna update that and then run again. So now we have updated the animation, and now we're gonna be able to also display the corresponding data. 13. Cube Transition: next, we're gonna continue with the animations we have implemented. So all the data, so most of the animation as well. So what we want to do is to animate this label right here for the temperature and Korean effects off a cube transition. So, like the label flipping on its X axis vertically in order to display the next data. So the next temperature information. So we're gonna go to the View animation right here. We're gonna find this function, which is cube transition, and it takes three barriers. So first, we're gonna have a label, so that's gonna be the outlet so that we're gonna pass as a Mariner than a string and also the direction of the animation. Next, we're gonna create a label. So that's gonna take the frame off this label outlet that we Pasqua's Obermueller. Then we're gonna assign the text that we passed also has a strained perimeter right here after the rest. It's text attributes of that. We're gonna add, like the phones, alignments, coloring, background color and then recurrent an upset, which is gonna be 1/2 the height off the label. And also we're gonna define the transformations and because we want to use to transformation. We're gonna use this function, which is France from come cuts. So we're going to start by the scale, so that's gonna be the full scale. So with for the with and then for the height, it's gonna be hardly visible and for the translations. So we're gonna change this one on the Y axis by using so ox label upset that we have defined right here. So here we defined the original transform settings and we're gonna have date those one inside this block any mate with duration, you see. So first it's gonna be the original transform identity. Then we're gonna update to go to the opposite for the Oaks label upset. So that's gonna allow to create these cube transition. And before we start with the animation, you see that we add this label as a sub view to the super view. And when the animation ends in the completion perimeter, we're going to remove this one from the super view. So we're gonna go to this function where we change the weather data. So this is from where we're going to call this function, which is keep transition for the label parameter. We're gonna use thes temp temperature label for the text. It's going to be the temperatures. A string we're gonna use the one which is very similar to the one that we used to display at first, the data, which is like this. The texts. So we're gonna take the same way through the text property. So that's gonna be this string. And finally, for the direction we're gonna use positive, like so. And here you go. So now we able to any major the temperature label with the Cube transition perfect. 14. Cross Fade Animation: So we're gonna finish with a few extras here. So we have this background view that we're gonna change switch. Every time we have a different data support every five day, we're gonna have a different color. So here, going to see in the view hierarchy that we have this your image, you outlets and it defaults to just one ingredient. So here you can see on the right side that we're using this asset. So this is great. And number two and what we're gonna do here, we're gonna be using different assets that we have for this application. So, for example, for cold, whether we could use shades like Blue Green, like so and for warmer weather So warmer temperature, we could use something like orange, yellow and so forth, something that inspires sunny weather. So we're gonna be doing that. So that's gonna be based on the condition. So we're gonna go back to the animation, fall through the extension, this one, and here at the top. You going to see that we are assigning this string in order to refer to the greedy int. So the name filed the falling off one of the grievance and that's gonna be store to that constant. So that is a string. And then we call that function that takes two parameters. So we're gonna be looking at this function in the moment. So first, these first parameters So that's gonna be the background you, which is our outlet. And second. So that's gonna be to image. And that's gonna be this imagery that we define right here. So that's gonna be a default. So the default greeted that we have in the storyboard and then switching to the next one, which is gonna be this one. So for now, it defaults to one. So there's just one default, so it's hard coded. We're gonna have a condition later on. We're going to find these function right here. So the two parameters so image you. So that's gonna be our outlets that we have in the storyboard. And then the two image. So to image will be the name off the other file that we want to switch to. And so we're calling this methods tradition with view on the U. Every class on this one takes several parameters, so they image you that we pass as parameter from here do you hear? So that's gonna be the background you And then there's gonna be also a duration spirit mirror, so that's gonna be one second then. We also have options for that method, so that's gonna be transition cross dissolve in order to create the cross fade animation effects. Then we have the animations closure. And this is where we're gonna create the animations in order to transition from whichever we have asthma set to this one, which is gonna be the new ingredient. So that's gonna be the nuke reagent that we're gonna sign as an image poverty to image you , which is gonna be the background you. So let's go back to the top so we can actually understand. So how it works when actually when we actually call this method. So fate image you. So here we have the background view that we passes a pyramid are so that's gonna be outlet . So we have a current grade ends right now that we saw as a default. And then when we switched to the next one, which is gonna be to image, we're gonna have a cross dissolve animations going to the next one, which is gonna be this one image you, which is great and 12. So we're gonna be transitioning. So you're doing a cross fade animation from the greatest number two to create one like so? So what? We wanted you next East to allow to randomly select Rick Regent based on the temperature off the city for a day per specific day. And for that, we're going to use another function, and that's gonna be this one below, which is gonna be random background view and this one text a permanent, which is a bull. That's gonna be true false meaning that we're gonna be checking if the temperature is at a certain level, Then we're going to return with the true falls in order to return so either called or hearts. So we're gonna have a selection of ingredients for the cold weather and another serie of greetings for the hot weather and if not called, so if it's not cold, we're gonna is then select a sign an index for So I'm doing a random so generates we're gonna generate to random index first for the specific. So the one that we want to select, depending if it's true or false. So that's gonna be the cold great and counts. So we're gonna be generating a random index for the number off object that we have in an array. And then we're going to return an index and passage to the Cold Reagents array and then assign injury as a string to the great invariable that we have right here. So we're going to return anyway, Agrigento right here. So with this function, we're going to call this one and then assign it do another constant and then passed this Constance to this function right here in order to apply the new image, you the new ingredients. So we're gonna go step by step, We're gonna write some code, because that's gonna make more sense by writing some code. So what we're doing here instead of heart code heart cutting the image you were gonna be writing So this function so that's gonna be random by ground view, and we want to return a true or false. So we're going to be writing a statement, so that's gonna be forecasts. We want to get the temperature for a specific day. So every time was since we switched in a new date, we're gonna be looking at the temperature level. And if this temperature level is more than 20 is gonna return either true or false, so we we may expect So right now, this is more like spring, so we may expect to return something more like false. In that case, if it's falls, we're gonna have cold temperature. And if it's cold temperatures. So if we go back to the function and what happens if that's function is that because we expected to be false? So that's gonna be, if not true. But that's gonna be this bull right here, if not true. We're going to run this goat. So first we're gonna generate a random integer, which is gonna corresponds to the number of objects that we have in the cold Radiance Arabe . And then we're gonna assigned this random integer to index and that's gonna be passed right here. We're going to be able to sign a random string object. So that's gonna be either gray aliens. Great aunt. One credence to ingredients three. If we go back to the assets, you're going to see that we have these great aunts right here. So that's gonna be the 1 to 3 are greedy INTs without number. And then after we do that, we're going to return these greedy INTs, which is a string. So we go back right to the top, we're gonna have these string. We don't know which one, and that's gonna be then assigned to this as an image to a new image. A set to this function fade in major U. So once we get that, we're going to try it. We're gonna save, and then we're gonna run the application. And now we can see that was switched to a new color every time was which weather data. And that's always a rent ingredients for the cold weather only.