Animasyonlar
Angular’da animasyonlar, modern web uygulamalarında kullanıcı deneyimini geliştirmek ve arayüzleri daha dinamik hale getirmek için kritik bir araçtır. @angular/animations modülü, geliştiricilerin bileşenlerdeki görsel durum değişimlerini kontrol etmesini sağlar ve animasyonları declarative bir şekilde tanımlamaya imkan verir. Bu sayede DOM’u doğrudan manipüle etmeden akıcı geçişler ve etkileşimler oluşturabilirsiniz.
Animasyonlar, kullanıcıya geri bildirim sunmak, içerik yüklemelerini görselleştirmek veya sayfa geçişlerini daha anlaşılır kılmak gibi durumlarda kullanılır. Örneğin, açılır menüler, modal pencereler, liste ekleme ve silme işlemleri veya yükleme göstergeleri gibi komponentlerde animasyonlar önemli bir rol oynar.
Bu rehberde, Angular animasyonlarının temel ve ileri seviyede nasıl uygulanacağını öğreneceksiniz. Animasyonları bileşen tabanlı düşünceyle entegre ederek yeniden kullanılabilir yapılar oluşturmayı, state yönetimini ve veri akışını animasyonlarla senkronize etmeyi keşfedeceksiniz. Ayrıca performans optimizasyonu, yaygın hatalardan kaçınma ve Angular’ın lifecycle yönetimi ile animasyonları uyumlu hale getirme gibi ileri düzey konulara da değinilecektir.
Temel Örnek
typescriptimport { Component } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
selector: 'app-fade-box',
template: ` <div [@fadeInOut]="visible ? 'visible' : 'hidden'" class="box"></div> <button (click)="toggle()">Görünürlüğü Değiştir</button>
`,
styles: [`
.box {
width: 150px;
height: 150px;
margin: 20px auto;
background-color: #1976d2;
border-radius: 8px;
}
button {
display: block;
margin: auto;
}
`],
animations: [
trigger('fadeInOut', [
state('visible', style({ opacity: 1, transform: 'scale(1)' })),
state('hidden', style({ opacity: 0, transform: 'scale(0.9)' })),
transition('visible <=> hidden', [
animate('400ms ease-in-out')
])
])
]
})
export class FadeBoxComponent {
visible = true;
toggle() {
this.visible = !this.visible;
}
}Bu temel örnek, Angular animasyonlarının bileşen düzeyinde nasıl uygulandığını gösterir. trigger fonksiyonu, animasyon tetikleyicisini tanımlar ve fadeInOut adını alır. İçerisinde iki state (visible ve hidden) tanımlanır ve her biri için stil (style) belirlenir.
Kullanıcı butona tıkladığında toggle() metodu visible değişkenini değiştirir ve bu değişim animasyon tetikleyicisini çalıştırır. transition ile state değişimleri sırasında animasyon süresi ve easing fonksiyonu belirlenir. Angular, DOM’u doğrudan manipüle etmeden bu değişiklikleri algılar ve optimize eder.
Bu yapı, bileşenlerin kendi animasyonlarını yönetmesini sağlar ve prop drilling veya gereksiz render gibi hataları önler. Animasyonların bileşen içinde tanımlanması, modülerliği ve yeniden kullanılabilirliği artırır. Ayrıca Angular’ın değişiklik algılama mekanizması ile uyumlu çalışarak performans kaybını önler.
Pratik Örnek
typescriptimport { Component } from '@angular/core';
import { trigger, transition, style, animate, query, stagger } from '@angular/animations';
@Component({
selector: 'app-list-animations',
template: ` <button (click)="addItem()">Öğe Ekle</button> <ul [@listAnimation]> <li *ngFor="let item of items">{{ item }}</li> </ul>
`,
styles: [`
ul { list-style: none; padding: 0; width: 200px; margin: 20px auto; }
li {
background: #42a5f5;
color: #fff;
padding: 10px;
margin-bottom: 5px;
border-radius: 4px;
text-align: center;
}
`],
animations: [
trigger('listAnimation', [
transition('* => *', [
query(':enter', [
style({ opacity: 0, transform: 'translateY(-15px)' }),
stagger(100, [
animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
])
], { optional: true }),
query(':leave', [
animate('200ms', style({ opacity: 0, transform: 'translateY(15px)' }))
], { optional: true })
])
])
]
})
export class ListAnimationsComponent {
items = ['Öğe 1', 'Öğe 2', 'Öğe 3'];
addItem() {
const newItem = `Öğe ${this.items.length + 1}`;
this.items.push(newItem);
}
}Bu pratik örnek, dinamik liste animasyonlarını göstermektedir. *ngFor ile listelenen öğelere query(':enter') kullanılarak giriş animasyonu uygulanır ve stagger ile her öğe arasında gecikme sağlanır. Aynı şekilde query(':leave') çıkış animasyonunu yönetir.
Bu yaklaşım, veri akışı ile bileşen yaşam döngüsünü entegre eder; listeye yeni öğe eklendiğinde veya çıkarıldığında animasyon otomatik olarak tetiklenir. { optional: true } kullanımı, DOM’da animasyon uygulanacak öğe olmadığında hataların önüne geçer. Bu yapı, görev listeleri, bildirimler ve dinamik paneller için idealdir.
Angular animasyonlarında en iyi uygulamalar ve yaygın hatalar:
- Animasyonları bileşen içinde tanımlayarak modülerliği sağlamak.
- Prop drilling’den kaçınmak; her bileşen kendi animasyonunu yönetmeli.
- Performans için
staggervegroupkullanarak animasyonları optimize etmek. - State mutasyonlarından kaçınmak; immutable yapı kullanmak.
BrowserAnimationsModuleimport edilmeden animasyonların çalışmayacağını unutmayın.- Kullanıcıdan gelen verilerle stil oluştururken güvenlik önlemleri almak (XSS).
İleri seviye uygulamalarda RxJS ile animasyonları senkronize etmek, lifecycle hook’lar ile uyumlu çalıştırmak performansı ve kullanıcı deneyimini artırır.
📊 Referans Tablosu
| Angular Element/Concept | Description | Usage Example |
|---|---|---|
| trigger | Animasyon tetikleyicisi oluşturur | trigger('fade', [...]) |
| state | Bir durumun stilini tanımlar | state('open', style({ opacity: 1 })) |
| transition | State değişimlerinde animasyonu tanımlar | transition('open => closed', [...]) |
| animate | Animasyon süresi ve easing fonksiyonu | animate('300ms ease-in') |
| query | Belirli DOM öğelerini seçer ve animasyon uygular | query(':enter', [style(...), animate(...)]) |
| stagger | Birden fazla animasyonu sırayla çalıştırır | stagger(100, [animate(...)]) |
Sonuç olarak, Angular animasyonları kullanıcı arayüzlerini daha etkileşimli ve anlaşılır hale getirir. State yönetimi, veri akışı ve lifecycle ile uyumlu animasyonlar, SPA projelerinde hem estetik hem de performans kazanımı sağlar. İleri seviye olarak değişiklik algılama stratejileri, RxJS tabanlı animasyonlar ve dinamik bileşen animasyonları çalışılabilir. Resmi Angular dokümantasyonu ve örnek repolar, konunun derinlemesine öğrenilmesi için önemli kaynaklardır.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek