1:27
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
8:22
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.
10:06
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.
14:31
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.
21:59
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.