Complex animation sequences

Simdiye kadar, tek HTML elemanlarinin basit animasyonlarini ogrendik. Angular ayrica, sayfaya girerken ve sayfadan ayrilirken tam bir grid veya eleman listesi gibi koordineli dizileri animasyonlamaniza da olanak tanir. Birden fazla animasyonu paralel olarak calistirmayi veya birbiri ardina sirali olarak ayrik animasyonlar calistirmayi secebilirsiniz.

Karmasik animasyon dizilerini kontrol eden fonksiyonlar sunlardir:

The query() function

Karmasik animasyonlarin cogu, alt elemanlari bulmak ve onlara animasyon uygulamak icin query() fonksiyonuna dayanir. Temel ornekler sunlari icerir:

query()'nin ilk argumani, asagidaki Angular'a ozel tokenleri de icerebilen bir css secicisi dizesidir:

Animate multiple elements using query() and stagger() functions

query() ile alt elemanlari sorguladiktan sonra, stagger() fonksiyonu her oge arasinda bir zamanlama boslugu tanimlamaniza olanak tanir ve elemanlari aralarinda bir gecikmeyle animasyonlar.

Asagidaki ornek, yukaridan asagiya dogru sirayla, hafif bir gecikmeyle her birini ekleyen bir listeyi (kahramanlar) animasyonlamak icin query() ve stagger() fonksiyonlarinin nasil kullanilacagini gostermektedir.

• Sayfaya giren ve belirli kriterleri karsilayan bir eleman aramak icin query() kullanin

• Bu elemanlarin her biri icin, eleman icin ayni baslangic stilini ayarlamak icin style() kullanin. Seffaf yapin ve yerine kayabilmesi icin konumundan cikarmak icin transform kullanin.

• Her animasyonu 30 milisaniye geciktirmek icin stagger() kullanin

• Ozel tanimli bir yumusaklik egrisi kullanarak ekrandaki her elemani 0.5 saniye boyunca animasyonlayin, ayni anda solarak ve donusumu geri alarak

animations: [
    trigger('pageAnimations', [
      transition(':enter', [
        query('.hero', [
          style({opacity: 0, transform: 'translateY(-100px)'}),
          stagger(30, [
            animate('500ms cubic-bezier(0.35, 0, 0.25, 1)', style({opacity: 1, transform: 'none'})),
          ]),
        ]),
      ]),
    ]),

Parallel animation using group() function

Art arda gelen her animasyon arasinda nasil gecikme ekleyeceginizi gordunuz. Ancak paralel olarak gerceklesen animasyonlari yapilandirmak da isteyebilirsiniz. Ornegin, ayni elemanin iki CSS ozelligini animasyonlamak ancak her biri icin farkli bir easing fonksiyonu kullanmak isteyebilirsiniz. Bunun icin animasyon group() fonksiyonunu kullanabilirsiniz.

Asagidaki ornek, iki farkli zamanlama yapilandirmasi icin hem :enter hem de :leave uzerinde group() kullanir, boylece ayni elemana paralel olarak iki bagimsiz animasyon uygular.

animations: [
    trigger('flyInOut', [
      state(
        'in',
        style({
          width: '*',
          transform: 'translateX(0)',
          opacity: 1,
        }),
      ),
      transition(':enter', [
        style({width: 10, transform: 'translateX(50px)', opacity: 0}),
        group([
          animate(
            '0.3s 0.1s ease',
            style({
              transform: 'translateX(0)',
              width: '*',
            }),
          ),
          animate(
            '0.3s ease',
            style({
              opacity: 1,
            }),
          ),
        ]),
      ]),
      transition(':leave', [
        group([
          animate(
            '0.3s ease',
            style({
              transform: 'translateX(50px)',
              width: 10,
            }),
          ),
          animate(
            '0.3s 0.2s ease',
            style({
              opacity: 0,
            }),
          ),
        ]),
      ]),
    ]),
  ],

Sequential vs. parallel animations

Karmasik animasyonlarda ayni anda bircok sey olabilir. Ancak biri digeri ardina gerceklesen bircok animasyon iceren bir animasyon olusturmak isterseniz ne olur? Daha once birden fazla animasyonu ayni anda, paralel olarak calistirmak icin group() kullandiniz.

sequence() adinda ikinci bir fonksiyon, ayni animasyonlari birbiri ardina calistirmaniza olanak tanir. sequence() icinde, animasyon adimlari style() veya animate() fonksiyon cagrilarindan olusur.

• Saglanan stil verilerini hemen uygulamak icin style() kullanin.
• Belirli bir zaman araligi boyunca stil verilerini uygulamak icin animate() kullanin.

Filter animation example

Ornek sayfadaki baska bir animasyona goz atin. Filtre/Kademeli sekmesi altinda, Search Heroes metin kutusuna Magnet veya tornado gibi bir metin girin.

Filtre, siz yazarken gercek zamanli olarak calisir. Her yeni harf yazdiginizda elemanlar sayfadan ayrilir ve filtre giderek daha kati hale gelir. Filtre kutusundaki her harfi sildiginizde kahramanlar listesi yavaş yavaş sayfaya geri doner.

HTML sablonu filterAnimation adinda bir tetikleyici icerir.

<label for="search">Search heroes: </label>
<input
  type="text"
  id="search"
  #criteria
  (input)="updateCriteria(criteria.value)"
  placeholder="Search heroes"
/>

<ul class="heroes" [@filterAnimation]="heroesTotal">
  @for (hero of heroes; track hero) {
    <li class="hero">
      <div class="inner">
        <span class="badge">{{ hero.id }}</span>
        <span class="name">{{ hero.name }}</span>
      </div>
    </li>
  }
</ul>

Bilesenin dekoratorundaki filterAnimation uc gecis icerir.

@Component({
  animations: [
    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}))])]),
      ]),
    ]),
  ],
})
export class HeroListPage implements OnInit {
  heroesTotal = -1;

