Angular7 - Animasi

Animasi menambahkan banyak interaksi antara elemen html. Animasi tersedia dengan Angular 2, dari Angular 4 dan seterusnya animasi tidak lagi menjadi bagian dari pustaka @ angular / inti, tetapi merupakan paket terpisah yang perlu diimpor di app.module.ts.

Untuk memulainya, kita perlu mengimpor pustaka dengan baris kode di bawah ini -

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

Itu BrowserAnimationsModule perlu ditambahkan ke array impor di app.module.ts seperti yang ditunjukkan di bawah ini -

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

Di app.component.html, kami telah menambahkan elemen html, yang akan dianimasikan.

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

Untuk div utama, kami telah menambahkan tombol dan div dengan gambar. Ada event klik yang memanggil fungsi animasinya. Dan untuk div, direktif @myanimation ditambahkan dan diberi nilai sebagai status.

Sekarang mari kita lihat app.component.ts tempat animasi ditentukan.

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

Kita harus mengimpor fungsi animasi yang akan digunakan dalam file .ts seperti yang ditunjukkan di atas.

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

Di sini kami telah mengimpor pemicu, status, gaya, transisi, dan animasi dari @ angular / animations.

Sekarang, kita akan menambahkan properti animations ke dekorator @Component () -

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

Trigger mendefinisikan awal animasi. Parameter pertama untuk itu adalah nama animasi yang akan diberikan ke tag html di mana animasi perlu diterapkan. Parameter kedua adalah fungsi yang telah kita impor - status, transisi, dll.

Fungsi status melibatkan langkah-langkah animasi, di mana elemen akan bertransisi. Saat ini kami telah mendefinisikan dua keadaan, lebih kecil dan lebih besar. Untuk negara yang lebih kecil, kami telah memberikan gayatransform:translateY(100px) dan transform:translateY(100px).

Fungsi transisi menambahkan animasi ke elemen html. Argumen pertama mengambil status awal dan akhir, argumen kedua menerima fungsi animasi. Fungsi beranimasi memungkinkan Anda menentukan panjang, penundaan, dan kemudahan transisi.

Sekarang mari kita lihat file .html untuk melihat bagaimana fungsi transisi bekerja -

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

Ada properti gaya yang ditambahkan dalam direktif @component, yang meratakan div secara terpusat. Mari kita pertimbangkan contoh berikut untuk memahami hal yang sama -

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

Di sini, karakter khusus [``] digunakan untuk menambahkan gaya ke elemen html, jika ada. Untuk div, kami telah memberikan nama animasi yang ditentukan diapp.component.ts mengajukan.

Pada klik tombol itu memanggil fungsi beranimasi, yang didefinisikan di app.component.ts mengajukan sebagai berikut -

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

Variabel status ditentukan dan diberi nilai default yang lebih kecil. Fungsi beranimasi mengubah status saat diklik. Jika negara bagian lebih besar, itu akan diubah menjadi lebih kecil; dan jika lebih kecil, itu akan diubah menjadi lebih besar.

Ini adalah bagaimana output di browser (http://localhost:4200/) akan terlihat seperti -

Setelah mengklik Click Me tombol, posisi gambar diubah seperti yang ditunjukkan pada tangkapan layar berikut -

Fungsi transformasi diterapkan ke arah y, yang diubah dari 0 menjadi 100px saat kita mengklik tombol Click Me. Gambar disimpan diassets/images map.