Continuing with our exploration into animations and graphics in NativeScript.

In this exercise, we'll look at how we can do a group of animations together

by using the animation array and the support within NativeScript.

We'll do this on the Dishdetail components view.

So, let's get started on this exercise.

To work on this exercise,

let's go to the Dishdetail component,

and within the Dishdetail component,

let me import

page from UI page,

and import animation and

animation definition

from UI animation.

So, this is what helps us to do a group of animations together and then

import swipe gesture event data

and swipe

direction from UI gestures.

So, we see that we are going to be also using

swipe gestures in this exercise because in this exercise,

it makes more sense to use that and then we'll import color from color.

This enables us to set up some colors for our views.

And then, we'll import

enums from UI enums.

And then, going into the code here,

I will include a boolean variable equals show comments.

In this modification, we are not going to show the comments about

the dish explicitly but when the user does a gesture,

then we will reveal the comments for the user.

So that is where the animation comes into the picture and there we'll say

cardImage view, commentList view.

So if we're going to be animating both the card image and

the comment list and card layout view.

I noticed that view has not been imported,

so let me go up there and import

view from UI core view.

Then in the constructor,

let me inject the page.

To support the swipe gestures just like we did in the home component,

I will implement the on swipe method which receives

these arguments swipe gesture event data

and then we will react upon what kind of swipe gesture has been done.

And just like before we'll say,

if args direction,

swipe direction up.

So, here we are responding to swipe direction up and swipe direction down.

Then we will call

a method called animateUp and then,

we'll say 'else' if that direction is down.

So, I'm going to copy that 'if' from there, paste it here,

and then say if down,

we'll say this animateDown.

So, we are left with implementing these two functions here.

We will also implement another method called

showAndHideComments which we will invoke when

the comments button in the card that displays the details of the dish is clicked.

So, we'll say in here,

if not this,

showComments, this animateUp.

So which means that the comments are not being

shown, else this animateDown.

Okay, now, all that we are left is to

implement the animateUp and animateDown methods here.

So, let's implement the animateUp method.

Inside the animateUp method,

the first thing that we will check is if this dish.

If the dish is not there,

then obviously we will not be showing this at all and so we'll say,

if this dish and not this show comments.

So which means that this dish and we are not

showing comments only then we will have to animate this.

In here, we will say this card image is

equal to this page get view by ID.

You can see that I am using the view by ID and then we will get the view because

ID is car image and

as the name implies I am going to apply this ID to

the image of the card that we have displaying inside the card.

Then we'll say, this card layout equal to,

let me just copy this and we'll say card layout

and then the last one is

this comment list is get view by ID comment list.

So now, we get these three inside

this animate up method and inside the animate up method,

what we're going to do is we will define

a set of animations as

an array of animation definition type.

So we create an array and then we'll push a bunch of animations.

We'll define a bunch of animations and push it into this array and

then we can make these animations occur together.

That's the reason why we do it this way.

So, we'll say let definitions animation array definitions and we'll

say let a1 animation definition...

So, we're going to create

one animation definition machine and for this animation definition

we'll specify target is this card image.

When you specify an animation definition inside

this is specified as a JavaScript object and we'll say,

target this card image.

So we are specifying that this particular animation definition should be

applied to this card image view that we have defined earlier,

so target card image.

For this, we will scale

the view in

the y direction to zero.

So, we'll just roll up

the image and we'll

simultaneously translate the image.

Now if you ask me, how do you know that this works?

Trial and errors.

I tried out a few configurations until I saw that

the animation was something that looked good.

The third one, we are seeing

opacity zero so which means that the item essentially disappear.

Basically, one means it's completely opaque and clear.

Opacity zero means it's completely transparent and will disappear from the screen.

So that way we are literally making the image

disappear off the screen by doing this animation.

500 and then, we'll say the curve is

enums animation

curve ease in.

We'll try with ease in for this.

So, this is how you will define an animation.

So, you're specifying all the things that this animation should do,

and after specifying the animation,

we'll say definitions push a1.

So, we'll push that into the array, there.

Now, the second animation that I'm going to

do is for the card layout.

So for the card layout,

I will specify the target as card layout,

this card layout and what are the kind of animations that I want to do?

I'll say background colors.

I will change the background colors to

new colors and this is FFC107.

This gives a amber like color to the background.

Duration, 500 and curve

is enums animation curve ease in.

You can also use ease in out if you want to.

Not a problem.

And then we'll push this into the definitions array.

That's it.

So we now have an array of animation definitions that we have defined.

Now once we have this animations to do the animation,

let animations set equal

to new animation definitions.

We'll take the array of

animation definitions and then create a new animation from animation definitions.

Then we can say, animation set, play.

And then this will play out that animations that we have just designed.

And then at the end of the animations then a promise will be called.

At the end of the animations we'll say then and then this show comments, true, no.

So at this point... At the of this animations we want to show the comments

because we would have created enough space in the view to show the comments.

We'll also do a catch of any errors.

In the previous exercise I didn't catch the errors but you should add

that also to the previous exercise and

then just console log the error message. That's it.

Now, when you animate up,

you're going to be animating both the card layout and the card image.

You'll make them disappear and then the card layout will literally shrink and

show only the name and the details of the dish,

the image will disappear and that will create enough space in

the view to be able to show the comments down below.

Similarly let me create an animate down function here.

In this animate down function also,

I'm going to reuse some of this code here.

So I will copy this code and then we will edit the code.

Now in animate down,

this will happen only if this dish and this show comments...

So we are right now showing comments.

So we want to bring the downward slide is done,

the comment should be hidden and the image should be

redisplayed and the card layout should expand to accommodate the image.

To do that, we will say let definitions and so we still get the card image,

card layout and comment list here.

We'll talk about the definitions, the same definitions.

For the card image,

what we got to do is we're going to take

the card image and then scale it back to X is equal to one,

Y is equal to one, so the full size of the card image.

And then we'll translate it back to X is equal to zero, Y is equal to zero.

Its normal position and we'll change the opacity to

one and duration is 500 and we'll ease in the animation.

So those part as you can see we are reversing what we did in the previous animation.

Similarly for the animation definition for the card layout,

we're going to change the background color back to all white.

That's it. And that duration and the ease in will remain the same.

One last change that we need to do is to cut this out from this den here.

We should actually set the show comments to false.

So we will do that right at the beginning of this method here.

We'll say this show comments,

false at this point.

Once we have updated the dish detail component to.ts file,

we need to go into the dish detail component itself and then fix up the view here.

So we'll say for this great layout that we have

here we have great layout class M5 and rows auto,

auto and ngif dish there.

Now, we're going to add in... Let me move this to the next line and then we will add

in the swipe gesture

to this and then we'll say on swipe event.

So we will pass this and call that method that we implemented in our code there.

Then for the stack layout I will give the ID as

card layout and this one row zero class p and border will remain the same,

and for the image we'll give the ID as

card image and we will set

the visibility of this saying

if not show comments.

So when we're not showing comments I want

to show this image,

otherwise we will collapse this image.

We can also stretch

this if you want and then set this two aspect fill.

So that way we can apply the animation to both this layout and to

this image and you see that in the grid layout down below here,

we have this button which shows the number of comments.

So what we would like to do is when this button is clicked,

we want to call that show and hide comments method

that we implemented there and then going down below here for this list view,

I'm going to apply the ID as comment list and this is row two.

I will change the height from 500 to 300.

300 should be sufficient enough for this and also for

this list view I am going to control

its visibility just like I controlled for the image.

I want to show the comments only when the image is hidden.

So I'm going to copy this visibility for the image that I've used and

then also apply that to the list view here.

But instead of the not show comments,

so I will say show comments.

When show comments is true,

then this list will be visible otherwise it will be collapsed.

One last change that we need to make to the dish detail component is to

remove this scroll view from the dish detail component.

That's it. Let's save the changes and take a look at our application.

Going to our application in the device,

let's now go to the menu and then look up a dish here.

So now you see that the details of the dish completely

span the entire screen here and the comments are invisible here.

So to show the comments we do a upward swipe gesture on the screen and you'll notice how

the image shrinks out and the details of the dish are moved

upwards and the background color of that layout is changed.

So that is the animation that we have seen and

the details of the comments are shown right there,

and when we do the downward gesture,

the comments are hidden and the image is revealed in the view there.

The same approach can also be done

by clicking on the comments button that you'll see here.

So when you click on the comments button,

the same animation is applied and when you click again on the comments button,

the details including the image is revealed.

This is the other animation that we have implemented in this application.

So here you'll see that we are doing a group of animations together by

using the animation definition array that we defined in other application.

With this we complete this exercise.

In this exercise we pursued further our exploration

into the use of animations and gestures in our application.

With this we complete this exercise.

This is a good time for you to do a git commit

with the message animations and gestures part II.

Exercise (Video): Animations and Gestures Part 2

Multiplatform Mobile App Development with NativeScript

Meet the Instructors