Animasyon geçişleri ve tetikleyiciler

Bu rehber, * joker karakteri ve void gibi ozel gecis durumlarina derinlemesine girer. Ayrica bu durumlarin bir gorünume giren ve gorünumden ayrilan elemanlar icin nasil kullanildigini da gosterir. Bu bolum ayrica birden fazla animasyon tetikleyicisini, animasyon geri cagirmalarini ve anahtar kareler kullanan sira tabanli animasyonu inceler.

Önceden tanımlanmış durumlar ve joker karakter eşleştirme

Angular'da, gecis durumlari state() fonksiyonu araciligiyla acikca tanimlanabilir veya onceden tanimlanmis * joker karakteri ve void durumlari kullanilarak tanimlanabilir.

Joker karakter durumu

Bir yildiz isareti * veya joker karakter herhangi bir animasyon durumuyla eslesir. Bu, HTML elemaninin baslangic veya bitis durumundan bagimsiz olarak gecerli olan gecisleri tanimlamak icin kullanislidir.

Ornegin, open => * gecisi, elemanin durumu acik'tan baska herhangi bir seye degistiginde gecerlidir.

Asagida, open ve closed durumlarini kullanan onceki ornekle birlikte joker karakter durumunu kullanan baska bir kod ornegi bulunmaktadir. Her durum-durum gecis ciftini tanimlamak yerine, closed'a herhangi bir gecis 1 saniye surer ve open'a herhangi bir gecis 0.5 saniye surer.

Bu, her biri icin ayri gecisler eklemek zorunda kalmadan yeni durumlarin eklenmesine olanak tanir.

animations: [
    trigger('openClose', [
      // ...
      state(
        'open',
        style({
          height: '200px',
          opacity: 1,
          backgroundColor: 'yellow',
        }),
      ),
      state(
        'closed',
        style({
          height: '100px',
          opacity: 0.8,
          backgroundColor: 'blue',
        }),
      ),
      transition('* => closed', [animate('1s')]),
      transition('* => open', [animate('0.5s')]),
    ]),
  ],

Her iki yonde durumdan duruma gecisleri belirtmek icin cift ok sozdizimini kullanin.

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

Birden fazla geçiş durumu ile joker karakter durumu kullanma

Iki durumlu buton orneginde, yalnizca iki olasi durum, open ve closed oldugu icin joker karakter cok yararli degildir. Genel olarak, bir elemanin degisebilecegi birden fazla potansiyel durumu oldugunda joker karakter durumlarini kullanin. Buton open'dan closed'a veya inProgress gibi bir seye degisebilirse, joker karakter durumu kullanmak gereken kodlama miktarini azaltabilir.

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')]),
      transition('* => closed', [animate('1s')]),
      transition('* => open', [animate('0.5s')]),
      transition('open <=> closed', [animate('0.5s')]),
      transition('* => open', [animate('1s', style({opacity: '*'}))]),
      transition('* => *', [animate('1s')]),

* => * gecisi, iki durum arasinda herhangi bir degisiklik oldugunda gecerlidir.

Gecisler tanimlandiklari siraya gore eslestirilir. Bu nedenle, * => * gecisi uzerine baska gecisler uygulayabilirsiniz. Ornegin, yalnizca open => closed icin gecerli olacak stil degisiklikleri veya animasyonlar tanimlayin, ardindan baska sekilde belirtilmemis durum esilesmeleri icin * => *'i bir geri donus olarak kullanin.

Bunu yapmak icin, daha spesifik gecisleri * => *'dan once listeleyin.

Stillerle joker karakter kullanma

Animasyona mevcut stil degerinin ne olursa olsun onu kullanmasini ve bununla animasyon yapmasini soylemek icin * joker karakterini bir stille kullanin. Joker karakter, animasyonu yapilan durum tetikleyici icinde bildirılmemisse kullanilan bir geri donus degeridir.

transition('* => open', [animate('1s', style({opacity: '*'}))]),

Void durumu

Sayfaya giren veya sayfadan ayrilan bir eleman icin gecisleri yapilandirmak icin void durumunu kullanin. Gorünume girme ve gorünumden ayrilma animasyonlari konusuna bakin.

