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

2
00:00:04,763 --> 00:00:07,931
Como aprendemos na palestra anterior,

3
00:00:07,931 --> 00:00:12,927
animações adicionam muito valor intrínseco à sua aplicação.

4
00:00:12,927 --> 00:00:16,080
Ele acrescenta a uma melhor experiência de usuário.

5
00:00:16,080 --> 00:00:19,990
Agora, obviamente, isso não significa que você jogue animações por todo o lugar

6
00:00:19,990 --> 00:00:22,730
apenas por causa de fazer animações.

7
00:00:22,730 --> 00:00:29,480
Você coloca animações no lugar para melhorar a experiência do usuário.

8
00:00:30,680 --> 00:00:34,130
Neste exercício vamos fazer a nossa primeira animação

9
00:00:34,130 --> 00:00:37,006
dentro da nossa aplicação Angular que desenvolvemos até agora.

10
00:00:37,006 --> 00:00:38,425
E ao longo do caminho,

11
00:00:38,425 --> 00:00:44,190
aprende como animações podem ser implementadas em um aplicativo Angular.

12
00:00:44,190 --> 00:00:49,127
Continuaremos este tópico na segunda parte do exercício onde

13
00:00:49,127 --> 00:00:53,206
adicionaremos mais animação à nossa aplicação Angular.

14
00:00:53,206 --> 00:00:58,720
Quando começamos este curso, no primeiro exercício com Angular,

15
00:00:58,720 --> 00:01:04,147
já tínhamos adicionado no módulo de animação em nosso aplicativo Angular

16
00:01:04,147 --> 00:01:10,299
no app.module.ts5, então importamos o módulo de animação ali mesmo.

17
00:01:10,299 --> 00:01:13,551
Agora, o próximo passo é ir para os componentes e

18
00:01:13,551 --> 00:01:17,240
, em seguida, adicionar a animação onde quer que seja necessário.

19
00:01:17,240 --> 00:01:24,336
A primeira animação que vamos adicionar está no componente dishdetail aqui.

20
00:01:24,336 --> 00:01:28,758
Então, indo para o componente dishdetail,

21
00:01:28,758 --> 00:01:32,790
deixe-me importar algumas classes aqui.

22
00:01:32,790 --> 00:01:38,271
Vou importar gatilho, estado, estilo

23
00:01:38,271 --> 00:01:45,382
, animação e transição de.

24
00:01:50,250 --> 00:01:53,120
@angular /animações.

25
00:01:56,695 --> 00:02:02,460
Agora, uma vez que importamos estes podemos fazer uso deles na construção de nossa animação.

26
00:02:02,460 --> 00:02:06,390
Então, como você adiciona animação a um componente?

27
00:02:06,390 --> 00:02:12,360
Vamos adicionar os gatilhos de animação no decorador componente aqui.

28
00:02:12,360 --> 00:02:19,247
Então, indo para o decorador componente após os URLs estilos,

29
00:02:19,247 --> 00:02:25,217
e adicione as animações como uma propriedade dentro de lá.

30
00:02:25,217 --> 00:02:30,140
E então aqui, eu vou definir um gatilho,

31
00:02:30,140 --> 00:02:34,126
que eu chamo de gatilho de visibilidade, e

32
00:02:34,126 --> 00:02:39,888
eu vou definir o gatilho de visibilidade aqui dentro.

33
00:02:39,888 --> 00:02:43,942
Agora para este gatilho visibilidade,

34
00:02:43,942 --> 00:02:48,972
Vou definir dois estados, Vou definir um estado

35
00:02:48,972 --> 00:02:54,282
como mostrado e vou definir um segundo estado

36
00:02:54,282 --> 00:03:00,932
como, Oculto.

37
00:03:00,932 --> 00:03:04,930
Então eu tenho a flexibilidade de definir meus estados assim.

38
00:03:04,930 --> 00:03:09,670
Então, para o estado mostrado, o que é que eu quero aplicar?

39
00:03:09,670 --> 00:03:16,565
Então, para o estado mostrado, vou aplicar o estilo da seguinte forma,

40
00:03:16,565 --> 00:03:21,350
assim os estilos que eu vou aplicar para

41
00:03:21,350 --> 00:03:26,416
o estado mostrado, eu vou fazer transformar, e

42
00:03:26,416 --> 00:03:33,240
a transformação que eu vou aplicar é uma escala de 1.0.

43
00:03:33,240 --> 00:03:38,170
Então eu quero mostrá-lo em

44
00:03:38,170 --> 00:03:42,810
seu tamanho normal e

45
00:03:42,810 --> 00:03:47,167
uma opacidade de 0.

46
00:03:47,167 --> 00:03:50,929
Então é assim que eu defino o estilo mostrado.

47
00:03:50,929 --> 00:03:57,884
Então, e o estado oculto eu definir o estilo como,

48
00:04:03,816 --> 00:04:09,659
Transformar, vou dizer escala (0.5).

49
00:04:09,659 --> 00:04:13,002
Você pode brincar com esses números

50
00:04:13,002 --> 00:04:17,294
para ver se a animação é o que você deseja.

51
00:04:17,294 --> 00:04:21,194
Eu também brinquei com esses números até que eu tenho algo que eu estava

52
00:04:21,194 --> 00:04:22,194
satisfeito com.

53
00:04:22,194 --> 00:04:29,457
E 0, ou para o seu estado mostrado, vou colocar a opacidade como 1.

54
00:04:29,457 --> 00:04:31,929
Opacidade 1 significa que está completamente visível.

55
00:04:31,929 --> 00:04:34,942
Opacidade 0 significa que está completamente oculto.

56
00:04:34,942 --> 00:04:38,555
Agora, eu defini dois estados aqui, mostrado e aqui no estado.

57
00:04:38,555 --> 00:04:43,481
Agora, a transição entre esses dois estados,

58
00:04:43,481 --> 00:04:50,931
Eu vou definir aqui como, sempre que eu mudo de qualquer estado para qualquer estado,

59
00:04:50,931 --> 00:04:56,339
não importa qual estado para qual estado eu me movo,

60
00:04:56,339 --> 00:05:02,108
a transformação é feita com animação de 0,5 segundos,

61
00:05:02,108 --> 00:05:04,780
ou 500 milissegundos.

62
00:05:04,780 --> 00:05:08,522
E eu vou facilitar para fora.

63
00:05:08,522 --> 00:05:13,323
Então aqui, o que eu estou especificando é que se eu passar do estado mostrado para o estado oculto ou

64
00:05:13,323 --> 00:05:19,140
do estado oculto para o estado mostrado, eu vou me mover dentro de 0,5 segundos, ou 500 milissegundos.

65
00:05:19,140 --> 00:05:23,278
E então, eu vou fazer a transição facilitando para dentro e para fora, então

66
00:05:23,278 --> 00:05:27,755
não será uma transição linear, vai ser lentamente entrando e

67
00:05:27,755 --> 00:05:31,218
em seguida, facilitar e depois facilitar a transição, então

68
00:05:31,218 --> 00:05:35,383
que não será uma transição seca de um para o outro.

69
00:05:35,383 --> 00:05:40,411
Assim, você pode usar essa facilidade de entrada ou facilidade de saída

70
00:05:40,411 --> 00:05:45,125
para especificar como você deseja que a transição aconteça.

71
00:05:45,125 --> 00:05:49,625
Então, agora para essa animação, eu especifiquei

72
00:05:49,625 --> 00:05:54,861
a visibilidade como o gatilho para essa animação.

73
00:05:54,861 --> 00:05:58,911
Agora, para permitir que esta animação funcione corretamente,

74
00:05:58,911 --> 00:06:04,344
Vou entrar no meu DishDetailComponent e, em seguida, especificarei,

75
00:06:04,344 --> 00:06:09,412
dentro deste componente, o valor inicial para visibilidade.

76
00:06:09,412 --> 00:06:13,444
Então, eu vou dizer visibilidade é

77
00:06:13,444 --> 00:06:18,484
inicialmente definido para mostrado, e então,

78
00:06:18,484 --> 00:06:25,379
sempre que eu estou mudando de um prato para outro.

