Angular 4 - Animaciones

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

Para empezar, necesitamos importar la biblioteca de la siguiente manera:

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 -

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

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, el@myanimation Se agrega la directiva 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 { 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.

los stateLa función involucra los pasos de animación, entre los cuales el elemento hará la transición. 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, es decir, inicio 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 relajación 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 el @componentdirectiva, 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 la animación definido en el archivo app.component.ts.

Con el clic de un botón, llama a la función animada, que se define en el archivo app.component.ts 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 el ydirección, que cambia de 0 a 100 px cuando se hace clic en el botón Hacer clic en mí. La imagen se almacena en elassets/images carpeta.