Angular7 - Animações

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

Para começar, precisamos importar a biblioteca com a linha de código abaixo -

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      ReactiveFormsModule,
      BrowserAnimationsModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

Dentro 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, a diretiva @myanimation é 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 { FormGroup, FormControl, Validators} from '@angular/forms';
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.

A função de estado 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 assume os estados inicial e final, o segundo argumento aceita a função animada. A função animar permite que você defina a duração, atraso e facilidade 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 na diretiva @component, 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 noapp.component.ts Arquivo.

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

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á parecido com -

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 na direção y, que é alterada de 0 para 100px quando clicamos no botão Click Me. A imagem é armazenada noassets/images pasta.