79
00:06:25,379 --> 00:06:28,649
E isso acontece sempre que estou pegando o prato aqui.

80
00:06:28,649 --> 00:06:32,117
Então, sempre que eu estou mudando o prato de um prato para o outro,

81
00:06:32,117 --> 00:06:35,249
isso é causado sempre que o parâmetro de rota muda.

82
00:06:35,249 --> 00:06:37,942
Então, nesse ponto, eu vou aplicar a animação.

83
00:06:37,942 --> 00:06:42,649
Vou fazer o gatilho ir de mostrado para o estado oculto e

84
00:06:42,649 --> 00:06:48,520
depois voltar de oculto para o estado mostrado quando o prato estiver disponível.

85
00:06:48,520 --> 00:06:53,330
Então, para aplicar essa transformação.

86
00:06:53,330 --> 00:06:58,720
Então eu vou colocar esta declaração dentro

87
00:06:58,720 --> 00:07:03,330
um bloco aqui nesta função de seta.

88
00:07:03,330 --> 00:07:11,806
E, em seguida, também definir esta visibilidade aqui como.

89
00:07:11,806 --> 00:07:16,845
Então, quando eu estou fazendo a transição de um estado para outro, então

90
00:07:16,845 --> 00:07:22,421
quando eu começar a buscar a informação do prato do lado do servidor,

91
00:07:22,421 --> 00:07:27,784
Eu vou primeiro esconder o prato atual definindo o valor de visibilidade

92
00:07:27,784 --> 00:07:32,503
para oculto, o que significa que o prato atual que

93
00:07:32,503 --> 00:07:37,265
está sendo exibido será escondido da vista.

94
00:07:37,265 --> 00:07:42,085
E então, quando o novo prato ficar disponível, ele vai aparecer de volta para a vista.

95
00:07:42,085 --> 00:07:48,147
Então, para fazer isso, quando meu prato ficar disponível na segunda parte,

96
00:07:48,147 --> 00:07:54,651
na parte de assinatura, vou dizer como a última declaração nesse bloco,

97
00:07:54,651 --> 00:07:59,299
Eu vou dizer que essa visibilidade é igual a mostrada aqui.

98
00:07:59,299 --> 00:08:04,513
Então minha visão se torna visível nesse ponto.

99
00:08:04,513 --> 00:08:09,229
Agora eu não estou aplicando isso para a mensagem de erro porque eu estou

100
00:08:09,229 --> 00:08:13,654
vai aplicar essa visibilidade apenas para as partes do meu template

101
00:08:13,654 --> 00:08:17,616
onde meu prato está realmente sendo mostrado.

102
00:08:17,616 --> 00:08:20,910
Agora, se houver um erro, então eu só quero esconder o prato correto.

103
00:08:20,910 --> 00:08:24,751
Em seguida, mostre apenas a mensagem de erro na exibição lá.

104
00:08:24,751 --> 00:08:29,021
Então, com essas alterações para meu DishDetailComponent.

105
00:08:29,021 --> 00:08:34,092
Então, você pode ver novamente, explicando isso nele mais uma vez.

106
00:08:34,092 --> 00:08:40,072
Quando eu começar a buscar o novo prato após a mudança dos parâmetros da rota,

107
00:08:40,072 --> 00:08:42,924
Eu vou definir a visibilidade para oculto para

108
00:08:42,924 --> 00:08:48,445
que o prato atual que está sendo exibido na vista vai se esconder.

109
00:08:48,445 --> 00:08:52,427
E então, quando o novo prato fica disponível, de modo que vai acontecer quando

110
00:08:52,427 --> 00:08:56,221
a assinatura é chamada quando esse observável fica disponível.

111
00:08:56,221 --> 00:09:00,001
E então, quando o prato fica disponível e, em seguida,

112
00:09:00,001 --> 00:09:04,455
Eu coloquei este prato para o prato que voltou do observável.

113
00:09:04,455 --> 00:09:08,181
Nesse ponto, restaurarei a visibilidade para esse estado mostrado.

114
00:09:08,181 --> 00:09:13,476
Então, que o meu novo prato que eu busquei pode ser mostrado na tela.

115
00:09:13,476 --> 00:09:18,150
Com esta mudança, eu agora vou para o arquivo de modelo,

116
00:09:18,150 --> 00:09:22,710
e dentro do arquivo de modelo eu vou aplicar

117
00:09:22,710 --> 00:09:26,366
a visibilidade para ambos o prato aqui.

118
00:09:26,366 --> 00:09:31,160
Então, a primeira div onde eu estou exibindo o prato eu vou

119
00:09:31,160 --> 00:09:35,948
aplicar o, gatilho visibilidade para o prato.

120
00:09:35,948 --> 00:09:39,417
E então eu vou definir que igual a,

121
00:09:42,937 --> 00:09:49,060
Visibilidade, que é a variável que eu defini no código lá.

122
00:09:49,060 --> 00:09:54,450
Agora, Eu aplico isso ao prato aqui, e também aplicar a mesma coisa

123
00:09:54,450 --> 00:09:58,530
para a segunda div, onde eu estou exibindo os comentários.

124
00:09:59,700 --> 00:10:00,837
E é isso.

125
00:10:00,837 --> 00:10:05,902
Então deixe-me salvar todas as alterações, e então vamos e

126
00:10:05,902 --> 00:10:11,213
dar uma olhada em como essa animação funciona em nosso exemplo.

127
00:10:11,213 --> 00:10:15,015
Indo para o navegador, agora estou exibindo o menu.

128
00:10:15,015 --> 00:10:19,618
Deixe-me selecionar um dos pratos e, em seguida, passar para a vista dos pratos aqui.

129
00:10:19,618 --> 00:10:24,336
Então, quando o prato é exibido, observe que a qualquer momento eu movo de

130
00:10:24,336 --> 00:10:28,432
este prato para o próximo prato, então clicando à direita.

131
00:10:28,432 --> 00:10:33,349
Então esse prato desaparece, e então quando o novo prato fica disponível,

132
00:10:33,349 --> 00:10:37,900
a vista novamente se torna visível e, em seguida, o novo prato é mostrado.

133
00:10:37,900 --> 00:10:42,210
Da mesma forma, eu posso fazer mais um e, em seguida, notar que o novo prato,

134
00:10:42,210 --> 00:10:46,070
assim que a informação se torna disponível, torna-se novamente visível.

135
00:10:46,070 --> 00:10:51,890
Então esta é a transição que estou aplicando neste exemplo aqui.

136
00:10:51,890 --> 00:10:58,860
Então, voltando, você pode ver o mesmo comportamento novamente se repetindo.

137
00:10:58,860 --> 00:11:02,730
Esta pequena alteração de interface de usuário

138
00:11:02,730 --> 00:11:08,310
adiciona muito valor à maneira como o usuário percebe seu aplicativo.

139
00:11:08,310 --> 00:11:13,520
Como você percebe, isso não adiciona muito à funcionalidade do seu aplicativo

140
00:11:13,520 --> 00:11:18,690
em si, mas contribui para uma melhor experiência de usuário.

141
00:11:18,690 --> 00:11:23,625
E é aí que aplicamos animações judiciosamente dentro do nosso aplicativo

142
00:11:23,625 --> 00:11:28,658
para tornar certa experiência do usuário mais significativa

143
00:11:28,658 --> 00:11:33,302
para o usuário que está visualizando seu aplicativo Angular, ou

144
00:11:33,302 --> 00:11:39,421
visualizando seu aplicativo móvel, que veremos nos cursos posteriores.

145
00:11:39,421 --> 00:11:43,957
Isso conclui este exercício em animações.

146
00:11:43,957 --> 00:11:48,939
Continuaremos as explorações de animações na segunda parte

147
00:11:48,939 --> 00:11:53,082
do exercício que surge logo depois disso.

148
00:11:53,082 --> 00:11:57,513
Este é um bom momento para você fazer um comentário do Git com as animações de mensagem,

149
00:11:57,513 --> 00:11:58,164
parte um.

150
00:11:58,164 --> 00:12:03,927
[MÚSICA]