[MUSIC]
Let us get a brief overview of animation support in angular before we go and
try our hand at actually implementing some animations in our angular application.
As you realize,
animations themselves do not add to the functionality of your Angular application.
Then the question arises, why use animations?
Now if you look at it from the user experience, or
the user interface design perspective, then you begin to see that animations
have a meaning and a purpose for their use in an application.
The give visual feedback to the user about
things that are happening within your angular application.
So you can have an application completely bereft of animations and
that it still provide the same set of functionality.
So that is something that we need to keep in mind
when we're introducing animations into our angular application.
Animations are not necessary or required but
they add that little spice to your angular application, if you're keep that view in
your mind then you will approach animation from a completely different perspective.
It's like not adding too much salt into your dishes just because salt adds taste.
To much of salt also spoils your dish.
The same thing with animations too.
Too much animations and you end up with a confused user.
But animations, added in subtly to give suggestions to the users, or
give visual feedback to the users, add a lot of value to your angular application.
Now fortunately, the angular material framework that we are already using within
our angular application, comes with its own built in set of animations.
Indeed, that is the reason why we included the browser animation module.
Into our angular application right at the start because angular
material already leverages the animation support that
angular provides through or it's animation.
So the angular material library
uses the suggested animations that comes with the material design.
Things like, for example, when you click on a button,
the ripple effects that you see on the button and the subtle enlarging,
and shrinking of different parts of your view, and so on.
These are already suggested by the material design approach, and
so angular material already adopts many of those things.
So even without explicitly putting in effort,
you automatically get some of the required animations into
your angular application just by using angular material.
But suppose you want to add your own spice to the mix.
Then, how do you approach animations in angular?
This is what we will quickly look at in this lecture.
And then move on to the exercise where we will implements fu and see if we make
sense or if they make a difference to the way you perceive your Angular application.
The idea behind Angular's support for
animations is that it enables you to build animations with near
native performance of what you will get with pure CSS animations.
Now you may immediately wonder in your mind,
why not just use pure CSS animations?
Indeed, you can do that too, but there is nothing stopping you from using
pure CSS animations within your Angular application.
But the advantage of making use of
the angular approach for introducing animations is that angular,
first of all, leverages the support from the web-animations API that is
supported in the more modern versions of all that browsers.
Now, so if your browser version already support the Web Animations API,
then Angular simply leverage a start to
support the animations that you'll include within your Angular application.
If not then you need to use a polyfill
called web-animations.min.js into your Angular application.
In the exercises, we will start with the assumption that we are targeting modern
browsers, so I am not explicitly including the polyfill.
Should you decide to do that, the angular animations documentation
explicitly tells you how to fill that in for targeting older browsers.
So again, coming back to the question,
why not use pure CSS animation rather than using angular animation?
Now this is where
the advantage of using Angular animation within your application comes to the fore.
The fact that Angular animations is tightly coupled
with your code that you write for your Angular application.
And hence, you can trigger many of these animations tied in
directly to the way your angular application is evolving, and
what is going on within your angular application.
So you can tie it to the life cycle of your components.
You can tie it into the various stages of how the view changes itself
while you're rendering the view.
And so that advantage that you get from using the Angular animations library,
instead of pure CSS animations, is something that is worth considering.
How do we approach animations in Angular?
The animations themselves are built around states and
transitions among states in the Angular framework, so
we define different states, state could be anything but
you want to define as a state from the perspective of animation.
Any change of state that you want to cause
can trigger the animation effect to come into picture.
So transitions along the states will trigger the animation behavior
within your angular application.
As we will see in the next slide where I will show you an example of
how you can use tapes and transitions to trigger the animation.
So the animation aspect of your angular application
is defined inside the component decorator that you use within your components.
So the component decorator has a property colors animations which you
will use to define the values triggers for your animations.
So I've used the word trigger.
In the exercises, you will see how we will implement the triggers for
animations and how we will apply the triggers to various template elements,
and then trigger those animations under certain circumstances.
And in addition, when you need to use animations within your Angular
application, first and foremost, you need to import the browser animations module.
We have already done that in our very first exercise because
the browser's animation module was required for supporting angular material.
Now, in addition, when you're implementing animations within your components.
Then you would need the help of radius classes like trigger, state,
style, animate,
transition, which have to be imported from the Angular animations library.
And we will do that within every component that requires to use animations.
As I mentioned in the previous slide, the animation behavior in your
Angular application revolves around states and transitions among the states.
States can be anything that you define as a state.
As you'll see in the example that follows in the very first exercise after this
lecture you have been defined 2 states called shown and hidden.
From the name of the state you automatically
begin to guess what these two states imply.
Now when you move from the shown state to the hidden state then the transition
from the shown to the hidden state will trigger a kind of an animation.
So maybe you will hide an element within your
view by changing the opacity of the element,
opacity meaning how transparent the element is and opacity of
one means the element is completely opaque and visible on the screen.
If you set the opacity to zero the element completely disappears from the screen.
We're not removing that element from
the by simply hiding that element by changing its opacity.
So, that way would be something that you can trigger.
Similarly, you can change the size of an element.
You can expand or contract the size of an element by applying a transform to
that element property using scale transformation for the element.
We will see examples as I said in the exercise that follows.
So all animations that you describe within your Angular application
within the component directive using the animations property
will revolve around states and transitions among the states.
When you talk about states and transitions, there are a few special
states that we need to consider when we define these transitions.
One of those states is called as a void state.
And element that is not on the screen.
An element or a particle view that is not attached to the view
will be considered to be in the void state.
So when the element appears into the view,
that if it is attached to the for example, then the element transitions from
the void state into one of the existing states of that element.
So in that case,
you can define a transition around from going from void to a given state.
Similarly, you also have another State called as a wildcard state or
it's defined by star, meaning that you don't care what state it is.
So if you need to define a transition you can say,
if you're going from a void state to the star state, meaning from void state to any
other state that you're transitioning then you can apply a particular transformation.
So these are the two special ways of defining certain states
when you define your animation within the component decorator.
So in particular, there are a couple of ways of
describing transitions that are of special interest to course.
A transition from the void state to any state can be described by simply using
colon enter, instead of saying void arrow star.
So you will see that we will be using the arrow
to describe transitions between the state.
So that is the syntax that you will see me using when I construct the transitions.
Similarly, so
a void to any other state can be described by simply using colon enter.
So which means that this view is entering into
the view that is being laid out on the screen.
Similarly, a transition from any state into the void state,
meaning that you're removing that element from the view.
That would be also, could be specified as colon leave,
meaning that this element is leaving from that particular view.
So you will see me using colon enter and colon leave also where I described
the transitions in the second exercise that you will see in this lesson.
So, with this quick understanding of animations in angular.
Let's look at how we actually write the code.
And to do that, we will move on to the exercises where we illustrate to you,
how we use this knowledge that we have just gained about how
animations are described in angular to write the type skip code for
constructing and applying the animations for
various elements within our views of our components.
[MUSIC]