Joker karakter ve void durumlarını birleştirme

Sayfaya giren ve sayfadan ayrilan animasyonlari tetiklemek icin bir geciste joker karakter ve void durumlarini birlestirin:

• * => void gecisi, elemanin ayrilmadan onceki durumundan bagimsiz olarak gorünumden ayrildiginda gecerlidir
• void => * gecisi, elemanin giriste aldigi durumdan bagimsiz olarak gorünume girdiginde gecerlidir
• * joker karakter durumu, void dahil herhangi bir durumla eslesir

Görünüme giriş ve çıkış animasyonu

Bu bolum, sayfaya giren veya sayfadan ayrilan elemanlarin nasil animasyonlanacagini gosterir.

Yeni bir davranis ekleyin:

• Kahramanlar listesine bir kahraman eklediginizde, soldan sayfaya ucuyormus gibi gorunur
• Listeden bir kahramani kaldiridginizda, saga dogru ucuyormus gibi gorunur

animations: [
    trigger('flyInOut', [
      state('in', style({transform: 'translateX(0)'})),
      transition('void => *', [style({transform: 'translateX(-100%)'}), animate(100)]),
      transition('* => void', [animate(100, style({transform: 'translateX(100%)'}))]),
    ]),
  ],

Onceki kodda, HTML elemani bir gorünume baglanmadiginda void durumunu uyguladiniz.

:enter ve :leave takma adları

:enter ve :leave, void => * ve * => void gecisleri icin takma adlardir. Bu takma adlar bircok animasyon fonksiyonu tarafindan kullanilir.

transition ( ':enter', [ … ] ); // void => _ için takma ad
transition ( ':leave', [ … ] ); // _ => void için takma ad

Gorünume giren bir elemani hedeflemek daha zordur cunku henuz DOM'da degildir. DOM'a eklenen veya DOM'dan kaldirilan HTML elemanlarini hedeflemek icin :enter ve :leave takma adlarini kullanin.

:enter ve :leave ile *ngIf ve *ngFor kullanma

:enter gecisi, herhangi bir *ngIf veya *ngFor gorünumu sayfaya yerlestirildiginde calisir ve :leave bu gorünumler sayfadan kaldirildiginda calisir.

Bu ornek, giris ve cikis animasyonu icin myInsertRemoveTrigger adinda ozel bir tetikleyiciye sahiptir. HTML sablonu asagidaki kodu icerir.

@if (isShown) {
  <div @myInsertRemoveTrigger class="insert-remove-container">
    <p>The box is inserted</p>
  </div>
}

Bilesen dosyasinda, :enter gecisi 0 baslangic opakligini ayarlar. Ardindan, eleman gorünume eklendikce bu opakligi 1'e degistirmek icin animasyonlar.

trigger('myInsertRemoveTrigger', [
      transition(':enter', [style({opacity: 0}), animate('100ms', style({opacity: 1}))]),
      transition(':leave', [animate('100ms', style({opacity: 0}))]),
    ]),

Bu ornegin state() kullanmasina gerek olmadigini unutmayin.

:increment ve :decrement geçişleri

transition() fonksiyonu diger seçici degerleri, :increment ve :decrement kabul eder. Sayisal bir deger arttiginda veya azaldiginda bir gecisi baslatmak icin bunlari kullanin.

trigger('filterAnimation', [
      transition(':enter, * => 0, * => -1', []),
      transition(':increment', [
        query(
          ':enter',
          [
            style({opacity: 0, width: 0}),
            stagger(50, [animate('300ms ease-out', style({opacity: 1, width: '*'}))]),
          ],
          {optional: true},
        ),
      ]),
      transition(':decrement', [
        query(':leave', [stagger(50, [animate('300ms ease-out', style({opacity: 0, width: 0}))])]),
      ]),
    ]),

Geçişlerde Boolean değerler

Bir tetikleyici baglama degeri olarak bir Boolean degeri iceriyorsa, bu deger true ve false veya 1 ve 0 karsilastiran bir transition() ifadesi kullanilarak eslestirilebilir.

<div [@openClose]="isOpen ? true : false" class="open-close-container">
</div>

Yukaridaki kod parcasinda, HTML sablonu bir <div> elemanini isOpen durum ifadesi ve true ve false olasi degerleri ile openClose adinda bir tetikleyiciye baglar. Bu desen, open ve close gibi iki adlandirilmis durum olusturma pratiğine bir alternatiftir.

@Component metaverisi icindeki animations: ozelliginin altinda, durum true olarak degerlendirildiginde, iliskili HTML elemaninin yuksekligi bir joker karakter stili veya varsayilandir. Bu durumda, animasyon elemanin animasyon baslamadan once sahip oldugu yuksekligi kullanir. Eleman closed oldugunda, eleman 0 yukseklige animasyonlanir, bu da onu gorunmez yapar.

animations: [
    trigger('openClose', [
      state('true', style({height: '*'})),
      state('false', style({height: '0px'})),
      transition('false <=> true', animate(500)),
    ]),
  ],

Birden fazla animasyon tetikleyicisi

Bir bilesen icin birden fazla animasyon tetikleyicisi tanimlanabilir. Animasyon tetikleyicilerini farkli elemanlara ekleyin ve elemanlar arasindaki ust-alt iliskiler animasyonlarin nasil ve ne zaman calisacagini etkiler.

Üst-alt animasyonlar

Angular'da bir animasyon her tetiklendiginde, ust animasyon her zaman oncelik alir ve alt animasyonlar engellenir. Bir alt animasyonun calismasi icin, ust animasyonun alt animasyonlar iceren her elemani sorgulamasi gerekir. Ardindan animateChild() fonksiyonunu kullanarak animasyonlarin calismesina izin verir.

Bir HTML elemanında animasyonu devre dışı bırakma

Bir HTML elemaninda ve ic ice gecmis tum elemanlarda animasyonlari kapatmak icin @.disabled adinda ozel bir animasyon kontrol baglamasi yerlestirilir. Dogru oldugunda, @.disabled baglamasi tum animasyonlarin islenmesini engeller.

Asagidaki kod ornegi bu ozelligin nasil kullanilacagini gosterir.

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

@Component({
  animations: [
    trigger('childAnimation', [
      // ...
    ]),
  ],
})
export class OpenCloseChild {
  isDisabled = false;
  isOpen = false;
}

@.disabled baglamasi dogru oldugunda, @childAnimation tetikleyicisi baslamaz.

HTML sablonundaki bir eleman @.disabled ana baglama kullanarak animasyonlari kapattiginda, animasyonlar tum ic elemanlarda da kapatilir. Tek bir eleman uzerinde birden fazla animasyonu secici olarak kapatamazsiniz.

Secici alt animasyonlar, devre disi birakilmis bir ust elemanda asagidaki yollardan biriyle calistirilanabilir:

• Bir ust animasyon, HTML sablonunun devre disi birakilmis bolgelerinde bulunan ic elemanlari toplamak icin query() fonksiyonunu kullanabilir. Bu elemanlar hala animasyonlanabilir.

• Bir alt animasyon bir ust tarafindan sorgulanabilir ve daha sonra animateChild() fonksiyonuyla animasyonlanabilir

Tüm animasyonları devre dışı bırakma

Bir Angular uygulamasi icin tum animasyonlari kapatmak icin, en ust Angular bilesenine @.disabled ana baglamasini yerlestirin.

@Component({
  selector: 'app-root',
  templateUrl: 'app.html',
  styleUrls: ['app.css'],
  imports: [RouterLink, RouterOutlet],
  animations: [
    slideInAnimation,
  ],
})
export class AppComponent {
  @HostBinding('@.disabled')
  public animationsDisabled = false;
}

Animasyon geri çağırmaları

Animasyon trigger() fonksiyonu basladiginda ve bittiginde geri cagirmalar yapar. Asagidaki ornek, openClose tetikleyicisi iceren bir bileseni gostermektedir.

@Component({
  selector: 'app-open-close',
  animations: [
    trigger('openClose', [
      // ...
    ]),
  ],
  templateUrl: 'open-close.html',
  styleUrls: ['open-close.css'],
})
export class OpenClose {
  onAnimationEvent(event: AnimationEvent) {
  }
}

