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

2
00:00:04,660 --> 00:00:09,853
Vamos a obtener una breve visión general del soporte de animación en angular antes de ir y

3
00:00:09,853 --> 00:00:15,820
probar nuestra suerte en realidad implementar algunas animaciones en nuestra aplicación angular.

4
00:00:17,010 --> 00:00:18,290
Como se da cuenta, las animaciones

5
00:00:18,290 --> 00:00:23,800
en sí mismas no agregan a la funcionalidad de su aplicación Angular.

6
00:00:23,800 --> 00:00:27,210
Entonces surge la pregunta, ¿por qué usar animaciones?

7
00:00:27,210 --> 00:00:31,420
Ahora, si lo miras desde la experiencia del usuario, o

8
00:00:31,420 --> 00:00:36,250
la perspectiva del diseño de la interfaz de usuario, entonces comienzas a ver que las animaciones

9
00:00:36,250 --> 00:00:40,860
tienen un significado y un propósito para su uso en una aplicación.

10
00:00:41,860 --> 00:00:46,360
El dar retroalimentación visual al usuario acerca de

11
00:00:46,360 --> 00:00:49,560
cosas que están sucediendo dentro de su aplicación angular.

12
00:00:49,560 --> 00:00:54,920
Así que puede tener una aplicación completamente desprovista de animaciones y

13
00:00:54,920 --> 00:00:58,050
que todavía proporciona el mismo conjunto de funcionalidades.

14
00:00:58,050 --> 00:01:00,710
Así que eso es algo que tenemos que tener en cuenta

15
00:01:00,710 --> 00:01:05,280
cuando estamos introduciendo animaciones en nuestra aplicación angular.

16
00:01:05,280 --> 00:01:12,150
Las animaciones no son necesarias o necesarias, pero

17
00:01:12,150 --> 00:01:18,940
añaden esa pequeña especia a tu aplicación angular, si estás manteniendo esa vista en

18
00:01:18,940 --> 00:01:24,090
tu mente, entonces te acercarás a la animación desde una perspectiva completamente diferente.

19
00:01:25,380 --> 00:01:31,890
Es como no agregar demasiada sal a tus platos solo porque la sal agrega sabor.

20
00:01:33,030 --> 00:01:36,340
A gran parte de la sal también estropea su plato.

21
00:01:36,340 --> 00:01:38,630
Lo mismo con animaciones también.

22
00:01:38,630 --> 00:01:42,370
Demasiadas animaciones y terminas con un usuario confundido.

23
00:01:43,400 --> 00:01:48,790
Pero las animaciones, agregadas sutilmente para dar sugerencias a los usuarios, o

24
00:01:48,790 --> 00:01:55,545
dar retroalimentación visual a los usuarios, agregan mucho valor a su aplicación angular.

25
00:01:55,545 --> 00:02:00,295
Ahora, afortunadamente, el marco de material angular que ya estamos utilizando dentro de

26
00:02:00,295 --> 00:02:05,825
nuestra aplicación angular, viene con su propio conjunto integrado de animaciones.

27
00:02:05,825 --> 00:02:10,074
De hecho, esa es la razón por la que incluimos el módulo de animación del navegador.

28
00:02:10,074 --> 00:02:15,060
En nuestra aplicación angular desde el principio porque el material angular

29
00:02:15,060 --> 00:02:19,950
ya aprovecha el soporte de animación que

30
00:02:21,350 --> 00:02:25,445
angular proporciona o es animación.

31
00:02:25,445 --> 00:02:30,135
Así que la biblioteca de material angular

32
00:02:30,135 --> 00:02:35,840
utiliza las animaciones sugeridas que vienen con el diseño del material.

33
00:02:35,840 --> 00:02:38,700
Cosas como, por ejemplo, cuando haces clic en un botón,

34
00:02:38,700 --> 00:02:43,980
los efectos de ondulación que ves en el botón y el sutil aumento,

35
00:02:43,980 --> 00:02:50,220
y contracción de diferentes partes de tu vista, etc.

36
00:02:50,220 --> 00:02:55,010
Estos ya son sugeridos por el enfoque de diseño de materiales, y

37
00:02:55,010 --> 00:02:58,840
por lo que el material angular ya adopta muchas de esas cosas.

38
00:02:58,840 --> 00:03:03,140
Así que incluso sin poner explícitamente en esfuerzo,

39
00:03:03,140 --> 00:03:08,100
automáticamente obtienes algunas de las animaciones requeridas en

40
00:03:08,100 --> 00:03:11,950
tu aplicación angular solo usando material angular.

41
00:03:11,950 --> 00:03:17,640
Pero supongamos que quieres añadir tu propia especia a la mezcla.

42
00:03:17,640 --> 00:03:21,030
Entonces, ¿cómo te enfocas a las animaciones en angular?

43
00:03:21,030 --> 00:03:25,510
Esto es lo que veremos rápidamente en esta conferencia.

44
00:03:25,510 --> 00:03:31,091
Y luego pasar al ejercicio donde implementaremos fu y veremos si tenemos sentido

45
00:03:31,091 --> 00:03:37,402
o si marcan una diferencia en la forma en que percibes tu aplicación angular.

46
00:03:39,145 --> 00:03:42,053
La idea detrás del soporte de Angular para animaciones

47
00:03:42,053 --> 00:03:46,723
es que le permite construir animaciones con un rendimiento nativo casi

48
00:03:46,723 --> 00:03:52,270
de lo que obtendrá con animaciones CSS puras.

49
00:03:52,270 --> 00:03:55,300
Ahora usted puede preguntarse inmediatamente en su mente,

50
00:03:55,300 --> 00:03:57,690
¿por qué no simplemente usar animaciones CSS puras?

51
00:03:57,690 --> 00:04:01,810
De hecho, también puedes hacer eso, pero no hay nada que te impida usar animaciones CSS puro

52
00:04:01,810 --> 00:04:04,930
dentro de tu aplicación Angular.

53
00:04:04,930 --> 00:04:09,880
Pero la ventaja de hacer uso de

54
00:04:09,880 --> 00:04:14,660
el enfoque angular para introducir animaciones es que angular,

55
00:04:14,660 --> 00:04:19,280
en primer lugar, aprovecha el soporte de la API de animaciones web que es

56
00:04:19,280 --> 00:04:24,620
compatible con las versiones más modernas de todos los navegadores.

57
00:04:24,620 --> 00:04:29,540
Ahora, por lo que si la versión de su navegador ya es compatible con la API de Animaciones Web,

58
00:04:29,540 --> 00:04:32,380
entonces Angular simplemente aproveche un comienzo para

59
00:04:32,380 --> 00:04:36,640
admitir las animaciones que incluirá dentro de su aplicación Angular.

60
00:04:36,640 --> 00:04:39,970
Si no, entonces necesita usar un polyfill

61
00:04:39,970 --> 00:04:45,270
llamado web-animations.min.js en su aplicación Angular.

62
00:04:45,270 --> 00:04:49,190
En los ejercicios, comenzaremos con la suposición de que nos dirigimos a los navegadores

63
00:04:49,190 --> 00:04:53,355
modernos, por lo que no estoy incluyendo explícitamente el polyfill.

64
00:04:53,355 --> 00:04:59,625
Si decide hacerlo, la documentación de animaciones angulares

65
00:04:59,625 --> 00:05:05,395
le indica explícitamente cómo rellenar eso para dirigirse a navegadores más antiguos.

66
00:05:05,395 --> 00:05:07,425
Así que de nuevo, volviendo a la pregunta,

67
00:05:07,425 --> 00:05:13,440
¿por qué no usar animación CSS pura en lugar de usar animación angular?

68
00:05:13,440 --> 00:05:15,850
Ahora aquí es donde

69
00:05:15,850 --> 00:05:20,560
la ventaja de usar la animación angular dentro de su aplicación pasa a primer plano.

70
00:05:20,560 --> 00:05:24,710
El hecho de que las animaciones angulares están estrechamente unidas

71
00:05:24,710 --> 00:05:28,710
con su código que escribe para su aplicación Angular.

72
00:05:28,710 --> 00:05:32,740
Y por lo tanto, puede desencadenar muchas de estas animaciones vinculadas en

73
00:05:32,740 --> 00:05:37,330
directamente a la forma en que su aplicación angular está evolucionando, y

74
00:05:37,330 --> 00:05:40,560
lo que está sucediendo dentro de su aplicación angular.

75
00:05:40,560 --> 00:05:45,610
Así que puedes vincularlo al ciclo de vida de tus componentes.

76
00:05:45,610 --> 00:05:50,356
Puede vincularlo a las diversas etapas de cómo la vista cambia a sí misma

77
00:05:50,356 --> 00:05:53,290
mientras está renderizando la vista.

78
00:05:53,290 --> 00:06:00,130
Y entonces esa ventaja que obtienes al usar la biblioteca de animaciones angulares,

79
00:06:00,130 --> 00:06:05,870
en lugar de animaciones CSS puras, es algo que vale la pena considerar.

80
00:06:05,870 --> 00:06:09,140
¿Cómo abordamos las animaciones en Angular?

81
00:06:09,140 --> 00:06:12,730
Las animaciones en sí mismas se construyen alrededor de estados y transiciones

82
00:06:12,730 --> 00:06:17,850
entre estados en el marco Angular, por lo que

83
00:06:17,850 --> 00:06:22,440
definimos diferentes estados, el estado podría ser cualquier cosa menos

84
00:06:22,440 --> 00:06:27,500
que desea definir como un estado desde la perspectiva de la animación.

85
00:06:27,500 --> 00:06:31,290
Cualquier cambio de estado que desee provocar

86
00:06:31,290 --> 00:06:35,330
puede activar el efecto de animación para que aparezca en la imagen.

87
00:06:35,330 --> 00:06:39,840
Por lo tanto, las transiciones a lo largo de los estados activarán el comportamiento de animación

88
00:06:39,840 --> 00:06:41,550
dentro de su aplicación angular.

89
00:06:41,550 --> 00:06:46,080
Como veremos en la siguiente diapositiva donde te mostraré un ejemplo de

90
00:06:46,080 --> 00:06:50,468
cómo puedes usar cintas y transiciones para activar la animación.

91
00:06:50,468 --> 00:06:56,260
Por lo tanto, el aspecto de animación de su aplicación angular

92
00:06:56,260 --> 00:07:01,420
se define dentro del decorador de componentes que usa dentro de sus componentes.

93
00:07:01,420 --> 00:07:06,140
Así que el decorador de componentes tiene una propiedad de colores animaciones que

94
00:07:06,140 --> 00:07:11,600
utilizará para definir los valores disparadores para sus animaciones.

95
00:07:11,600 --> 00:07:13,650
Así que he usado la palabra disparador.

96
00:07:13,650 --> 00:07:17,400
En los ejercicios, verá cómo implementaremos los desencadenadores para animaciones

97
00:07:17,400 --> 00:07:22,370
y cómo aplicaremos los desencadenadores a varios elementos de plantilla,

98
00:07:22,370 --> 00:07:27,520
y luego activaremos esas animaciones bajo ciertas circunstancias.

99
00:07:27,520 --> 00:07:31,680
Y además, cuando necesite usar animaciones dentro de su aplicación Angular

100
00:07:31,680 --> 00:07:36,550
, primero y ante todo, necesita importar el módulo de animaciones del navegador.

101
00:07:36,550 --> 00:07:41,330
Ya lo hemos hecho en nuestro primer ejercicio porque

102
00:07:41,330 --> 00:07:45,840
el módulo de animación del navegador era necesario para soportar material angular.

103
00:07:45,840 --> 00:07:50,269
Ahora, además, cuando esté implementando animaciones dentro de sus componentes.

104
00:07:51,280 --> 00:07:55,840
Entonces necesitaría la ayuda de clases de radio como trigger, state,

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

106
00:07:56,610 --> 00:08:01,550
transition, que tienen que importarse desde la biblioteca de animaciones Angular.

107
00:08:01,550 --> 00:08:08,010
Y lo haremos dentro de cada componente que requiera usar animaciones.

108
00:08:08,010 --> 00:08:12,930
Como mencioné en la diapositiva anterior, el comportamiento de animación en su aplicación angular

109
00:08:12,930 --> 00:08:17,960
gira en torno a estados y transiciones entre los estados.

110
00:08:17,960 --> 00:08:21,470
Los estados pueden ser cualquier cosa que usted defina como un estado.

111
00:08:21,470 --> 00:08:26,280
Como verá en el ejemplo que sigue en el primer ejercicio después de esta conferencia

112
00:08:26,280 --> 00:08:30,650
se han definido 2 estados llamados mostrados y ocultos.

113
00:08:30,650 --> 00:08:33,600
Desde el nombre del estado usted automáticamente

114
00:08:33,600 --> 00:08:37,920
comienza a adivinar lo que estos dos estados implican.

115
00:08:37,920 --> 00:08:42,800
Ahora, cuando se mueve del estado mostrado al estado oculto, la transición

116
00:08:42,800 --> 00:08:46,970
del estado mostrado al estado oculto activará una especie de animación.

117
00:08:46,970 --> 00:08:50,780
Así que tal vez escondas un elemento dentro de tu vista

118
00:08:52,170 --> 00:08:56,360
cambiando la opacidad del elemento,

119
00:08:56,360 --> 00:09:00,240
opacidad que significa cuán transparente es el elemento y opacidad de

120
00:09:00,240 --> 00:09:05,260
uno significa que el elemento es completamente opaco y visible en la pantalla.

121
00:09:05,260 --> 00:09:10,360
Si establece la opacidad en cero, el elemento desaparece por completo de la pantalla.

122
00:09:10,360 --> 00:09:13,260
No estamos eliminando ese elemento de

123
00:09:13,260 --> 00:09:18,110
simplemente ocultando ese elemento cambiando su opacidad.

124
00:09:18,110 --> 00:09:21,350
Así que, de esa manera sería algo que puedes activar.

125
00:09:21,350 --> 00:09:24,070
Del mismo modo, puede cambiar el tamaño de un elemento.

126
00:09:24,070 --> 00:09:30,740
Puede expandir o contraer el tamaño de un elemento aplicando una transformación a

127
00:09:30,740 --> 00:09:36,470
esa propiedad del elemento mediante la transformación de escala para el elemento.

128
00:09:36,470 --> 00:09:41,190
Veremos ejemplos como dije en el ejercicio que sigue.

129
00:09:41,190 --> 00:09:45,670
Así que todas las animaciones que describa dentro de su aplicación Angular

130
00:09:45,670 --> 00:09:49,590
dentro de la directiva de componentes utilizando la propiedad animations

131
00:09:49,590 --> 00:09:54,620
girarán en torno a estados y transiciones entre los estados.

132
00:09:54,620 --> 00:09:58,350
Cuando se habla de estados y transiciones, hay algunos estados

133
00:09:58,350 --> 00:10:03,400
especiales que debemos tener en cuenta cuando definamos estas transiciones.

134
00:10:03,400 --> 00:10:06,810
Uno de esos estados es llamado como un estado vacío.

135
00:10:06,810 --> 00:10:09,580
Y elemento que no está en la pantalla.

136
00:10:09,580 --> 00:10:13,240
Se considerará que un elemento o una vista de partículas que no esté asociada a la vista

137
00:10:13,240 --> 00:10:15,880
está en estado vacío.

138
00:10:15,880 --> 00:10:18,510
Así que cuando el elemento aparece en la vista,

139
00:10:18,510 --> 00:10:23,940
que si está unido al por ejemplo, entonces el elemento pasa de

140
00:10:23,940 --> 00:10:29,590
el estado vacío a uno de los estados existentes de ese elemento.

141
00:10:29,590 --> 00:10:30,410
Así que en ese caso,

142
00:10:30,410 --> 00:10:35,680
puedes definir una transición alrededor de pasar de vacío a un estado dado.

143
00:10:35,680 --> 00:10:40,580
Del mismo modo, también tiene otro estado llamado como estado comodín o

144
00:10:40,580 --> 00:10:45,870
está definido por estrella, lo que significa que no le importa qué estado es.

145
00:10:45,870 --> 00:10:48,464
Así que si necesitas definir una transición puedes decir,

146
00:10:48,464 --> 00:10:52,832
si vas de un estado vacío al estado estrella, es decir, de estado vacío a cualquier otro estado

147
00:10:52,832 --> 00:10:58,260
que estés en transición, entonces puedes aplicar una transformación particular.

148
00:10:58,260 --> 00:11:02,970
Así que estas son las dos formas especiales de definir ciertos estados

149
00:11:02,970 --> 00:11:07,130
cuando define su animación dentro del decorador de componentes.

150
00:11:08,570 --> 00:11:13,430
Así que, en particular, hay un par de formas de

151
00:11:13,430 --> 00:11:18,410
que describen transiciones que son de especial interés para el curso.

152
00:11:18,410 --> 00:11:23,050
Una transición del estado vacío a cualquier estado se puede describir simplemente usando

153
00:11:23,050 --> 00:11:27,876
colon enter, en lugar de decir estrella de flecha vacía.

154
00:11:27,876 --> 00:11:32,520
Así que verán que vamos a utilizar la flecha

155
00:11:32,520 --> 00:11:34,610
para describir las transiciones entre el estado.

156
00:11:34,610 --> 00:11:40,540
Así que esa es la sintaxis que me verás usando cuando construya las transiciones.

157
00:11:40,540 --> 00:11:41,260
Del mismo modo, por lo que

158
00:11:41,260 --> 00:11:46,700
un vacío a cualquier otro estado puede ser descrito simplemente usando dos puntos enter.

159
00:11:46,700 --> 00:11:50,060
Entonces, lo que significa que esta vista está entrando en

160
00:11:50,060 --> 00:11:52,760
la vista que se está colocando en la pantalla.

161
00:11:52,760 --> 00:11:56,190
Del mismo modo, una transición de cualquier estado al estado vacío,

162
00:11:56,190 --> 00:12:00,130
significa que está eliminando ese elemento de la vista.

163
00:12:00,130 --> 00:12:05,510
Eso sería también, podría especificarse como licencia de dos puntos,

164
00:12:05,510 --> 00:12:09,400
lo que significa que este elemento se está dejando de esa vista en particular.

165
00:12:09,400 --> 00:12:13,860
Así que me verán usando colon enter y colon leave también donde describí

166
00:12:14,970 --> 00:12:21,130
las transiciones en el segundo ejercicio que verán en esta lección.

167
00:12:21,130 --> 00:12:26,945
Entonces, con esta rápida comprensión de animaciones en angular.

168
00:12:26,945 --> 00:12:29,935
Veamos cómo escribimos realmente el código.

169
00:12:29,935 --> 00:12:35,873
Y para hacer eso, pasaremos a los ejercicios donde os ilustramos,

170
00:12:35,873 --> 00:12:40,494
cómo usamos este conocimiento que acabamos de ganar acerca de cómo

171
00:12:40,494 --> 00:12:45,777
animaciones se describen en angular para escribir el código de salto tipo para

172
00:12:45,777 --> 00:12:49,458
construyendo y aplicando las animaciones para

173
00:12:49,458 --> 00:12:53,830
varios elementos dentro de nuestro vistas de nuestros componentes.

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