Angular7 - Animasyonlar

Animasyonlar html öğeleri arasında çok fazla etkileşim ekler. Animasyon Angular 2 ile mevcuttu, Angular 4'ten itibaren animasyon artık @ angular / core kitaplığının bir parçası değil, app.module.ts içinde içe aktarılması gereken ayrı bir pakettir.

Başlangıç ​​olarak, kütüphaneyi aşağıdaki kod satırıyla içe aktarmamız gerekiyor -

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

BrowserAnimationsModule içindeki içe aktarma dizisine eklenmesi gerekiyor app.module.ts aşağıda gösterildiği gibi -

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

İçinde app.component.html, canlandırılacak html öğelerini ekledik.

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

Ana div için bir düğme ve resim içeren bir div ekledik. Animate işlevinin çağrıldığı bir tıklama olayı var. Ve div için @myanimation direktifi eklenir ve state olarak değer verilir.

Şimdi görelim app.component.ts animasyonun tanımlandığı yer.

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

.Ts dosyasında kullanılacak animasyon işlevini yukarıda gösterildiği gibi içe aktarmalıyız.

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

Burada @ angular / animations'tan tetik, durum, stil, geçiş ve animasyon içe aktardık.

Şimdi animations özelliğini @Component () dekoratörüne ekleyeceğiz -

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

Tetik, animasyonun başlangıcını tanımlar. Bunun ilk parametresi, animasyonun uygulanması gereken html etiketine verilecek animasyonun adıdır. İkinci parametre içe aktardığımız işlevlerdir - durum, geçiş vb.

Durum işlevi, öğenin aralarında geçiş yapacağı animasyon adımlarını içerir. Şu anda daha küçük ve daha büyük iki durum tanımladık. Daha küçük devlet için stil verdiktransform:translateY(100px) ve transform:translateY(100px).

Geçiş işlevi, html öğesine animasyon ekler. İlk argüman başlangıç ​​ve bitiş durumlarını alır, ikinci argüman animate fonksiyonunu kabul eder. Animasyon işlevi, bir geçişin uzunluğunu, gecikmesini ve kolaylığını tanımlamanıza olanak tanır.

Şimdi, geçiş işlevinin nasıl çalıştığını görmek için .html dosyasını görelim -

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

@Component yönergesine div'i merkezi olarak hizalayan bir stil özelliği eklenmiştir. Aynısını anlamak için aşağıdaki örneği ele alalım -

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

Burada, varsa html öğesine stil eklemek için özel bir karakter [``] kullanılır. Div için, içinde tanımlanan animasyon adını verdik.app.component.ts dosya.

Bir düğmeye tıklandığında, ekranda tanımlanan animate işlevini çağırır. app.component.ts aşağıdaki gibi dosya -

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

Durum değişkeni tanımlanır ve varsayılan değer daha küçük olarak verilir. Animate işlevi, tıklandığında durumu değiştirir. Eyalet daha büyükse, küçülecektir; ve daha küçükse, daha büyük hale dönüşecektir.

Tarayıcıdaki çıktı bu şekilde (http://localhost:4200/) gibi görünecek -

Tıkladıktan sonra Click Me düğmesi, görüntünün konumu aşağıdaki ekran görüntüsünde gösterildiği gibi değiştirilir -

Dönüştürme işlevi, Beni Tıkla düğmesine tıkladığımızda 0'dan 100 piksele değişen y yönünde uygulanır. Görüntü şurada saklanır:assets/images Klasör.