Angular7 - Animaciones

Las animaciones agregan mucha interacción entre los elementos html. La animación estaba disponible con Angular 2, desde Angular 4 en adelante, la animación ya no forma parte de la biblioteca @ angular / core, pero es un paquete separado que debe importarse en app.module.ts.

Para empezar, necesitamos importar la biblioteca con la siguiente línea de código:

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

los BrowserAnimationsModule debe agregarse a la matriz de importación en app.module.ts como se muestra a continuación -

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 { }

En app.component.html, hemos agregado los elementos html, que serán 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 el div principal, hemos agregado un botón y un div con una imagen. Hay un evento de clic para el que se llama a la función animada. Y para el div, se agrega la directiva @myanimation y se le da el valor como estado.

Veamos ahora el app.component.ts donde se define la animación.

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';
   }
}

Tenemos que importar la función de animación que se utilizará en el archivo .ts como se muestra arriba.

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

Aquí hemos importado disparador, estado, estilo, transición y animación desde @ angular / animaciones.

Ahora, agregaremos la propiedad de animaciones al 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 el inicio de la animación. El primer parámetro es el nombre de la animación que se le dará a la etiqueta html a la que se debe aplicar la animación. El segundo parámetro son las funciones que hemos importado: estado, transición, etc.

La función de estado involucra los pasos de animación, entre los cuales el elemento pasará. Ahora mismo hemos definido dos estados, más pequeños y más grandes. Para un estado más pequeño, le hemos dado el estilo.transform:translateY(100px) y transform:translateY(100px).

La función de transición agrega animación al elemento html. El primer argumento toma los estados inicial y final, el segundo argumento acepta la función animada. La función de animación le permite definir la duración, el retraso y la facilidad de una transición.

Veamos ahora el archivo .html para ver cómo funciona la función de transición:

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

Hay una propiedad de estilo agregada en la directiva @component, que alinea centralmente el div. Consideremos el siguiente ejemplo para entender lo mismo:

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

Aquí, se usa un carácter especial [``] para agregar estilos al elemento html, si lo hay. Para el div, le hemos dado el nombre de animación definido en elapp.component.ts archivo.

Con el clic de un botón, llama a la función animada, que se define en el app.component.ts archivo de la siguiente manera:

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

La variable de estado está definida y se le da el valor predeterminado como menor. La función animada cambia el estado al hacer clic. Si el estado es más grande, se convertirá en más pequeño; y si es más pequeño, se convertirá en más grande.

Así es como la salida en el navegador (http://localhost:4200/) se verá como -

Al hacer clic en el Click Me , la posición de la imagen se cambia como se muestra en la siguiente captura de pantalla:

La función de transformación se aplica en la dirección y, que cambia de 0 a 100px cuando hacemos clic en el botón Click Me. La imagen se almacena en elassets/images carpeta.