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. Animasyon modülünü etkinleştirme

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

   Animasyonları etkinleştirme

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

   Uygulamanızda hemen animasyon gerekiyorsa

   Uygulamanız yüklendiğinde hemen bir animasyonun gerçekleşmesi gerekiyorsa, hevesle yüklenen animasyonlar modülüne geçmek isteyeceksiniz. Bunun yerine @angular/platform-browser/animations'dan provideAnimations'i içeri aktarın ve bootstrapApplication fonksiyon çağrısında provideAnimationsAsync yerine provideAnimations kullanın.

   NgModule tabanlı uygulamalar için, Angular kök uygulama modülünüze animasyon yeteneklerini tanıtan BrowserAnimationsModule'u içeri aktarın.

   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. Animasyon fonksiyonlarını bileşen dosyalarına içe aktarma

   Bileşen dosyalarında belirli animasyon fonksiyonları kullanmayı planlıyorsanız, bu fonksiyonları @angular/animations'dan içeri aktarın.

   app.ts

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

   Bu rehberin sonundaki tüm kullanılabilir animasyon fonksiyonlarına bakın.

3. Animasyon metaveri özelliğini ekleme

   Bileşen dosyasında, @Component() dekoratörü içinde animations: adında bir metaveri özelliği ekleyin. Bir animasyonu tanımlayan tetikleyiciyi animations metaveri özelliğinin içine yerleştirirsiniz.

   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 elemanını bir durumdan diğerine değiştiren bir geçişi animasyonlayalım. Örneğin, bir butonun kullanıcının son eylemine göre Open veya Closed gösterdiğini belirtebilirsiniz. Buton open durumundayken görünür ve sarıdır. closed durumundayken yarı saydam ve mavidir.

HTML'de bu nitelikler renk ve opaklık gibi sıradan CSS stilleri kullanılarak ayarlanır. Angular'da, animasyonlarla kullanmak üzere bir dizi CSS stili belirtmek için style() fonksiyonunu kullanın. Bir animasyon durumunda bir dizi stili toplayın ve duruma open veya closed gibi bir ad verin.

Bileşeni oluşturmak için terminalde aşağıdaki komutu çalıştırın:

ng g component open-close

Bu, bileşeni src/app/open-close.ts konumunda oluşturacaktır.

Animasyon durumu ve stilleri

Her geçişin sonunda çağrılacak farklı durumları tanımlamak için Angular'ın state() fonksiyonunu kullanın. Bu fonksiyon iki argüman alır: open veya closed gibi benzersiz bir ad ve bir style() fonksiyonu.

Belirli bir durum adıyla ilişkilendirilecek bir dizi stili tanımlamak için style() fonksiyonunu kullanın. backgroundColor gibi tire içeren stil nitelikleri için camelCase kullanmanız veya 'background-color' gibi tırnak içine almanız gerekir.

Angular'ın state() fonksiyonunun style⁣­(⁠) fonksiyonuyla CSS stil niteliklerini ayarlamak için nasıl çalıştığını görelim. Bu kod parçasında, durum için birden fazla stil niteliği aynı anda ayarlanır. open durumunda, butonun yüksekliği 200 piksel, opaklığı 1 ve arka plan rengi sarıdır.

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

Aşağıdaki closed durumunda, butonun yüksekliği 100 piksel, opaklığı 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 iyileştirme olmadan, buton anında dönüşür; solma, küçülme veya bir değişikliğin gerçekleştiğini gösteren başka görünür bir gösterge olmadan.

Değişikliği daha az ani yapmak için, bir süre boyunca bir durumdan diğerine olan değişiklikleri belirten bir animasyon geçişi tanımlamanız gerekir. transition() fonksiyonu iki argüman kabul eder: Birinci argüman, iki geçiş durumu arasındaki yönü tanımlayan bir ifadeyi kabul eder ve ikinci argüman bir veya bir dizi animate() adımını kabul eder.

Bir geçişin sürecini, gecikmesini ve yumuşaklığını tanımlamak ve geçişler sırasında stilleri tanımlamak için stil fonksiyonunu belirlemek için animate() fonksiyonunu kullanın. Çok adımlı animasyonlar için keyframes() fonksiyonunu tanımlamak için animate() fonksiyonunu kullanın. Bu tanımlar, animate() fonksiyonunun ikinci argümanı içine yerleştirilir.

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

animate() fonksiyonu (geçiş fonksiyonunun ikinci argümanı) timings ve styles girdi parametrelerini kabul eder.

timings parametresi üç kısımda tanımlanmış bir sayı veya dize alır.

animate(duration);

veya

animate('duration delay easing');

Birinci kısım, duration, zorunludur. Süre, tırnak işareti olmadan bir sayı olarak milisaniye cinsinden veya tırnak işareti ve bir zaman belirteci ile saniye cinsinden ifade edilebilir. Örneğin, saniyenin onda biri süresi şu şekilde ifade edilebilir:

• Düz sayı olarak, milisaniye cinsinden: 100

• Dize olarak, milisaniye cinsinden: '100ms'

• Dize olarak, saniye cinsinden: '0.1s'

İkinci argüman, delay, duration ile aynı sözdizimine sahiptir. Örneğin:

• 100ms bekle ve ardından 200ms çalış: '0.2s 100ms'

Üçüncü argüman, easing, animasyonun çalışma süresi boyunca nasıl hızlandığını ve yavaşlayamadığını kontrol eder. Örneğin, ease-in animasyonun yavaş başlamasına ve ilerledikçe hız kazanmasına neden olur.

• 100ms bekle, 200ms çalış. Hızlı başlamak ve yavaşça bir dinlenme noktasına yavaşmak için bir yavaşlatma eğrisi kullanın: '0.2s 100ms ease-out'

• 200ms çalış, gecikme yok. Yavaş başlamak, ortada hızlanmak ve sonra sonunda yavaşça yavaşmak için standart bir eğri kullanın: '0.2s ease-in-out'

• Hemen başla, 200ms çalış. Yavaş başlamak ve tam hızda bitmek için bir hızlanma eğrisi kullanın: '0.2s ease-in'

Bu örnek, durumlar arasında 1 saniyelik bir geçişle open'dan closed'a bir durum geçişi sağlar.

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

Önceki kod parçasında, => operatörü tek yönlü geçişleri gösterir ve <=> çift yönlüdür. Geçiş içinde, animate() geçişin ne kadar süreceğini belirtir. Bu durumda, open'dan closed'a durum değişikliği burada 1s olarak ifade edilen 1 saniye sürer.

Bu örnek, 0.5 saniyelik bir geçiş animasyon yayıyla closed durumundan open durumuna bir durum geçişi ekler.

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

• Her geçişin sonunda uygulanan stilleri tanımlamak için state() kullanın, animasyon tamamlandıktan sonra kalıcıdır
• Animasyon sırasında hareket yanılsaması oluşturan ara stilleri tanımlamak için transition() kullanın
• Animasyonlar devre dışı bırakıldığında, transition() stilleri atlanabilir, ancak state() stilleri atlanamaz
• Aynı transition() argümanı içinde birden fazla durum çifti ekleyin:

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

Animasyonu tetikleme

Bir animasyonun ne zaman başlayacağını bilmesi için bir tetikleyiciye ihtiyacı vardır. trigger() fonksiyonu durumları ve geçişleri toplar ve animasyona bir ad verir, böylece onu HTML şablonundaki tetikleyici elemana ekleyebilirsiniz.

trigger() fonksiyonu değişiklikleri izlenecek özellik adını tanımlar. Bir değişiklik olduğunda, tetikleyici tanımında yer alan eylemleri başlatır. Bu eylemler geçişler veya daha sonra göreceğimiz gibi diğer fonksiyonlar olabilir.

Bu örnekte, tetikleyiciyi openClose olarak adlandırıp button elemanına ekleyeceğiz. Tetikleyici, açık ve kapalı durumları ve iki geçiş için zamanlamaları tanımlar.

Animasyonları tanımlama ve HTML şablonuna ekleme

Animasyonlar, animasyonlanacak HTML elemanını kontrol eden bileşenin metaverisinde tanımlanır. Animasyonlarınızı tanımlayan kodu @Component() dekoratörü içindeki animations: özelliğinin altına yerleştirin.

@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 bileşen için bir animasyon tetikleyicisi tanımladığınızda, tetikleyici adını köşeli parantezlerle sararak ve önüne @ sembolünü ekleyerek o bileşenin şablonundaki bir elemana ekleyin. Ardından, aşağıda gösterildiği gibi standart Angular özellik bağlama sözdizimini kullanarak tetikleyiciyi bir şablon ifadesine bağlayabilirsiniz; burada triggerName tetikleyicinin adı ve expression tanımlanmış bir animasyon durumuna değer üretir.

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

Animasyon, ifade değeri yeni bir duruma değiştiğinde yürütülür veya tetiklenir.

Aşağıdaki kod parçası tetikleyiciyi isOpen özelliğinin değerine bağlar.

<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 örnekte, isOpen ifadesi open veya closed tanımlı durumuna değerlendiğinde, durum değişikliğini openClose tetikleyicisine bildirir. Ardından, durum değişikliğini ele almak ve bir durum değişikliği animasyonu başlatmak openClose koduna kalır.

Sayfaya giren veya sayfadan ayrılan elemanlar için (DOM'a eklenen veya DOM'dan kaldırılan), animasyonları koşullu yapabilirsiniz. Örneğin, HTML şablonunda animasyon tetikleyicisiyle *ngIf kullanın.

HTML şablon dosyasında, tanımlanmış animasyonları animasyonlanacak HTML elemanına eklemek için tetikleyici adını kullanın.

Kod incelemesi

Geçiş örneğinde tartışılan kod dosyaları aşağıdadır.

@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 için animate() ile birlikte style() ve state() kullanarak iki durum arasındaki geçişe animasyon eklemeyi öğrendiniz.

Animasyonlar bölümünde Angular animasyonlarının daha gelişmiş özellikleri hakkında bilgi edinin; geçiş ve tetikleyiciler konusundaki ileri tekniklerle başlayarak.

Animasyonlar API özeti

@angular/animations modülü tarafından sağlanan fonksiyonel API, Angular uygulamalarında animasyonlar oluşturmak ve kontrol etmek için alana özgü bir dil (DSL) sağlar. Temel fonksiyonların ve ilgili veri yapılarının tam listesi ve sözdizimi ayrıntıları için API referansına bakın.

Angular animasyonları hakkında daha fazlası

Aşağıdakilerle de ilgilenebilirsiniz: