Angular 4 - Animações

As animações adicionam muita interação entre os elementos html. A animação também estava disponível com Angular2. A diferença com o Angular 4 é que a animação não faz mais parte do@angular/core biblioteca, mas é um pacote separado que precisa ser importado em app.module.ts.

Para começar, precisamos importar a biblioteca da seguinte maneira -

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

o BrowserAnimationsModule precisa ser adicionado ao array de importação em app.module.ts como mostrado abaixo -

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

No app.component.html, adicionamos os elementos html, que devem ser animados.

<div>
   <button (click)="animate()">Click Me</button>
   <div [@myanimation] = "state" class="rotate">
      <img src="assets/images/img.png" width="100" height="100">
   </div>
</div>

Para o div principal, adicionamos um botão e um div com uma imagem. Há um evento de clique para o qual a função animar é chamada. E para o div, o@myanimation diretiva é adicionada e recebe o valor como estado.

Vamos agora ver o app.component.ts onde a animação é definida.

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   styles:[`
      div{
         margin: 0 auto;
         text-align: center;
         width:200px;
      }
      .rotate{
         width:100px;
         height:100px;
         border:solid 1px red;
      }
   `],
   animations: [
      trigger('myanimation',[
         state('smaller',style({
            transform : 'translateY(100px)'
         })),
         state('larger',style({
            transform : 'translateY(0px)'
         })),
         transition('smaller <=> larger',animate('300ms ease-in'))
      ])
   ]
})

export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == 'larger' ? 'smaller' : 'larger';
   }
}

Temos que importar a função de animação que será usada no arquivo .ts conforme mostrado acima.

import { trigger, state, style, transition, animate } from '@angular/animations';

Aqui importamos gatilho, estado, estilo, transição e animação de @ angular / animations.

Agora, vamos adicionar a propriedade animations ao decorador @Component () -

animations: [
   trigger('myanimation',[
      state('smaller',style({
         transform : 'translateY(100px)'
      })),
      state('larger',style({
         transform : 'translateY(0px)'
      })),
      transition('smaller <=> larger',animate('300ms ease-in'))
   ])
]

Trigger define o início da animação. O primeiro parâmetro é o nome da animação a ser dado à tag html à qual a animação deve ser aplicada. O segundo parâmetro são as funções que importamos - estado, transição, etc.

o statefunção envolve as etapas de animação, entre as quais o elemento fará a transição. No momento, definimos dois estados, menor e maior. Para estados menores, demos o estilotransform:translateY(100px) e transform:translateY(100px).

A função de transição adiciona animação ao elemento html. O primeiro argumento leva os estados, ou seja, início e fim; o segundo argumento aceita a função animate. A função animar permite que você defina a duração, atraso e atenuação de uma transição.

Vamos agora ver o arquivo .html para ver como funciona a função de transição

<div>
   <button (click)="animate()">Click Me</button>
   <div [@myanimation] = "state" class="rotate">
      <img src="assets/images/img.png" width="100" height="100">
   </div>
</div>

Há uma propriedade de estilo adicionada no @componentdiretiva, que alinha centralmente o div. Vamos considerar o seguinte exemplo para entender o mesmo -

styles:[`
   div{
      margin: 0 auto;
      text-align: center;
      width:200px;
   }
   .rotate{
      width:100px;
      height:100px;
      border:solid 1px red;
   }
`],

Aqui, um caractere especial [``] é usado para adicionar estilos ao elemento html, se houver. Para o div, demos o nome da animação definido no arquivo app.component.ts.

Com o clique de um botão, ele chama a função animar, que é definida no arquivo app.component.ts da seguinte maneira -

export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == ‘larger’? 'smaller' : 'larger';
   }
}

A variável de estado é definida e recebe o valor padrão como menor. A função animar muda o estado no clique. Se o estado for maior, ele se converterá em menor; e se for menor, será convertido em maior.

É assim que a saída no navegador (http://localhost:4200/) será semelhante a -

Ao clicar no Click Me botão, a posição da imagem é alterada conforme mostrado na imagem a seguir -

A função de transformação é aplicada no ydireção, que é alterada de 0 para 100 px quando o botão Click Me é clicado. A imagem é armazenada noassets/images pasta.