[MÚSICA]
Vamos ter uma breve visão geral do suporte de animação em angular antes de ir e
tentar a nossa mão em realmente implementar algumas animações em nossa aplicação angular.
Como você percebe,
animações em si não adicionam à funcionalidade do seu aplicativo Angular.
Então surge a pergunta, por que usar animações?
Agora, se você olhar para ele a partir da experiência do usuário, ou
a perspectiva de design da interface do usuário, então você começa a ver que animações
têm um significado e um propósito para seu uso em um aplicativo.
O dar feedback visual ao usuário sobre
coisas que estão acontecendo dentro de seu aplicativo angular.
Então você pode ter um aplicativo completamente desprovido de animações e
que ele ainda fornece o mesmo conjunto de funcionalidades.
Então isso é algo que precisamos ter em mente
quando estamos introduzindo animações em nossa aplicação angular.
Animações não são necessárias ou necessárias, mas
eles adicionam esse pequeno tempero à sua aplicação angular, se você estiver mantendo essa visão em
sua mente, então você vai abordar a animação de uma perspectiva completamente diferente.
É como não adicionar muito sal em seus pratos só porque o sal adiciona sabor.
A grande parte do sal também estraga seu prato.
A mesma coisa com animações também.
Muita animações e você acaba com um usuário confuso.
Mas animações, adicionadas sutilmente para dar sugestões aos usuários, ou
dar feedback visual aos usuários, adicionar muito valor à sua aplicação angular.
Felizmente, a estrutura de material angular que já estamos usando dentro
nossa aplicação angular, vem com seu próprio conjunto construído de animações.
Na verdade, essa é a razão pela qual incluímos o módulo de animação do navegador.
Em nossa aplicação angular logo no início porque angular
material já aproveita o suporte de animação que
angular fornece através ou é animação.
Então, a biblioteca de material angular
usa as animações sugeridas que vêm com o design do material.
Coisas como, por exemplo, quando você clica em um botão,
os efeitos de ondulação que você vê no botão e o aumento sutil,
e encolhimento de diferentes partes de sua visão, e assim por diante.
Estes já são sugeridos pela abordagem de design de material, e
material tão angular já adota muitas dessas coisas.
Então, mesmo sem explicitamente colocar em esforço,
você automaticamente obter algumas das animações necessárias em
sua aplicação angular apenas usando material angular.
Mas suponha que você queira adicionar seu próprio tempero à mistura.
Então, como você aborda animações em angular?
Isto é o que vamos olhar rapidamente nesta palestra.
E, em seguida, passar para o exercício onde vamos implementar fu e ver se fazemos
sentido ou se eles fazem a diferença na forma como você percebe sua aplicação Angular.
A idéia por trás do suporte do Angular para
animações é que ele permite que você crie animações com quase
desempenho nativo do que você obterá com animações CSS puras.
Agora você pode imediatamente se perguntar em sua mente,
por que não apenas usar animações CSS puras?
Na verdade, você pode fazer isso também, mas não há nada impedindo você de usar
animações CSS puras dentro de seu aplicativo Angular.
Mas a vantagem de fazer uso de
a abordagem angular para introduzir animações é que angular,
em primeiro lugar, aproveita o suporte da API web-animações que é
suportado nas versões mais modernas de todos os navegadores.
Agora, então, se a versão do seu navegador já suporta a API de Animações Web,
então Angular simplesmente aproveita um começo para
suporta as animações que você incluirá em seu aplicativo Angular.
Se não, então você precisa usar um polyfill
chamado web-animations.min.js em seu aplicativo Angular.
Nos exercícios, vamos começar com a suposição de que estamos direcionando navegadores
modernos, então eu não estou explicitamente incluindo o polyfill.
Se você decidir fazer isso, a documentação de animações angulares
explicitamente lhe diz como preenchê-lo para segmentar navegadores mais antigos.
Então, novamente, voltando à pergunta,
por que não usar animação CSS pura em vez de usar animação angular?
Agora é aqui que
a vantagem de usar a animação angular dentro da sua aplicação vem à tona.
O fato de que as animações angulares são fortemente acopladas
com seu código que você escreve para seu aplicativo Angular.
E, portanto, você pode acionar muitas dessas animações vinculadas em
diretamente à maneira como sua aplicação angular está evoluindo, e
o que está acontecendo dentro de sua aplicação angular.
Assim, você pode vinculá-lo ao ciclo de vida de seus componentes.
Você pode vinculá-lo aos vários estágios de como a exibição se altera
enquanto você está renderizando a exibição.
E então essa vantagem que você obtém usando a biblioteca de animações angulares,
em vez de animações CSS puras, é algo que vale a pena considerar.
Como abordamos animações em Angular?
As animações em si são construídas em torno de estados e
transições entre estados no quadro Angular, então
definimos estados diferentes, estado poderia ser qualquer coisa, mas
você quer definir como um estado a partir da perspectiva da animação.
Qualquer alteração de estado que você deseja causar
pode acionar o efeito de animação para aparecer na imagem.
Assim, as transições ao longo dos estados irão acionar o comportamento de animação
dentro da sua aplicação angular.
Como veremos no próximo slide, onde mostrarei um exemplo de
como você pode usar fitas e transições para acionar a animação.
Assim, o aspecto de animação do aplicativo angular
é definido dentro do decorador de componentes que você usa dentro dos componentes.
Assim, o decorador componente tem uma propriedades cores animações que você
usará para definir os valores gatilhos para suas animações.
Então eu usei a palavra gatilho.
Nos exercícios, você verá como implementaremos os gatilhos para animações
e como aplicaremos os gatilhos a vários elementos de modelo,
e, em seguida, acionaremos essas animações sob determinadas circunstâncias.
E, além disso, quando você precisa usar animações dentro do seu aplicativo Angular
, em primeiro lugar, você precisa importar o módulo de animações do navegador.
Nós já fizemos isso em nosso primeiro exercício porque
o módulo de animação do navegador era necessário para suportar material angular.
Agora, além disso, quando você estiver implementando animações em seus componentes.
Então você precisaria da ajuda de classes de raio como trigger, state,
style, animate,
transição, que tem que ser importado da biblioteca de animações angulares.
E faremos isso dentro de cada componente que requer o uso de animações.
Como mencionei no slide anterior, o comportamento de animação em seu aplicativo
Angular gira em torno de estados e transições entre os estados.
Estados pode ser qualquer coisa que você define como um estado.
Como você verá no exemplo que se segue no primeiro exercício após esta aula
você foi definido 2 estados chamados mostrado e oculto.
Do nome do estado você automaticamente
começa a adivinhar o que esses dois estados implicam.
Agora, quando você mover do estado mostrado para o estado oculto, em seguida, a transição
do estado mostrado para o estado oculto irá acionar um tipo de animação.
Então, talvez você esconda um elemento dentro de sua visualização
alterando a opacidade do elemento,
opacidade significando quão transparente o elemento é e opacidade de
significa que o elemento é completamente opaco e visível na tela.
Se você definir a opacidade como zero, o elemento desaparece completamente da tela.
Não estamos removendo esse elemento de
o simplesmente escondendo esse elemento alterando sua opacidade.
Então, dessa forma seria algo que você pode acionar.
Da mesma forma, você pode alterar o tamanho de um elemento.
Você pode expandir ou contrair o tamanho de um elemento aplicando uma transformação a
essa propriedade elemento usando a transformação de escala para o elemento.
Vamos ver exemplos como eu disse no exercício que se segue.
Assim, todas as animações que você descrever dentro do seu aplicativo Angular
dentro da diretiva componente usando a propriedade animações
irão girar em torno de estados e transições entre os estados.
Quando você fala sobre estados e transições, há alguns estados
especiais que precisamos considerar quando definimos essas transições.
Um desses estados é chamado como um estado vazio.
E elemento que não está na tela.
Um elemento ou uma exibição de partícula que não está anexado à exibição
será considerado no estado vazio.
Então, quando o elemento aparece na view,
que se ele está anexado ao, por exemplo, o elemento faz a transição de
o estado vazio para um dos estados existentes desse elemento.
Então, nesse caso,
você pode definir uma transição em torno de ir de vazio para um determinado estado.
Da mesma forma, você também tem outro Estado chamado como um estado curinga ou
é definido por estrela, o que significa que você não se importa com qual estado é.
Então, se você precisa definir uma transição, você pode dizer,
se você estiver passando de um estado vazio para o estado estrela, ou seja, de estado vazio para qualquer outro estado
que você está fazendo a transição, então você pode aplicar uma transformação específica.
Então, estas são as duas maneiras especiais de definir certos estados
quando você define sua animação dentro do decorador de componentes.
Então, em particular, existem algumas maneiras de
descrevendo transições que são de especial interesse para o curso.
Uma transição do estado vazio para qualquer estado pode ser descrita simplesmente usando
dois-pontos enter, em vez de dizer void arrow star.
Então você verá que estaremos usando a seta
para descrever transições entre o estado.
Então essa é a sintaxe que você vai me ver usando quando eu construir as transições.
Da mesma forma,
um vazio para qualquer outro estado pode ser descrito simplesmente usando dois pontos enter.
Então, o que significa que esta vista está entrando em
a vista que está sendo colocada na tela.
Da mesma forma, uma transição de qualquer estado para o estado vazio,
o que significa que você está removendo esse elemento da exibição.
Isso seria também, poderia ser especificado como dois pontos de licença,
o que significa que este elemento está saindo dessa vista particular.
Então você vai me ver usando o cólon entrar e deixar cólon também onde eu descrevi
as transições no segundo exercício que você vai ver nesta lição.
Então, com esta rápida compreensão de animações em angular.
Vamos ver como realmente escrevemos o código.
E para fazer isso, vamos passar para os exercícios onde ilustramos para você,
como usamos esse conhecimento que acabamos de ganhar sobre como
animações são descritas em angular para escrever o código de salto tipo para
construindo e aplicando as animações para
vários elementos dentro do nosso visões de nossos componentes.
[MÚSICA]