  get heroes() {
    return this._heroes;
  }
  private _heroes: Hero[] = [];

  ngOnInit() {
    this._heroes = HEROES;
  }

  updateCriteria(criteria: string) {
    criteria = criteria ? criteria.trim() : '';

    this._heroes = HEROES.filter((hero) =>
      hero.name.toLowerCase().includes(criteria.toLowerCase()),
    );
    const newTotal = this.heroes.length;

    if (this.heroesTotal !== newTotal) {
      this.heroesTotal = newTotal;
    } else if (!criteria) {
      this.heroesTotal = -1;
    }
  }
}

Bu ornekteki kod asagidaki gorevleri gerceklestirir:

• Kullanici ilk kez bu sayfayi actiginda veya bu sayfaya gittiginde animasyonlari atlar (filtre animasyonu zaten orada olani daraltir, bu nedenle yalnizca DOM'da zaten var olan elemanlar uzerinde calisir)
• Arama girdisinin degerine gore kahramanlari filtreler

Her degisiklik icin:

• DOM'dan ayrilan bir elemani opakligini ve genisligini 0'a ayarlayarak gizler

• DOM'a giren bir elemani 300 milisaniye boyunca animasyonlar. Animasyon sirasinda eleman varsayilan genisligini ve opakligini alir.

• DOM'a giren veya DOM'dan ayrilan birden fazla eleman varsa, sayfanin ustunden baslayarak her eleman arasinda 50 milisaniyelik bir gecikmeyle her animasyonu kademeli yapar

Animating the items of a reordering list

Angular *ngFor liste ögelerini kutudan cikar cikmaz dogru sekilde animasyonlasa da, siralari degistiginde bunu yapamaz. Bunun nedeni, hangi elemanin hangisi oldugunu kaybetmesi ve bu da bozuk animasyonlara yol acmasidir. Angular'in bu elemanlari takip etmesine yardimci olmanin tek yolu, NgForOf yonergesine bir TrackByFunction atamaktir. Bu, Angular'in hangi elemanin hangisi oldugunu her zaman bilmesini saglar ve boylece dogru animasyonlari dogru elemanlara her zaman uygulamasina olanak tanir.

Animations and Component View Encapsulation

Angular animasyonlari, bilesenlerin DOM yapisina dayanir ve Gorünum Kapsullemeyi dogrudan dikkate almaz; bu, ViewEncapsulation.Emulated kullanan bilesenlerin, ViewEncapsulation.None kullaniyorlarmis gibi davrandiklari anlamina gelir (ViewEncapsulation.ShadowDom ve ViewEncapsulation.ExperimentalIsolatedShadowDom kisaca tartisacagimiz gibi farkli davranir).

Ornegin, query() fonksiyonu (Animasyonlar rehberinin geri kalaninda daha fazlasini goreceksiniz) emule edilmis gorünum kapsullemesi kullanan bir bilesen agacinin en ustune uygulanirsa, boyle bir sorgu agacin herhangi bir derinligindeki DOM elemanlarini tanimlayabilir (ve dolayisiyla animasyonlayabilir).

Ote yandan, ViewEncapsulation.ShadowDom ve ViewEncapsulation.ExperimentalIsolatedShadowDom, DOM elemanlarini ShadowRoot elemanlari icinde "gizleyerek" bilesenin DOM yapisini degistirir. Bu tur DOM manipulasyonlari, basit DOM yapisina dayanan ve ShadowRoot elemanlarini dikkate almayan bazi animasyon uygulamalarinin duzgun calismesini engeller. Bu nedenle, ShadowDom gorünum kapsullemesini kullanan bilesenleri iceren gorünumlere animasyon uygulamaktan kacinilmasi onerilir.

Animation sequence summary

Birden fazla elemani animasyonlamak icin Angular fonksiyonlari, ic elemanlari bulmak icin query() ile baslar; ornegin, bir <div> icindeki tum resimleri toplamak. Kalan fonksiyonlar, stagger(), group() ve sequence(), kademeler uygular veya birden fazla animasyon adiminin nasil uygulanacagini kontrol etmenize olanak tanir.

More on Angular animations

Asagidakilerle de ilgilenebilirsiniz: