1
00:00:00,000 --> 00:00:04,660
[MUSIC]

2
00:00:04,660 --> 00:00:09,853
Let us get a brief overview of animation
support in angular before we go and

3
00:00:09,853 --> 00:00:15,820
try our hand at actually implementing some
animations in our angular application.

4
00:00:17,010 --> 00:00:18,290
As you realize,

5
00:00:18,290 --> 00:00:23,800
animations themselves do not add to the
functionality of your Angular application.

6
00:00:23,800 --> 00:00:27,210
Then the question arises,
why use animations?

7
00:00:27,210 --> 00:00:31,420
Now if you look at it from
the user experience, or

8
00:00:31,420 --> 00:00:36,250
the user interface design perspective,
then you begin to see that animations

9
00:00:36,250 --> 00:00:40,860
have a meaning and a purpose for
their use in an application.

10
00:00:41,860 --> 00:00:46,360
The give visual feedback to the user about

11
00:00:46,360 --> 00:00:49,560
things that are happening within
your angular application.

12
00:00:49,560 --> 00:00:54,920
So you can have an application
completely bereft of animations and

13
00:00:54,920 --> 00:00:58,050
that it still provide the same
set of functionality.

14
00:00:58,050 --> 00:01:00,710
So that is something that
we need to keep in mind

15
00:01:00,710 --> 00:01:05,280
when we're introducing animations
into our angular application.

16
00:01:05,280 --> 00:01:12,150
Animations are not necessary or
required but

17
00:01:12,150 --> 00:01:18,940
they add that little spice to your angular
application, if you're keep that view in

18
00:01:18,940 --> 00:01:24,090
your mind then you will approach animation
from a completely different perspective.

19
00:01:25,380 --> 00:01:31,890
It's like not adding too much salt into
your dishes just because salt adds taste.

20
00:01:33,030 --> 00:01:36,340
To much of salt also spoils your dish.

21
00:01:36,340 --> 00:01:38,630
The same thing with animations too.

22
00:01:38,630 --> 00:01:42,370
Too much animations and
you end up with a confused user.

23
00:01:43,400 --> 00:01:48,790
But animations, added in subtly to
give suggestions to the users, or

24
00:01:48,790 --> 00:01:55,545
give visual feedback to the users, add a
lot of value to your angular application.

25
00:01:55,545 --> 00:02:00,295
Now fortunately, the angular material
framework that we are already using within

26
00:02:00,295 --> 00:02:05,825
our angular application, comes with
its own built in set of animations.

27
00:02:05,825 --> 00:02:10,074
Indeed, that is the reason why we
included the browser animation module.

28
00:02:10,074 --> 00:02:15,060
Into our angular application right
at the start because angular

29
00:02:15,060 --> 00:02:19,950
material already leverages
the animation support that

30
00:02:21,350 --> 00:02:25,445
angular provides through or
it's animation.

31
00:02:25,445 --> 00:02:30,135
So the angular material library

32
00:02:30,135 --> 00:02:35,840
uses the suggested animations that
comes with the material design.

33
00:02:35,840 --> 00:02:38,700
Things like, for example,
when you click on a button,

34
00:02:38,700 --> 00:02:43,980
the ripple effects that you see on
the button and the subtle enlarging,

35
00:02:43,980 --> 00:02:50,220
and shrinking of different
parts of your view, and so on.

36
00:02:50,220 --> 00:02:55,010
These are already suggested by
the material design approach, and

37
00:02:55,010 --> 00:02:58,840
so angular material already
adopts many of those things.

38
00:02:58,840 --> 00:03:03,140
So even without explicitly
putting in effort,

39
00:03:03,140 --> 00:03:08,100
you automatically get some of
the required animations into

40
00:03:08,100 --> 00:03:11,950
your angular application just
by using angular material.

41
00:03:11,950 --> 00:03:17,640
But suppose you want to add
your own spice to the mix.

42
00:03:17,640 --> 00:03:21,030
Then, how do you approach
animations in angular?

43
00:03:21,030 --> 00:03:25,510
This is what we will quickly
look at in this lecture.

44
00:03:25,510 --> 00:03:31,091
And then move on to the exercise where
we will implements fu and see if we make

45
00:03:31,091 --> 00:03:37,402
sense or if they make a difference to the
way you perceive your Angular application.

46
00:03:39,145 --> 00:03:42,053
The idea behind Angular's support for

47
00:03:42,053 --> 00:03:46,723
animations is that it enables you
to build animations with near

48
00:03:46,723 --> 00:03:52,270
native performance of what you
will get with pure CSS animations.

49
00:03:52,270 --> 00:03:55,300
Now you may immediately
wonder in your mind,

50
00:03:55,300 --> 00:03:57,690
why not just use pure CSS animations?

51
00:03:57,690 --> 00:04:01,810
Indeed, you can do that too, but
there is nothing stopping you from using

52
00:04:01,810 --> 00:04:04,930
pure CSS animations within
your Angular application.

53
00:04:04,930 --> 00:04:09,880
But the advantage of making use of

54
00:04:09,880 --> 00:04:14,660
the angular approach for
introducing animations is that angular,

55
00:04:14,660 --> 00:04:19,280
first of all, leverages the support
from the web-animations API that is

56
00:04:19,280 --> 00:04:24,620
supported in the more modern
versions of all that browsers.

57
00:04:24,620 --> 00:04:29,540
Now, so if your browser version already
support the Web Animations API,

58
00:04:29,540 --> 00:04:32,380
then Angular simply leverage a start to

59
00:04:32,380 --> 00:04:36,640
support the animations that you'll
include within your Angular application.

60
00:04:36,640 --> 00:04:39,970
If not then you need to use a polyfill

61
00:04:39,970 --> 00:04:45,270
called web-animations.min.js
into your Angular application.

62
00:04:45,270 --> 00:04:49,190
In the exercises, we will start with the
assumption that we are targeting modern

63
00:04:49,190 --> 00:04:53,355
browsers, so I am not explicitly
including the polyfill.

64
00:04:53,355 --> 00:04:59,625
Should you decide to do that,
the angular animations documentation

65
00:04:59,625 --> 00:05:05,395
explicitly tells you how to fill that
in for targeting older browsers.

66
00:05:05,395 --> 00:05:07,425
So again, coming back to the question,

67
00:05:07,425 --> 00:05:13,440
why not use pure CSS animation
rather than using angular animation?

68
00:05:13,440 --> 00:05:15,850
Now this is where

69
00:05:15,850 --> 00:05:20,560
the advantage of using Angular animation
within your application comes to the fore.

70
00:05:20,560 --> 00:05:24,710
The fact that Angular
animations is tightly coupled

71
00:05:24,710 --> 00:05:28,710
with your code that you write for
your Angular application.

72
00:05:28,710 --> 00:05:32,740
And hence, you can trigger many
of these animations tied in

73
00:05:32,740 --> 00:05:37,330
directly to the way your angular
application is evolving, and

74
00:05:37,330 --> 00:05:40,560
what is going on within
your angular application.

75
00:05:40,560 --> 00:05:45,610
So you can tie it to the life
cycle of your components.

76
00:05:45,610 --> 00:05:50,356
You can tie it into the various
stages of how the view changes itself

77
00:05:50,356 --> 00:05:53,290
while you're rendering the view.

78
00:05:53,290 --> 00:06:00,130
And so that advantage that you get from
using the Angular animations library,

79
00:06:00,130 --> 00:06:05,870
instead of pure CSS animations,
is something that is worth considering.

80
00:06:05,870 --> 00:06:09,140
How do we approach animations in Angular?

81
00:06:09,140 --> 00:06:12,730
The animations themselves
are built around states and

82
00:06:12,730 --> 00:06:17,850
transitions among states in
the Angular framework, so

83
00:06:17,850 --> 00:06:22,440
we define different states,
state could be anything but

84
00:06:22,440 --> 00:06:27,500
you want to define as a state from
the perspective of animation.

85
00:06:27,500 --> 00:06:31,290
Any change of state that you want to cause

86
00:06:31,290 --> 00:06:35,330
can trigger the animation
effect to come into picture.

87
00:06:35,330 --> 00:06:39,840
So transitions along the states
will trigger the animation behavior

88
00:06:39,840 --> 00:06:41,550
within your angular application.

89
00:06:41,550 --> 00:06:46,080
As we will see in the next slide
where I will show you an example of

90
00:06:46,080 --> 00:06:50,468
how you can use tapes and
transitions to trigger the animation.

91
00:06:50,468 --> 00:06:56,260
So the animation aspect of
your angular application

92
00:06:56,260 --> 00:07:01,420
is defined inside the component decorator
that you use within your components.

93
00:07:01,420 --> 00:07:06,140
So the component decorator has
a property colors animations which you

94
00:07:06,140 --> 00:07:11,600
will use to define the values triggers for
your animations.

95
00:07:11,600 --> 00:07:13,650
So I've used the word trigger.

96
00:07:13,650 --> 00:07:17,400
In the exercises, you will see how
we will implement the triggers for

97
00:07:17,400 --> 00:07:22,370
animations and how we will apply
the triggers to various template elements,

98
00:07:22,370 --> 00:07:27,520
and then trigger those animations
under certain circumstances.

99
00:07:27,520 --> 00:07:31,680
And in addition, when you need to
use animations within your Angular

100
00:07:31,680 --> 00:07:36,550
application, first and foremost, you need
to import the browser animations module.

101
00:07:36,550 --> 00:07:41,330
We have already done that in
our very first exercise because

102
00:07:41,330 --> 00:07:45,840
the browser's animation module was
required for supporting angular material.

103
00:07:45,840 --> 00:07:50,269
Now, in addition, when you're implementing
animations within your components.

104
00:07:51,280 --> 00:07:55,840
Then you would need the help of
radius classes like trigger, state,

105
00:07:55,840 --> 00:07:56,610
style, animate,

106
00:07:56,610 --> 00:08:01,550
transition, which have to be imported
from the Angular animations library.

107
00:08:01,550 --> 00:08:08,010
And we will do that within every component
that requires to use animations.

108
00:08:08,010 --> 00:08:12,930
As I mentioned in the previous slide,
the animation behavior in your

109
00:08:12,930 --> 00:08:17,960
Angular application revolves around
states and transitions among the states.

110
00:08:17,960 --> 00:08:21,470
States can be anything that
you define as a state.

111
00:08:21,470 --> 00:08:26,280
As you'll see in the example that follows
in the very first exercise after this

112
00:08:26,280 --> 00:08:30,650
lecture you have been defined 2
states called shown and hidden.

113
00:08:30,650 --> 00:08:33,600
From the name of the state
you automatically

114
00:08:33,600 --> 00:08:37,920
begin to guess what
these two states imply.

115
00:08:37,920 --> 00:08:42,800
Now when you move from the shown state
to the hidden state then the transition

116
00:08:42,800 --> 00:08:46,970
from the shown to the hidden state
will trigger a kind of an animation.

117
00:08:46,970 --> 00:08:50,780
So maybe you will hide
an element within your

118
00:08:52,170 --> 00:08:56,360
view by changing
the opacity of the element,

119
00:08:56,360 --> 00:09:00,240
opacity meaning how transparent
the element is and opacity of

120
00:09:00,240 --> 00:09:05,260
one means the element is completely
opaque and visible on the screen.

121
00:09:05,260 --> 00:09:10,360
If you set the opacity to zero the element
completely disappears from the screen.

122
00:09:10,360 --> 00:09:13,260
We're not removing that element from

123
00:09:13,260 --> 00:09:18,110
the by simply hiding that
element by changing its opacity.

124
00:09:18,110 --> 00:09:21,350
So, that way would be something
that you can trigger.

125
00:09:21,350 --> 00:09:24,070
Similarly, you can change
the size of an element.

126
00:09:24,070 --> 00:09:30,740
You can expand or contract the size of
an element by applying a transform to

127
00:09:30,740 --> 00:09:36,470
that element property using scale
transformation for the element.

128
00:09:36,470 --> 00:09:41,190
We will see examples as I said
in the exercise that follows.

129
00:09:41,190 --> 00:09:45,670
So all animations that you describe
within your Angular application

130
00:09:45,670 --> 00:09:49,590
within the component directive
using the animations property

131
00:09:49,590 --> 00:09:54,620
will revolve around states and
transitions among the states.

132
00:09:54,620 --> 00:09:58,350
When you talk about states and
transitions, there are a few special

133
00:09:58,350 --> 00:10:03,400
states that we need to consider
when we define these transitions.

134
00:10:03,400 --> 00:10:06,810
One of those states is
called as a void state.

135
00:10:06,810 --> 00:10:09,580
And element that is not on the screen.

136
00:10:09,580 --> 00:10:13,240
An element or a particle view
that is not attached to the view

137
00:10:13,240 --> 00:10:15,880
will be considered to
be in the void state.

138
00:10:15,880 --> 00:10:18,510
So when the element appears into the view,

139
00:10:18,510 --> 00:10:23,940
that if it is attached to the for example,
then the element transitions from

140
00:10:23,940 --> 00:10:29,590
the void state into one of
the existing states of that element.

141
00:10:29,590 --> 00:10:30,410
So in that case,

142
00:10:30,410 --> 00:10:35,680
you can define a transition around
from going from void to a given state.

143
00:10:35,680 --> 00:10:40,580
Similarly, you also have another
State called as a wildcard state or

144
00:10:40,580 --> 00:10:45,870
it's defined by star, meaning that
you don't care what state it is.

145
00:10:45,870 --> 00:10:48,464
So if you need to define
a transition you can say,

146
00:10:48,464 --> 00:10:52,832
if you're going from a void state to the
star state, meaning from void state to any

147
00:10:52,832 --> 00:10:58,260
other state that you're transitioning then
you can apply a particular transformation.

148
00:10:58,260 --> 00:11:02,970
So these are the two special
ways of defining certain states

149
00:11:02,970 --> 00:11:07,130
when you define your animation
within the component decorator.

150
00:11:08,570 --> 00:11:13,430
So in particular,
there are a couple of ways of

151
00:11:13,430 --> 00:11:18,410
describing transitions that are of
special interest to course.

152
00:11:18,410 --> 00:11:23,050
A transition from the void state to any
state can be described by simply using

153
00:11:23,050 --> 00:11:27,876
colon enter,
instead of saying void arrow star.

154
00:11:27,876 --> 00:11:32,520
So you will see that we
will be using the arrow

155
00:11:32,520 --> 00:11:34,610
to describe transitions between the state.

156
00:11:34,610 --> 00:11:40,540
So that is the syntax that you will see me
using when I construct the transitions.

157
00:11:40,540 --> 00:11:41,260
Similarly, so

158
00:11:41,260 --> 00:11:46,700
a void to any other state can be
described by simply using colon enter.

159
00:11:46,700 --> 00:11:50,060
So which means that this
view is entering into

160
00:11:50,060 --> 00:11:52,760
the view that is being
laid out on the screen.

161
00:11:52,760 --> 00:11:56,190
Similarly, a transition from
any state into the void state,

162
00:11:56,190 --> 00:12:00,130
meaning that you're removing
that element from the view.

163
00:12:00,130 --> 00:12:05,510
That would be also,
could be specified as colon leave,

164
00:12:05,510 --> 00:12:09,400
meaning that this element is
leaving from that particular view.

165
00:12:09,400 --> 00:12:13,860
So you will see me using colon enter and
colon leave also where I described

166
00:12:14,970 --> 00:12:21,130
the transitions in the second exercise
that you will see in this lesson.

167
00:12:21,130 --> 00:12:26,945
So, with this quick understanding
of animations in angular.

168
00:12:26,945 --> 00:12:29,935
Let's look at how we
actually write the code.

169
00:12:29,935 --> 00:12:35,873
And to do that, we will move on to
the exercises where we illustrate to you,

170
00:12:35,873 --> 00:12:40,494
how we use this knowledge that
we have just gained about how

171
00:12:40,494 --> 00:12:45,777
animations are described in angular
to write the type skip code for

172
00:12:45,777 --> 00:12:49,458
constructing and
applying the animations for

173
00:12:49,458 --> 00:12:53,830
various elements within our
views of our components.

174
00:12:53,830 --> 00:13:00,309
[MUSIC]