1
00:00:00,000 --> 00:00:04,660
[MÚSICA]

2
00:00:04,660 --> 00:00:09,853
Vamos ter uma breve visão geral do suporte de animação em angular antes de ir e

3
00:00:09,853 --> 00:00:15,820
tentar a nossa mão em realmente implementar algumas animações em nossa aplicação angular.

4
00:00:17,010 --> 00:00:18,290
Como você percebe,

5
00:00:18,290 --> 00:00:23,800
animações em si não adicionam à funcionalidade do seu aplicativo Angular.

6
00:00:23,800 --> 00:00:27,210
Então surge a pergunta, por que usar animações?

7
00:00:27,210 --> 00:00:31,420
Agora, se você olhar para ele a partir da experiência do usuário, ou

8
00:00:31,420 --> 00:00:36,250
a perspectiva de design da interface do usuário, então você começa a ver que animações

9
00:00:36,250 --> 00:00:40,860
têm um significado e um propósito para seu uso em um aplicativo.

10
00:00:41,860 --> 00:00:46,360
O dar feedback visual ao usuário sobre

11
00:00:46,360 --> 00:00:49,560
coisas que estão acontecendo dentro de seu aplicativo angular.

12
00:00:49,560 --> 00:00:54,920
Então você pode ter um aplicativo completamente desprovido de animações e

13
00:00:54,920 --> 00:00:58,050
que ele ainda fornece o mesmo conjunto de funcionalidades.

14
00:00:58,050 --> 00:01:00,710
Então isso é algo que precisamos ter em mente

15
00:01:00,710 --> 00:01:05,280
quando estamos introduzindo animações em nossa aplicação angular.

16
00:01:05,280 --> 00:01:12,150
Animações não são necessárias ou necessárias, mas

17
00:01:12,150 --> 00:01:18,940
eles adicionam esse pequeno tempero à sua aplicação angular, se você estiver mantendo essa visão em

18
00:01:18,940 --> 00:01:24,090
sua mente, então você vai abordar a animação de uma perspectiva completamente diferente.

19
00:01:25,380 --> 00:01:31,890
É como não adicionar muito sal em seus pratos só porque o sal adiciona sabor.

20
00:01:33,030 --> 00:01:36,340
A grande parte do sal também estraga seu prato.

21
00:01:36,340 --> 00:01:38,630
A mesma coisa com animações também.

22
00:01:38,630 --> 00:01:42,370
Muita animações e você acaba com um usuário confuso.

23
00:01:43,400 --> 00:01:48,790
Mas animações, adicionadas sutilmente para dar sugestões aos usuários, ou

24
00:01:48,790 --> 00:01:55,545
dar feedback visual aos usuários, adicionar muito valor à sua aplicação angular.

25
00:01:55,545 --> 00:02:00,295
Felizmente, a estrutura de material angular que já estamos usando dentro

26
00:02:00,295 --> 00:02:05,825
nossa aplicação angular, vem com seu próprio conjunto construído de animações.

27
00:02:05,825 --> 00:02:10,074
Na verdade, essa é a razão pela qual incluímos o módulo de animação do navegador.

28
00:02:10,074 --> 00:02:15,060
Em nossa aplicação angular logo no início porque angular

29
00:02:15,060 --> 00:02:19,950
material já aproveita o suporte de animação que

30
00:02:21,350 --> 00:02:25,445
angular fornece através ou é animação.

31
00:02:25,445 --> 00:02:30,135
Então, a biblioteca de material angular

32
00:02:30,135 --> 00:02:35,840
usa as animações sugeridas que vêm com o design do material.

33
00:02:35,840 --> 00:02:38,700
Coisas como, por exemplo, quando você clica em um botão,

34
00:02:38,700 --> 00:02:43,980
os efeitos de ondulação que você vê no botão e o aumento sutil,

35
00:02:43,980 --> 00:02:50,220
e encolhimento de diferentes partes de sua visão, e assim por diante.

36
00:02:50,220 --> 00:02:55,010
Estes já são sugeridos pela abordagem de design de material, e

37
00:02:55,010 --> 00:02:58,840
material tão angular já adota muitas dessas coisas.

38
00:02:58,840 --> 00:03:03,140
Então, mesmo sem explicitamente colocar em esforço,

39
00:03:03,140 --> 00:03:08,100
você automaticamente obter algumas das animações necessárias em

40
00:03:08,100 --> 00:03:11,950
sua aplicação angular apenas usando material angular.

41
00:03:11,950 --> 00:03:17,640
Mas suponha que você queira adicionar seu próprio tempero à mistura.

42
00:03:17,640 --> 00:03:21,030
Então, como você aborda animações em angular?

43
00:03:21,030 --> 00:03:25,510
Isto é o que vamos olhar rapidamente nesta palestra.