HTML sablonunda, animasyon olayi @triggerName.start ve @triggerName.done olarak $event araciligiyla geri dondurulur; burada triggerName kullanilan tetikleyicinin adidir. Bu ornekte, openClose tetikleyicisi su sekilde gorunur.

<div
  [@openClose]="isOpen ? 'open' : 'closed'"
  (@openClose.start)="onAnimationEvent($event)"
  (@openClose.done)="onAnimationEvent($event)"
  class="open-close-container"
>
</div>

Animasyon geri cagirmalari icin potansiyel bir kullanim, bir veritabani sorgusu gibi yavas bir API cagrisi icin katman olusturmak olabilir. Ornegin, arka plan sistemi islemi bitene kadar kendi dongu animasyonuna sahip bir InProgress butonu olusturulabilir.

Mevcut animasyon bittiginde baska bir animasyon cagrilabilir. Ornegin, API cagrisi tamamlandiginda buton inProgress durumundan closed durumuna gecer.

Bir animasyon, aslinda olmasa bile bir son kullanicinin islemin daha hizli oldugunu algilamasini saglayabilir.

Geri cagirmalar, bir hata ayiklama araci olarak da kullanilabilir; ornegin tarayicinin Gelistirici JavaScript Konsolunda uygulamanin ilerlemesini goruntulemek icin console.warn() ile birlikte. Asagidaki kod parcasi, open ve closed iki durumlu bir buton olan orijinal ornek icin konsol log ciktisi olusturur.

export class OpenClose {
  onAnimationEvent(event: AnimationEvent) {
    // openClose is trigger name in this example
    console.warn(`Animation Trigger: ${event.triggerName}`);

    // phaseName is "start" or "done"
    console.warn(`Phase: ${event.phaseName}`);

    // in our example, totalTime is 1000 (number of milliseconds in a second)
    console.warn(`Total time: ${event.totalTime}`);

    // in our example, fromState is either "open" or "closed"
    console.warn(`From: ${event.fromState}`);

    // in our example, toState either "open" or "closed"
    console.warn(`To: ${event.toState}`);

    // the HTML element itself, the button in this case
    console.warn(`Element: ${event.element}`);
  }
}

Anahtar kareler

Birden fazla adimla sirali olarak calisan bir animasyon olusturmak icin anahtar kareler kullanin.

Angular'in keyframe() fonksiyonu, tek bir zamanlama bolumu icinde bircok stil degisikligine izin verir. Ornegin, buton solmak yerine tek bir 2 saniyelik zaman diliminde birkac kez renk degistirebilir.

Bu renk degisikligi icin kod su sekilde gorunebilir.

transition('* => active', [
        animate(
          '2s',
          keyframes([
            style({backgroundColor: 'blue'}),
            style({backgroundColor: 'red'}),
            style({backgroundColor: 'orange'}),
          ]),
        ),

Ofset

Anahtar kareler, animasyonda her stil degisikliginin gerceklestigi noktayi tanimlayan bir offset icerir. Offsetler, animasyonun baslangicini ve sonunu isaretleyen sifirdan bire kadar goreceli olcumlerdir. En az bir kez kullanilirsa anahtar kare adimlarinin her birine uygulanmalidir.

Anahtar kareler icin offset tanimlamak istege baglidir. Bunlari atlarsaniz, esit aralikli offsetler otomatik olarak atanir. Ornegin, onceden tanimlanmis offsetleri olmayan uc anahtar kare 0, 0.5 ve 1 offsetlerini alir. Onceki ornekteki orta gecis icin 0.8 offseti belirtmek su sekilde gorunebilir.

Offsetleri belirtilmis kod su sekilde olur.

transition('* => active', [
        animate(
          '2s',
          keyframes([
            style({backgroundColor: 'blue', offset: 0}),
            style({backgroundColor: 'red', offset: 0.8}),
            style({backgroundColor: '#754600', offset: 1.0}),
          ]),
        ),
      ]),
      transition('* => inactive', [
        animate(
          '2s',
          keyframes([
            style({backgroundColor: '#754600', offset: 0}),
            style({backgroundColor: 'red', offset: 0.2}),
            style({backgroundColor: 'blue', offset: 1.0}),
          ]),
        ),
      ]),

Tek bir animasyon icinde anahtar kareleri duration, delay ve easing ile birlestirebilirsiniz.

Nabız efektli anahtar kareler

Animasyon boyunca belirli offsetlerde stiller tanimlayarak animasyonlarinizda bir nabiz efekti olusturmak icin anahtar kareleri kullanin.

Nabiz efekti olusturmak icin anahtar kareleri kullanmanin bir ornegi:

• Orijinal open ve closed durumlari, 1 saniyelik bir zaman diliminde gerceklesen orijinal yukseklik, renk ve opaklik degisiklikleri
• Butonun ayni 1 saniyelik zaman diliminde duzensiz olarak nabiz atiyormus gibi gorunmesine neden olan ortaya eklenmis bir anahtar kare dizisi

Bu animasyon icin kod parcasi su sekilde gorunebilir.

trigger('openClose', [
      state(
        'open',
        style({
          height: '200px',
          opacity: 1,
          backgroundColor: 'yellow',
        }),
      ),
      state(
        'close',
        style({
          height: '100px',
          opacity: 0.5,
          backgroundColor: 'green',
        }),
      ),
      // ...
      transition('* => *', [
        animate(
          '1s',
          keyframes([
            style({opacity: 0.1, offset: 0.1}),
            style({opacity: 0.6, offset: 0.2}),
            style({opacity: 1, offset: 0.5}),
            style({opacity: 0.2, offset: 0.7}),
          ]),
        ),
      ]),
    ]),

Animasyonlanabilir özellikler ve birimler

Angular animasyonlari web animasyonlari uzerine kurulmustur, bu nedenle tarayicinin animasyonlanabilir olarak kabul ettigi herhangi bir ozelligi animasyonlayabilirsiniz. Bu; konumlar, boyutlar, donusumler, renkler, kenarliklar ve daha fazlasini icerir. W3C, CSS Transitions sayfasinda animasyonlanabilir ozelliklerin bir listesini tutar.

Sayisal degeri olan ozellikler icin, degeri uygun sonek ile bir dize olarak tirnak icinde saglayin:

• 50 piksel: '50px'

• Goreceli font boyutu: '3em'

• Yuzde: '100%'

Degeri bir sayi olarak da saglayabilirsiniz. Bu gibi durumlarda Angular varsayilan birim olarak piksel veya px kabul eder. 50 pikseli 50 olarak ifade etmek '50px' demekle aynidir.

Joker karakterlerle otomatik özellik hesaplama

Bazen bir boyutsal stil ozelliginin degeri calisma zamanina kadar bilinmez. Ornegin, elemanlarin genislikleri ve yukseklikleri genellikle iceriklerine veya ekran boyutuna baglidir. Bu ozellikler genellikle CSS kullanarak animasyonlanmasi zordur.

Bu durumlarda, style() altinda ozel bir * joker ozellik degeri kullanabilirsiniz. Bu belirli stil ozelliginin degeri calisma zamaninda hesaplanir ve ardindan animasyona eklenir.

Asagidaki ornek, bir HTML elemani sayfadan ayrildiginda kullanilan shrinkOut adinda bir tetikleyiciye sahiptir. Animasyon, elemanin ayrilmadan once sahip oldugu yuksekligi alir ve o yukseklikten sifira animasyonlar.

animations: [
    trigger('shrinkOut', [
      state('in', style({height: '*'})),
      transition('* => void', [style({height: '*'}), animate(250, style({height: 0}))]),
    ]),
  ],

Anahtar kareler özeti

Angular'daki keyframes() fonksiyonu, tek bir gecis icinde birden fazla ara stil belirtmenize olanak tanir. Her stil degisikliginin animasyonda nerede gerceklesmesi gerektigini tanimlamak icin istege bagli bir offset kullanilabilir.

Angular animasyonları hakkında daha fazla bilgi

Asagidakilerle de ilgilenebilirsiniz: