[MUSIC]
Vamos a obtener una breve visión general del soporte de animación en angular antes de ir y
probar nuestra suerte en realidad implementar algunas animaciones en nuestra aplicación angular.
Como se da cuenta, las animaciones
en sí mismas no agregan a la funcionalidad de su aplicación Angular.
Entonces surge la pregunta, ¿por qué usar animaciones?
Ahora, si lo miras desde la experiencia del usuario, o
la perspectiva del diseño de la interfaz de usuario, entonces comienzas a ver que las animaciones
tienen un significado y un propósito para su uso en una aplicación.
El dar retroalimentación visual al usuario acerca de
cosas que están sucediendo dentro de su aplicación angular.
Así que puede tener una aplicación completamente desprovista de animaciones y
que todavía proporciona el mismo conjunto de funcionalidades.
Así que eso es algo que tenemos que tener en cuenta
cuando estamos introduciendo animaciones en nuestra aplicación angular.
Las animaciones no son necesarias o necesarias, pero
añaden esa pequeña especia a tu aplicación angular, si estás manteniendo esa vista en
tu mente, entonces te acercarás a la animación desde una perspectiva completamente diferente.
Es como no agregar demasiada sal a tus platos solo porque la sal agrega sabor.
A gran parte de la sal también estropea su plato.
Lo mismo con animaciones también.
Demasiadas animaciones y terminas con un usuario confundido.
Pero las animaciones, agregadas sutilmente para dar sugerencias a los usuarios, o
dar retroalimentación visual a los usuarios, agregan mucho valor a su aplicación angular.
Ahora, afortunadamente, el marco de material angular que ya estamos utilizando dentro de
nuestra aplicación angular, viene con su propio conjunto integrado de animaciones.
De hecho, esa es la razón por la que incluimos el módulo de animación del navegador.
En nuestra aplicación angular desde el principio porque el material angular
ya aprovecha el soporte de animación que
angular proporciona o es animación.
Así que la biblioteca de material angular
utiliza las animaciones sugeridas que vienen con el diseño del material.
Cosas como, por ejemplo, cuando haces clic en un botón,
los efectos de ondulación que ves en el botón y el sutil aumento,
y contracción de diferentes partes de tu vista, etc.
Estos ya son sugeridos por el enfoque de diseño de materiales, y
por lo que el material angular ya adopta muchas de esas cosas.
Así que incluso sin poner explícitamente en esfuerzo,
automáticamente obtienes algunas de las animaciones requeridas en
tu aplicación angular solo usando material angular.
Pero supongamos que quieres añadir tu propia especia a la mezcla.
Entonces, ¿cómo te enfocas a las animaciones en angular?
Esto es lo que veremos rápidamente en esta conferencia.
Y luego pasar al ejercicio donde implementaremos fu y veremos si tenemos sentido
o si marcan una diferencia en la forma en que percibes tu aplicación angular.
La idea detrás del soporte de Angular para animaciones
es que le permite construir animaciones con un rendimiento nativo casi
de lo que obtendrá con animaciones CSS puras.
Ahora usted puede preguntarse inmediatamente en su mente,
¿por qué no simplemente usar animaciones CSS puras?
De hecho, también puedes hacer eso, pero no hay nada que te impida usar animaciones CSS puro
dentro de tu aplicación Angular.
Pero la ventaja de hacer uso de
el enfoque angular para introducir animaciones es que angular,
en primer lugar, aprovecha el soporte de la API de animaciones web que es
compatible con las versiones más modernas de todos los navegadores.
Ahora, por lo que si la versión de su navegador ya es compatible con la API de Animaciones Web,
entonces Angular simplemente aproveche un comienzo para
admitir las animaciones que incluirá dentro de su aplicación Angular.
Si no, entonces necesita usar un polyfill
llamado web-animations.min.js en su aplicación Angular.
En los ejercicios, comenzaremos con la suposición de que nos dirigimos a los navegadores
modernos, por lo que no estoy incluyendo explícitamente el polyfill.
Si decide hacerlo, la documentación de animaciones angulares
le indica explícitamente cómo rellenar eso para dirigirse a navegadores más antiguos.
Así que de nuevo, volviendo a la pregunta,
¿por qué no usar animación CSS pura en lugar de usar animación angular?
Ahora aquí es donde
la ventaja de usar la animación angular dentro de su aplicación pasa a primer plano.
El hecho de que las animaciones angulares están estrechamente unidas
con su código que escribe para su aplicación Angular.
Y por lo tanto, puede desencadenar muchas de estas animaciones vinculadas en
directamente a la forma en que su aplicación angular está evolucionando, y
lo que está sucediendo dentro de su aplicación angular.
Así que puedes vincularlo al ciclo de vida de tus componentes.
Puede vincularlo a las diversas etapas de cómo la vista cambia a sí misma
mientras está renderizando la vista.
Y entonces esa ventaja que obtienes al usar la biblioteca de animaciones angulares,
en lugar de animaciones CSS puras, es algo que vale la pena considerar.
¿Cómo abordamos las animaciones en Angular?
Las animaciones en sí mismas se construyen alrededor de estados y transiciones
entre estados en el marco Angular, por lo que
definimos diferentes estados, el estado podría ser cualquier cosa menos
que desea definir como un estado desde la perspectiva de la animación.
Cualquier cambio de estado que desee provocar
puede activar el efecto de animación para que aparezca en la imagen.
Por lo tanto, las transiciones a lo largo de los estados activarán el comportamiento de animación
dentro de su aplicación angular.
Como veremos en la siguiente diapositiva donde te mostraré un ejemplo de
cómo puedes usar cintas y transiciones para activar la animación.
Por lo tanto, el aspecto de animación de su aplicación angular
se define dentro del decorador de componentes que usa dentro de sus componentes.
Así que el decorador de componentes tiene una propiedad de colores animaciones que
utilizará para definir los valores disparadores para sus animaciones.
Así que he usado la palabra disparador.
En los ejercicios, verá cómo implementaremos los desencadenadores para animaciones
y cómo aplicaremos los desencadenadores a varios elementos de plantilla,
y luego activaremos esas animaciones bajo ciertas circunstancias.
Y además, cuando necesite usar animaciones dentro de su aplicación Angular
, primero y ante todo, necesita importar el módulo de animaciones del navegador.
Ya lo hemos hecho en nuestro primer ejercicio porque
el módulo de animación del navegador era necesario para soportar material angular.
Ahora, además, cuando esté implementando animaciones dentro de sus componentes.
Entonces necesitaría la ayuda de clases de radio como trigger, state,
style, animate,
transition, que tienen que importarse desde la biblioteca de animaciones Angular.
Y lo haremos dentro de cada componente que requiera usar animaciones.
Como mencioné en la diapositiva anterior, el comportamiento de animación en su aplicación angular
gira en torno a estados y transiciones entre los estados.
Los estados pueden ser cualquier cosa que usted defina como un estado.
Como verá en el ejemplo que sigue en el primer ejercicio después de esta conferencia
se han definido 2 estados llamados mostrados y ocultos.
Desde el nombre del estado usted automáticamente
comienza a adivinar lo que estos dos estados implican.
Ahora, cuando se mueve del estado mostrado al estado oculto, la transición
del estado mostrado al estado oculto activará una especie de animación.
Así que tal vez escondas un elemento dentro de tu vista
cambiando la opacidad del elemento,
opacidad que significa cuán transparente es el elemento y opacidad de
uno significa que el elemento es completamente opaco y visible en la pantalla.
Si establece la opacidad en cero, el elemento desaparece por completo de la pantalla.
No estamos eliminando ese elemento de
simplemente ocultando ese elemento cambiando su opacidad.
Así que, de esa manera sería algo que puedes activar.
Del mismo modo, puede cambiar el tamaño de un elemento.
Puede expandir o contraer el tamaño de un elemento aplicando una transformación a
esa propiedad del elemento mediante la transformación de escala para el elemento.
Veremos ejemplos como dije en el ejercicio que sigue.
Así que todas las animaciones que describa dentro de su aplicación Angular
dentro de la directiva de componentes utilizando la propiedad animations
girarán en torno a estados y transiciones entre los estados.
Cuando se habla de estados y transiciones, hay algunos estados
especiales que debemos tener en cuenta cuando definamos estas transiciones.
Uno de esos estados es llamado como un estado vacío.
Y elemento que no está en la pantalla.
Se considerará que un elemento o una vista de partículas que no esté asociada a la vista
está en estado vacío.
Así que cuando el elemento aparece en la vista,
que si está unido al por ejemplo, entonces el elemento pasa de
el estado vacío a uno de los estados existentes de ese elemento.
Así que en ese caso,
puedes definir una transición alrededor de pasar de vacío a un estado dado.
Del mismo modo, también tiene otro estado llamado como estado comodín o
está definido por estrella, lo que significa que no le importa qué estado es.
Así que si necesitas definir una transición puedes decir,
si vas de un estado vacío al estado estrella, es decir, de estado vacío a cualquier otro estado
que estés en transición, entonces puedes aplicar una transformación particular.
Así que estas son las dos formas especiales de definir ciertos estados
cuando define su animación dentro del decorador de componentes.
Así que, en particular, hay un par de formas de
que describen transiciones que son de especial interés para el curso.
Una transición del estado vacío a cualquier estado se puede describir simplemente usando
colon enter, en lugar de decir estrella de flecha vacía.
Así que verán que vamos a utilizar la flecha
para describir las transiciones entre el estado.
Así que esa es la sintaxis que me verás usando cuando construya las transiciones.
Del mismo modo, por lo que
un vacío a cualquier otro estado puede ser descrito simplemente usando dos puntos enter.
Entonces, lo que significa que esta vista está entrando en
la vista que se está colocando en la pantalla.
Del mismo modo, una transición de cualquier estado al estado vacío,
significa que está eliminando ese elemento de la vista.
Eso sería también, podría especificarse como licencia de dos puntos,
lo que significa que este elemento se está dejando de esa vista en particular.
Así que me verán usando colon enter y colon leave también donde describí
las transiciones en el segundo ejercicio que verán en esta lección.
Entonces, con esta rápida comprensión de animaciones en angular.
Veamos cómo escribimos realmente el código.
Y para hacer eso, pasaremos a los ejercicios donde os ilustramos,
cómo usamos este conocimiento que acabamos de ganar acerca de cómo
animaciones se describen en angular para escribir el código de salto tipo para
construyendo y aplicando las animaciones para
varios elementos dentro de nuestro vistas de nuestros componentes.
[MÚSICA]