Angular Animasyonlarına Giriş

Animasyon, hareket yanılsaması sağlar: HTML elemanları zaman içinde stil değiştirir. İyi tasarlanmış animasyonlar uygulamanızı daha sezgisel ve ilgi çekici hale getirebilir, ancak sadece görsel bir unsur değildir. Animasyonlar uygulamanızı ve kullanıcı deneyimini birçok şekilde iyileştirebilir:

• Animasyonlar olmadan, web sayfası geçişleri ani ve rahatsız edici görünebilir
• Hareket, kullanıcı deneyimini büyük ölçüde geliştirir, bu nedenle animasyonlar kullanıcılara uygulamanın eylemlerine verdiği yanıtı algılama şansı tanır
• İyi animasyonlar, kullanıcının dikkatini sezgisel olarak ihtiyaç duyulan yere çeker

Tipik olarak, animasyonlar zaman içinde birden fazla stil dönüşümü içerir. Bir HTML elemanı hareket edebilir, renk değiştirebilir, büyüyüp küçülebilir, solabilir veya sayfadan kayabilir. Bu değişiklikler eşanlı veya sıralı olarak gerçekleşebilir. Her dönüşümün zamanlamasını kontrol edebilirsiniz.

Angular'ın animasyon sistemi CSS işlevi üzerine kurulmuştur, bu da tarayıcının animasyonlanabilir olarak kabul ettiği herhangi bir özelliği animasyonlayabileceğiniz anlamına gelir. Bu; konumlar, boyutlar, dönüşümler, renkler, kenarlıklar ve daha fazlasını içerir. W3C, CSS Transitions sayfasında animasyonlanabilir özelliklerin bir listesini tutar.

Bu rehber hakkında

Bu rehber, projenize Angular animasyonları eklemeye başlamanız için temel Angular animasyon özelliklerini kapsar.

Başlarken

Animasyonlar için ana Angular modülleri @angular/animations ve @angular/platform-browser'dır.

Projenize Angular animasyonları eklemeye başlamak için, standart Angular işlevselliğiyle birlikte animasyona özel modülleri içe aktarın.

1. Enabling the animations module

   @angular/platform-browser/animations/async'den provideAnimationsAsync'i içe aktarın ve bootstrapApplication fonksiyon çağrısındaki providers listesine ekleyin.

   Enabling Animations

   1bootstrapApplication(AppComponent, {
   2  providers: [provideAnimationsAsync()],
   3});

   If you need immediate animations in your application

   Uygulamaniz yuklendiginde hemen bir animasyonun gerceklesmesi gerekiyorsa, hevesle yuklenen animasyonlar modulune gecmek isteyeceksiniz. Bunun yerine @angular/platform-browser/animations'dan provideAnimations'i iceri aktarin ve bootstrapApplication fonksiyon cagrisinda provideAnimationsAsync yerine provideAnimations kullanin.

   NgModule tabanli uygulamalar icin, Angular kok uygulama modulunuze animasyon yeteneklerini tanitan BrowserAnimationsModule'u iceri aktarin.

   app.module.ts

   import {NgModule} from '@angular/core';
   import {BrowserModule} from '@angular/platform-browser';
   import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
   
   @NgModule({
     imports: [BrowserModule, BrowserAnimationsModule],
     declarations: [],
     bootstrap: [],
   })
   export class AppModule {}
   

2. Importing animation functions into component files

   Bilesen dosyalarinda belirli animasyon fonksiyonlari kullanmayi planliyorsaniz, bu fonksiyonlari @angular/animations'dan iceri aktarin.

   app.ts

   import {Component, HostBinding, inject} from '@angular/core';
   import {
     trigger,
     state,
     style,
     animate,
     transition,
     // ...
   } from '@angular/animations';

   Bu rehberin sonundaki tum kullanilabilir animasyon fonksiyonlarina bakin.

3. Adding the animation metadata property

   Bilesen dosyasinda, @Component() dekoratoru icinde animations: adinda bir metaveri ozelligi ekleyin. Bir animasyonu tanimlayan tetikleyiciyi animations metaveri ozelliginin icine yerlestirirsiniz.

   app.ts

   @Component({
     selector: 'app-root',
     templateUrl: 'app.html',
     styleUrls: ['app.css'],
     imports: [RouterLink, RouterOutlet],
     animations: [
       // animation triggers go here
     ],
   })

Bir geçişi animasyonlama

Tek bir HTML elemanini bir durumdan digerine degistiren bir gecisi animasyonlayalim. Ornegin, bir butonun kullanicinin son eylemine gore Open veya Closed gosterdigini belirtebilirsiniz. Buton open durumundayken gorunur ve saridir. closed durumundayken yari saydam ve mavidir.

HTML'de bu nitelikler renk ve opaklik gibi siradan CSS stilleri kullanilarak ayarlanir. Angular'da, animasyonlarla kullanmak uzere bir dizi CSS stili belirtmek icin style() fonksiyonunu kullanin. Bir animasyon durumunda bir dizi stili toplayin ve duruma open veya closed gibi bir ad verin.

Bileseni olusturmak icin terminalde asagidaki komutu calistirin:

ng g component open-close

Bu, bileseni src/app/open-close.ts konumunda olusturacaktir.

Animasyon durumu ve stilleri

Her gecisin sonunda cagrilacak farkli durumlari tanimlamak icin Angular'in state() fonksiyonunu kullanin. Bu fonksiyon iki arguman alir: open veya closed gibi benzersiz bir ad ve bir style() fonksiyonu.

Belirli bir durum adiyla iliskilendirilecek bir dizi stili tanimlamak icin style() fonksiyonunu kullanin. backgroundColor gibi tire iceren stil nitelikleri icin camelCase kullanmaniz veya 'background-color' gibi tirnak icine almaniz gerekir.

Angular'in state() fonksiyonunun style⁣­(⁠) fonksiyonuyla CSS stil niteliklerini ayarlamak icin nasil calistigini gorelim. Bu kod parcasinda, durum icin birden fazla stil niteligi ayni anda ayarlanir. open durumunda, butonun yuksekligi 200 piksel, opakligi 1 ve arka plan rengi saridir.

// ...
      state(
        'open',
        style({
          height: '200px',
          opacity: 1,
          backgroundColor: 'yellow',
        }),
      ),

Asagidaki closed durumunda, butonun yuksekligi 100 piksel, opakligi 0.8 ve arka plan rengi mavidir.

state(
        'closed',
        style({
          height: '100px',
          opacity: 0.8,
          backgroundColor: 'blue',
        }),
      ),

Geçişler ve zamanlama

Angular'da birden fazla stili animasyon olmadan ayarlayabilirsiniz. Ancak, daha fazla iyilestirme olmadan, buton aninda donusur; solma, kuculme veya bir degisikligin gerceklestigini gosteren baska gorunur bir gosterge olmadan.

Degisikligi daha az ani yapmak icin, bir sure boyunca bir durumdan digerine olan degisiklikleri belirten bir animasyon gecisi tanimlamaniz gerekir. transition() fonksiyonu iki arguman kabul eder: Birinci arguman, iki gecis durumu arasindaki yonu tanimlayan bir ifadeyi kabul eder ve ikinci arguman bir veya bir dizi animate() adimini kabul eder.

Bir gecisin surecini, gecikmesini ve yumusakligini tanimlamak ve gecisler sirasinda stilleri tanimlamak icin stil fonksiyonunu belirlemek icin animate() fonksiyonunu kullanin. Cok adimli animasyonlar icin keyframes() fonksiyonunu tanimlamak icin animate() fonksiyonunu kullanin. Bu tanimlar, animate() fonksiyonunun ikinci argumani icine yerlestirilir.

Animasyon meta verileri: süre, gecikme ve yumuşaklık

animate() fonksiyonu (gecis fonksiyonunun ikinci argumani) timings ve styles girdi parametrelerini kabul eder.

timings parametresi uc kisimda tanimlanmis bir sayi veya dize alir.

animate(duration);

veya

animate('duration delay easing');

Birinci kisim, duration, zorunludur. Sure, tirnak isareti olmadan bir sayi olarak milisaniye cinsinden veya tirnak isareti ve bir zaman belirteci ile saniye cinsinden ifade edilebilir. Ornegin, saniyenin onda biri suresi su sekilde ifade edilebilir:

• Duz sayi olarak, milisaniye cinsinden: 100

• Dize olarak, milisaniye cinsinden: '100ms'

• Dize olarak, saniye cinsinden: '0.1s'

Ikinci arguman, delay, duration ile ayni sozdizimina sahiptir. Ornegin:

• 100ms bekle ve ardindan 200ms calis: '0.2s 100ms'

Ucuncu arguman, easing, animasyonun calisma suresi boyunca nasil hizlandigini ve yavaslayamadigini kontrol eder. Ornegin, ease-in animasyonun yavas baslamasina ve ilerledikce hiz kazanmasina neden olur.

• 100ms bekle, 200ms calis. Hizli baslamak ve yavasca bir dinlenme noktasina yavasmak icin bir yavaslatma egrisi kullanin: '0.2s 100ms ease-out'

• 200ms calis, gecikme yok. Yavas baslamak, ortada hizlanmak ve sonra sonunda yavasca yavasmak icin standart bir egri kullanin: '0.2s ease-in-out'

• Hemen basla, 200ms calis. Yavas baslamak ve tam hizda bitmek icin bir hizlanma egrisi kullanin: '0.2s ease-in'

Bu ornek, durumlar arasinda 1 saniyelik bir gecisle open'dan closed'a bir durum gecisi saglar.

transition('open => closed', [animate('1s')]),

Onceki kod parcasinda, => operatoru tek yonlu gecisleri gosterir ve <=> cift yonludur. Gecis icinde, animate() gecisin ne kadar surecegini belirtir. Bu durumda, open'dan closed'a durum degisikligi burada 1s olarak ifade edilen 1 saniye surer.

Bu ornek, 0.5 saniyelik bir gecis animasyon yayiyla closed durumundan open durumuna bir durum gecisi ekler.

transition('closed => open', [animate('0.5s')]),

• Her gecisin sonunda uygulanan stilleri tanimlamak icin state() kullanin, animasyon tamamlandiktan sonra kalicidir
• Animasyon sirasinda hareket yanilsamasi olusturan ara stilleri tanimlamak icin transition() kullanin
• Animasyonlar devre disi birakildiginda, transition() stilleri atlanabilir, ancak state() stilleri atlanamaz
• Ayni transition() argumani icinde birden fazla durum cifti ekleyin:

  transition('on => off, off => void');

Animasyonu tetikleme

Bir animasyonun ne zaman baslayacagini bilmesi icin bir tetikleyiciye ihtiyaci vardir. trigger() fonksiyonu durumlari ve gecisleri toplar ve animasyona bir ad verir, boylece onu HTML sablonundaki tetikleyici elemana ekleyebilirsiniz.

trigger() fonksiyonu degisiklikleri izlenecek ozellik adini tanimlar. Bir degisiklik oldugunda, tetikleyici taniminda yer alan eylemleri baslatir. Bu eylemler gecisler veya daha sonra gorecegimiz gibi diger fonksiyonlar olabilir.

Bu ornekte, tetikleyiciyi openClose olarak adlandirip button elemanina ekleyecegiz. Tetikleyici, acik ve kapali durumlari ve iki gecis icin zamanlamalari tanimlar.

Animasyonları tanımlama ve HTML şablonuna ekleme

Animasyonlar, animasyonlanacak HTML elemanini kontrol eden bilesenin metaverisinde tanimlanir. Animasyonlarinizi tanimlayan kodu @Component() dekoratoru icindeki animations: ozelliginin altina yerlestirin.

@Component({
  selector: 'app-open-close',
  animations: [
    trigger('openClose', [
      // ...
      state(
        'open',
        style({
          height: '200px',
          opacity: 1,
          backgroundColor: 'yellow',
        }),
      ),
      state(
        'closed',
        style({
          height: '100px',
          opacity: 0.8,
          backgroundColor: 'blue',
        }),
      ),
      transition('open => closed', [animate('1s')]),
      transition('closed => open', [animate('0.5s')]),
    ]),
  ],
  templateUrl: 'open-close.html',
  styleUrls: ['open-close.css'],
})
export class OpenClose {
  isOpen = true;

  toggle() {
    this.isOpen = !this.isOpen;
  }

}

Bir bilesen icin bir animasyon tetikleyicisi tanimladiginizda, tetikleyici adini koseli parantezlerle sararak ve onune @ sembolunu ekleyerek o bilesenin sablonundaki bir elemana ekleyin. Ardindan, asagida gosterildigi gibi standart Angular ozellik baglama sozdizimini kullanarak tetikleyiciyi bir sablon ifadesine baglayabilirsiniz; burada triggerName tetikleyicinin adi ve expression tanimlanmis bir animasyon durumuna deger uretir.

<div [@triggerName]="expression">…</div>

Animasyon, ifade degeri yeni bir duruma degistiginde yurutulur veya tetiklenir.

Asagidaki kod parcasi tetikleyiciyi isOpen ozelliginin degerine baglar.

<nav>
  <button type="button" (click)="toggle()">Toggle Open/Close</button>
</nav>

<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
</div>

Bu ornekte, isOpen ifadesi open veya closed tanimli durumuna degerlendiginde, durum degisikligini openClose tetikleyicisine bildirir. Ardindan, durum degisikligini ele almak ve bir durum degisikligi animasyonu baslatmak openClose koduna kalir.

Sayfaya giren veya sayfadan ayrilan elemanlar icin (DOM'a eklenen veya DOM'dan kaldirilan), animasyonlari kosullu yapabilirsiniz. Ornegin, HTML sablonunda animasyon tetikleyicisiyle *ngIf kullanin.

HTML sablon dosyasinda, tanimlanmis animasyonlari animasyonlanacak HTML elemanina eklemek icin tetikleyici adini kullanin.

Kod incelemesi

Gecis orneginde tartisilan kod dosyalari asagidadir.

@Component({
  selector: 'app-open-close',
  animations: [
    trigger('openClose', [
      // ...
      state(
        'open',
        style({
          height: '200px',
          opacity: 1,
          backgroundColor: 'yellow',
        }),
      ),
      state(
        'closed',
        style({
          height: '100px',
          opacity: 0.8,
          backgroundColor: 'blue',
        }),
      ),
      transition('open => closed', [animate('1s')]),
      transition('closed => open', [animate('0.5s')]),
    ]),
  ],
  templateUrl: 'open-close.html',
  styleUrls: ['open-close.css'],
})
export class OpenClose {
  isOpen = true;

  toggle() {
    this.isOpen = !this.isOpen;
  }

}

<nav>
  <button type="button" (click)="toggle()">Toggle Open/Close</button>
</nav>

<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
</div>

:host {
  display: block;
  margin-top: 1rem;
}

.open-close-container {
  border: 1px solid #dddddd;
  margin-top: 1em;
  padding: 20px 20px 0px 20px;
  color: #000000;
  font-weight: bold;
  font-size: 20px;
}

Özet

Zamanlama icin animate() ile birlikte style() ve state() kullanarak iki durum arasindaki gecise animasyon eklemeyi ogrendiniz.

Animasyonlar bolumunde Angular animasyonlarinin daha gelismis ozellikleri hakkinda bilgi edinin; gecis ve tetikleyiciler konusundaki ileri tekniklerle baslayarak.

Animasyonlar API özeti

@angular/animations modulu tarafindan saglanan fonksiyonel API, Angular uygulamalarinda animasyonlar olusturmak ve kontrol etmek icin alana ozgu bir dil (DSL) saglar. Temel fonksiyonlarin ve ilgili veri yapilarinin tam listesi ve sozdizimi ayrintilari icin API referansina bakin.

Angular animasyonları hakkında daha fazlası

Asagidakilerle de ilgilenebilirsiniz: