Finalize you interactions by adding onTap events that brings our user to the views we want them to be.
- [Instructor] So now we have all our elements in place. We need to add some interactions to finalize our prototype. So let's get to it. First thing you want to do is, like I mentioned in the last video, is to remove the detail view from the view. So, the way we'll do that is by moving it off-screen, by adding 1374, don't ask me why I did 74, we could do 70, it would be remotely the same. Then scroll down all the way to the bottom, and we'll start adding some functions.
So for the first one, we need to bring the detail view on the screen. So when you click on any of the instances of our class here, you want to make sure that you bring a detail view onscreen. So that's what we'll do first. And we'll do people list on top ... and then bring back the detail view, through a simple animation for now. So we'll work on the animations next. But for now we'll just do a simple animate and what you animate is the Y axis ...
to 45. So let's test it. Click on this. We bring it into view. It's very slow right now but we'll work on that on the next video. But this is exactly what I want. The next one, and let's copy and paste our code we just did. We need to close that particular view. So we need to click on the close corner that we just added.
And then bring that view back into space. So we'll do the 1370 again. Let's go ahead and test it. Click. Boom, it's here. Click on the X. Boom, it's out. Okay? Then let's paste again. So for the next one, when you click on the detail view, you have an edit button and a delete button. I want to be able to click on the edit button and be brought to the add screen.
So let's go ahead and do that. So on clicking the edit section, you want to get the detail view out of screen and therefore into space. That's the first thing you want to do and then the second thing you want to use flow, and bring the view, add people, like we've done since the beginning. So, add people, like so. Let's go ahead and test this. Boom.
Click edit. And we're good. Okay? So the last interaction, well you probably have guessed it. If we click here, we have a delete button. So we want to be brought back to the people list, and make sure the detail view goes away as well. So we'll just copy and paste this particular code. And then just change it to delete section. This is good. And we don't need to have flow on this one.
So let's test this again. Click. Delete. And we're brought back here. Good stuff. So if you look at where our prototype is at this point, we could consider it as finished. But it's missing some magic, and spending some time on improving animations is where prototypes stand out. So let's do that next.
- Researching UI colors, styles, and fonts
- Using assets available in Framer
- Creating views
- Adding navigation
- Using classes and loops
- Importing a module to extend Framer
- Creating inputs
- Adding a detail view
- Adding final interactions
- Animating a popup
- Animating a function