44
00:03:25,510 --> 00:03:31,091
E, em seguida, passar para o exercício onde vamos implementar fu e ver se fazemos

45
00:03:31,091 --> 00:03:37,402
sentido ou se eles fazem a diferença na forma como você percebe sua aplicação Angular.

46
00:03:39,145 --> 00:03:42,053
A idéia por trás do suporte do Angular para

47
00:03:42,053 --> 00:03:46,723
animações é que ele permite que você crie animações com quase

48
00:03:46,723 --> 00:03:52,270
desempenho nativo do que você obterá com animações CSS puras.

49
00:03:52,270 --> 00:03:55,300
Agora você pode imediatamente se perguntar em sua mente,

50
00:03:55,300 --> 00:03:57,690
por que não apenas usar animações CSS puras?

51
00:03:57,690 --> 00:04:01,810
Na verdade, você pode fazer isso também, mas não há nada impedindo você de usar

52
00:04:01,810 --> 00:04:04,930
animações CSS puras dentro de seu aplicativo Angular.

53
00:04:04,930 --> 00:04:09,880
Mas a vantagem de fazer uso de

54
00:04:09,880 --> 00:04:14,660
a abordagem angular para introduzir animações é que angular,

55
00:04:14,660 --> 00:04:19,280
em primeiro lugar, aproveita o suporte da API web-animações que é

56
00:04:19,280 --> 00:04:24,620
suportado nas versões mais modernas de todos os navegadores.

57
00:04:24,620 --> 00:04:29,540
Agora, então, se a versão do seu navegador já suporta a API de Animações Web,

58
00:04:29,540 --> 00:04:32,380
então Angular simplesmente aproveita um começo para

59
00:04:32,380 --> 00:04:36,640
suporta as animações que você incluirá em seu aplicativo Angular.

60
00:04:36,640 --> 00:04:39,970
Se não, então você precisa usar um polyfill

61
00:04:39,970 --> 00:04:45,270
chamado web-animations.min.js em seu aplicativo Angular.

62
00:04:45,270 --> 00:04:49,190
Nos exercícios, vamos começar com a suposição de que estamos direcionando navegadores

63
00:04:49,190 --> 00:04:53,355
modernos, então eu não estou explicitamente incluindo o polyfill.

64
00:04:53,355 --> 00:04:59,625
Se você decidir fazer isso, a documentação de animações angulares

65
00:04:59,625 --> 00:05:05,395
explicitamente lhe diz como preenchê-lo para segmentar navegadores mais antigos.

66
00:05:05,395 --> 00:05:07,425
Então, novamente, voltando à pergunta,

67
00:05:07,425 --> 00:05:13,440
por que não usar animação CSS pura em vez de usar animação angular?

68
00:05:13,440 --> 00:05:15,850
Agora é aqui que

69
00:05:15,850 --> 00:05:20,560
a vantagem de usar a animação angular dentro da sua aplicação vem à tona.

70
00:05:20,560 --> 00:05:24,710
O fato de que as animações angulares são fortemente acopladas

71
00:05:24,710 --> 00:05:28,710
com seu código que você escreve para seu aplicativo Angular.

72
00:05:28,710 --> 00:05:32,740
E, portanto, você pode acionar muitas dessas animações vinculadas em

73
00:05:32,740 --> 00:05:37,330
diretamente à maneira como sua aplicação angular está evoluindo, e

74
00:05:37,330 --> 00:05:40,560
o que está acontecendo dentro de sua aplicação angular.

75
00:05:40,560 --> 00:05:45,610
Assim, você pode vinculá-lo ao ciclo de vida de seus componentes.

76
00:05:45,610 --> 00:05:50,356
Você pode vinculá-lo aos vários estágios de como a exibição se altera

77
00:05:50,356 --> 00:05:53,290
enquanto você está renderizando a exibição.

78
00:05:53,290 --> 00:06:00,130
E então essa vantagem que você obtém usando a biblioteca de animações angulares,

79
00:06:00,130 --> 00:06:05,870
em vez de animações CSS puras, é algo que vale a pena considerar.

80
00:06:05,870 --> 00:06:09,140
Como abordamos animações em Angular?

81
00:06:09,140 --> 00:06:12,730
As animações em si são construídas em torno de estados e

82
00:06:12,730 --> 00:06:17,850
transições entre estados no quadro Angular, então

83
00:06:17,850 --> 00:06:22,440
definimos estados diferentes, estado poderia ser qualquer coisa, mas

84
00:06:22,440 --> 00:06:27,500
você quer definir como um estado a partir da perspectiva da animação.

85
00:06:27,500 --> 00:06:31,290
Qualquer alteração de estado que você deseja causar

86
00:06:31,290 --> 00:06:35,330
pode acionar o efeito de animação para aparecer na imagem.

87
00:06:35,330 --> 00:06:39,840
Assim, as transições ao longo dos estados irão acionar o comportamento de animação

88
00:06:39,840 --> 00:06:41,550
dentro da sua aplicação angular.

89
00:06:41,550 --> 00:06:46,080
Como veremos no próximo slide, onde mostrarei um exemplo de

90
00:06:46,080 --> 00:06:50,468
como você pode usar fitas e transições para acionar a animação.

91
00:06:50,468 --> 00:06:56,260
Assim, o aspecto de animação do aplicativo angular

92
00:06:56,260 --> 00:07:01,420
é definido dentro do decorador de componentes que você usa dentro dos componentes.

93
00:07:01,420 --> 00:07:06,140
Assim, o decorador componente tem uma propriedades cores animações que você

94
00:07:06,140 --> 00:07:11,600
usará para definir os valores gatilhos para suas animações.

95
00:07:11,600 --> 00:07:13,650
Então eu usei a palavra gatilho.

96
00:07:13,650 --> 00:07:17,400
Nos exercícios, você verá como implementaremos os gatilhos para animações

97
00:07:17,400 --> 00:07:22,370
e como aplicaremos os gatilhos a vários elementos de modelo,

98
00:07:22,370 --> 00:07:27,520
e, em seguida, acionaremos essas animações sob determinadas circunstâncias.

99
00:07:27,520 --> 00:07:31,680
E, além disso, quando você precisa usar animações dentro do seu aplicativo Angular

100
00:07:31,680 --> 00:07:36,550
, em primeiro lugar, você precisa importar o módulo de animações do navegador.

101
00:07:36,550 --> 00:07:41,330
Nós já fizemos isso em nosso primeiro exercício porque

102
00:07:41,330 --> 00:07:45,840
o módulo de animação do navegador era necessário para suportar material angular.

103
00:07:45,840 --> 00:07:50,269
Agora, além disso, quando você estiver implementando animações em seus componentes.

104
00:07:51,280 --> 00:07:55,840
Então você precisaria da ajuda de classes de raio como trigger, state,

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

106
00:07:56,610 --> 00:08:01,550
transição, que tem que ser importado da biblioteca de animações angulares.

107
00:08:01,550 --> 00:08:08,010
E faremos isso dentro de cada componente que requer o uso de animações.

108
00:08:08,010 --> 00:08:12,930
Como mencionei no slide anterior, o comportamento de animação em seu aplicativo

109
00:08:12,930 --> 00:08:17,960
Angular gira em torno de estados e transições entre os estados.

110
00:08:17,960 --> 00:08:21,470
Estados pode ser qualquer coisa que você define como um estado.

111
00:08:21,470 --> 00:08:26,280
Como você verá no exemplo que se segue no primeiro exercício após esta aula

112
00:08:26,280 --> 00:08:30,650
você foi definido 2 estados chamados mostrado e oculto.

113
00:08:30,650 --> 00:08:33,600
Do nome do estado você automaticamente

114
00:08:33,600 --> 00:08:37,920
começa a adivinhar o que esses dois estados implicam.

115
00:08:37,920 --> 00:08:42,800
Agora, quando você mover do estado mostrado para o estado oculto, em seguida, a transição

116
00:08:42,800 --> 00:08:46,970
do estado mostrado para o estado oculto irá acionar um tipo de animação.

117
00:08:46,970 --> 00:08:50,780
Então, talvez você esconda um elemento dentro de sua visualização

118
00:08:52,170 --> 00:08:56,360
alterando a opacidade do elemento,

119
00:08:56,360 --> 00:09:00,240
opacidade significando quão transparente o elemento é e opacidade de

120
00:09:00,240 --> 00:09:05,260
significa que o elemento é completamente opaco e visível na tela.

121
00:09:05,260 --> 00:09:10,360
Se você definir a opacidade como zero, o elemento desaparece completamente da tela.

122
00:09:10,360 --> 00:09:13,260
Não estamos removendo esse elemento de

123
00:09:13,260 --> 00:09:18,110
o simplesmente escondendo esse elemento alterando sua opacidade.

124
00:09:18,110 --> 00:09:21,350
Então, dessa forma seria algo que você pode acionar.

125
00:09:21,350 --> 00:09:24,070
Da mesma forma, você pode alterar o tamanho de um elemento.

126
00:09:24,070 --> 00:09:30,740
Você pode expandir ou contrair o tamanho de um elemento aplicando uma transformação a

127
00:09:30,740 --> 00:09:36,470
essa propriedade elemento usando a transformação de escala para o elemento.

128
00:09:36,470 --> 00:09:41,190
Vamos ver exemplos como eu disse no exercício que se segue.

129
00:09:41,190 --> 00:09:45,670
Assim, todas as animações que você descrever dentro do seu aplicativo Angular

130
00:09:45,670 --> 00:09:49,590
dentro da diretiva componente usando a propriedade animações

131
00:09:49,590 --> 00:09:54,620
irão girar em torno de estados e transições entre os estados.

132
00:09:54,620 --> 00:09:58,350
Quando você fala sobre estados e transições, há alguns estados

133
00:09:58,350 --> 00:10:03,400
especiais que precisamos considerar quando definimos essas transições.

134
00:10:03,400 --> 00:10:06,810
Um desses estados é chamado como um estado vazio.

135
00:10:06,810 --> 00:10:09,580
E elemento que não está na tela.

136
00:10:09,580 --> 00:10:13,240
Um elemento ou uma exibição de partícula que não está anexado à exibição

137
00:10:13,240 --> 00:10:15,880
será considerado no estado vazio.

138
00:10:15,880 --> 00:10:18,510
Então, quando o elemento aparece na view,

139
00:10:18,510 --> 00:10:23,940
que se ele está anexado ao, por exemplo, o elemento faz a transição de

140
00:10:23,940 --> 00:10:29,590
o estado vazio para um dos estados existentes desse elemento.

141
00:10:29,590 --> 00:10:30,410
Então, nesse caso,

142
00:10:30,410 --> 00:10:35,680
você pode definir uma transição em torno de ir de vazio para um determinado estado.

143
00:10:35,680 --> 00:10:40,580
Da mesma forma, você também tem outro Estado chamado como um estado curinga ou

144
00:10:40,580 --> 00:10:45,870
é definido por estrela, o que significa que você não se importa com qual estado é.

145
00:10:45,870 --> 00:10:48,464
Então, se você precisa definir uma transição, você pode dizer,

146
00:10:48,464 --> 00:10:52,832
se você estiver passando de um estado vazio para o estado estrela, ou seja, de estado vazio para qualquer outro estado

147
00:10:52,832 --> 00:10:58,260
que você está fazendo a transição, então você pode aplicar uma transformação específica.

148
00:10:58,260 --> 00:11:02,970
Então, estas são as duas maneiras especiais de definir certos estados

149
00:11:02,970 --> 00:11:07,130
quando você define sua animação dentro do decorador de componentes.

150
00:11:08,570 --> 00:11:13,430
Então, em particular, existem algumas maneiras de

151
00:11:13,430 --> 00:11:18,410
descrevendo transições que são de especial interesse para o curso.

152
00:11:18,410 --> 00:11:23,050
Uma transição do estado vazio para qualquer estado pode ser descrita simplesmente usando

153
00:11:23,050 --> 00:11:27,876
dois-pontos enter, em vez de dizer void arrow star.

154
00:11:27,876 --> 00:11:32,520
Então você verá que estaremos usando a seta

155
00:11:32,520 --> 00:11:34,610
para descrever transições entre o estado.

156
00:11:34,610 --> 00:11:40,540
Então essa é a sintaxe que você vai me ver usando quando eu construir as transições.

157
00:11:40,540 --> 00:11:41,260
Da mesma forma,

158
00:11:41,260 --> 00:11:46,700
um vazio para qualquer outro estado pode ser descrito simplesmente usando dois pontos enter.

159
00:11:46,700 --> 00:11:50,060
Então, o que significa que esta vista está entrando em

160
00:11:50,060 --> 00:11:52,760
a vista que está sendo colocada na tela.

161
00:11:52,760 --> 00:11:56,190
Da mesma forma, uma transição de qualquer estado para o estado vazio,

162
00:11:56,190 --> 00:12:00,130
o que significa que você está removendo esse elemento da exibição.

163
00:12:00,130 --> 00:12:05,510
Isso seria também, poderia ser especificado como dois pontos de licença,

164
00:12:05,510 --> 00:12:09,400
o que significa que este elemento está saindo dessa vista particular.

165
00:12:09,400 --> 00:12:13,860
Então você vai me ver usando o cólon entrar e deixar cólon também onde eu descrevi

166
00:12:14,970 --> 00:12:21,130
as transições no segundo exercício que você vai ver nesta lição.

167
00:12:21,130 --> 00:12:26,945
Então, com esta rápida compreensão de animações em angular.

168
00:12:26,945 --> 00:12:29,935
Vamos ver como realmente escrevemos o código.

169
00:12:29,935 --> 00:12:35,873
E para fazer isso, vamos passar para os exercícios onde ilustramos para você,

170
00:12:35,873 --> 00:12:40,494
como usamos esse conhecimento que acabamos de ganhar sobre como

171
00:12:40,494 --> 00:12:45,777
animações são descritas em angular para escrever o código de salto tipo para

172
00:12:45,777 --> 00:12:49,458
construindo e aplicando as animações para

173
00:12:49,458 --> 00:12:53,830
vários elementos dentro do nosso visões de nossos componentes.

174
00:12:53,830 --> 00:13:00,309
[MÚSICA]