Animasyon geçişleri ve tetikleyiciler

Bu rehber, * joker karakteri ve void gibi özel geçiş durumlarına derinlemesine girer. Ayrıca bu durumların bir görünüme giren ve görünümden ayrılan elemanlar için nasıl kullanıldığını da gösterir. Bu bölüm ayrıca birden fazla animasyon tetikleyicisini, animasyon geri çağırmalarını ve anahtar kareler kullanan sıra tabanlı animasyonu inceler.

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

Angular'da, geçiş durumları state() fonksiyonu aracılığıyla açıkça tanımlanabilir veya önceden tanımlanmış * joker karakteri ve void durumları kullanılarak tanımlanabilir.

Joker karakter durumu

Bir yıldız işareti * veya joker karakter herhangi bir animasyon durumuyla eşleşir. Bu, HTML elemanının başlangıç veya bitiş durumundan bağımsız olarak geçerli olan geçişleri tanımlamak için kullanışlıdır.

Örneğin, open => * geçişi, elemanın durumu açık'tan başka herhangi bir şeye değiştiğinde geçerlidir.

Aşağıda, open ve closed durumlarını kullanan önceki örnekle birlikte joker karakter durumunu kullanan başka bir kod örneği bulunmaktadır. Her durum-durum geçiş çiftini tanımlamak yerine, closed'a herhangi bir geçiş 1 saniye sürer ve open'a herhangi bir geçiş 0.5 saniye sürer.

Bu, her biri için ayrı geçişler eklemek zorunda kalmadan yeni durumların eklenmesine olanak tanır.

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 yönde durumdan duruma geçişleri belirtmek için çift ok sözdizimini kullanın.

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

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

İki durumlu buton örneğinde, yalnızca iki olası durum, open ve closed olduğu için joker karakter çok yararlı değildir. Genel olarak, bir elemanın değişebileceği birden fazla potansiyel durumu olduğunda joker karakter durumlarını kullanın. Buton open'dan closed'a veya inProgress gibi bir şeye değişebilirse, joker karakter durumu kullanmak gereken kodlama miktarını 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')]),

* => * geçişi, iki durum arasında herhangi bir değişiklik olduğunda geçerlidir.

Geçişler tanımlandıkları sıraya göre eşleştirilir. Bu nedenle, * => * geçişi üzerine başka geçişler uygulayabilirsiniz. Örneğin, yalnızca open => closed için geçerli olacak stil değişiklikleri veya animasyonlar tanımlayın, ardından başka şekilde belirtilmemiş durum eşleşmeleri için * => *'i bir geri dönüş olarak kullanın.

Bunu yapmak için, daha spesifik geçişleri * => *'dan önce listeleyin.

Stillerle joker karakter kullanma

Animasyona mevcut stil değerinin ne olursa olsun onu kullanmasını ve bununla animasyon yapmasını söylemek için * joker karakterini bir stille kullanın. Joker karakter, animasyonu yapılan durum tetikleyici içinde bildirilmemişse kullanılan bir geri dönüş değeridir.

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

Void durumu

Sayfaya giren veya sayfadan ayrılan bir eleman için geçişleri yapılandırmak için void durumunu kullanın. Görünüme girme ve görünümden ayrılma animasyonları konusuna bakın.

Joker karakter ve void durumlarını birleştirme

Sayfaya giren ve sayfadan ayrılan animasyonları tetiklemek için bir geçişte joker karakter ve void durumlarını birleştirin:

• * => void geçişi, elemanın ayrılmadan önceki durumundan bağımsız olarak görünümden ayrıldığında geçerlidir
• void => * geçişi, elemanın girişte aldığı durumdan bağımsız olarak görünüme girdiğinde geçerlidir
• * joker karakter durumu, void dahil herhangi bir durumla eşleşir

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

Bu bölüm, sayfaya giren veya sayfadan ayrılan elemanların nasıl animasyonlanacağını gösterir.

Yeni bir davranış ekleyin:

• Kahramanlar listesine bir kahraman eklediğinizde, soldan sayfaya uçuyormuş gibi görünür
• Listeden bir kahramanı kaldırdığınızda, sağa doğru uçuyormuş gibi görünür

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%)'}))]),
  ]),
],

Önceki kodda, HTML elemanı bir görünüme bağlanmadığında void durumunu uyguladınız.

:enter ve :leave takma adları

:enter ve :leave, void => * ve * => void geçişleri için takma adlardır. Bu takma adlar birçok animasyon fonksiyonu tarafından kullanılır.

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

Görünüme giren bir elemanı hedeflemek daha zordur çünkü henüz DOM'da değildir. DOM'a eklenen veya DOM'dan kaldırılan HTML elemanlarını hedeflemek için :enter ve :leave takma adlarını kullanın.

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

:enter geçişi, herhangi bir *ngIf veya *ngFor görünümü sayfaya yerleştirildiğinde çalışır ve :leave bu görünümler sayfadan kaldırıldığında çalışır.

Bu örnek, giriş ve çıkış animasyonu için myInsertRemoveTrigger adında özel bir tetikleyiciye sahiptir. HTML şablonu aşağıdaki kodu içerir.

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

Bileşen dosyasında, :enter geçişi 0 başlangıç opaklığını ayarlar. Ardından, eleman görünüme eklendikçe bu opaklığı 1'e değiştirmek için animasyonlar.

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

Bu örneğin state() kullanmasına gerek olmadığını unutmayın.

:increment ve :decrement geçişleri

transition() fonksiyonu diğer seçici değerleri, :increment ve :decrement kabul eder. Sayısal bir değer arttığında veya azaldığında bir geçişi başlatmak için bunları kullanın.

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 bağlama değeri olarak bir Boolean değeri içeriyorsa, bu değer true ve false veya 1 ve 0 karşılaştıran bir transition() ifadesi kullanılarak eşleştirilebilir.

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

Yukarıdaki kod parçasında, HTML şablonu bir <div> elemanını isOpen durum ifadesi ve true ve false olası değerleri ile openClose adında bir tetikleyiciye bağlar. Bu desen, open ve close gibi iki adlandırılmış durum oluşturma pratiğine bir alternatiftir.

@Component metaverisi içindeki animations: özelliğinin altında, durum true olarak değerlendirildiğinde, ilişkili HTML elemanının yüksekliği bir joker karakter stili veya varsayılandır. Bu durumda, animasyon elemanın animasyon başlamadan önce sahip olduğu yüksekliği kullanır. Eleman closed olduğunda, eleman 0 yüksekliğe animasyonlanır, bu da onu görünmez yapar.

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

Birden fazla animasyon tetikleyicisi

Bir bileşen için birden fazla animasyon tetikleyicisi tanımlanabilir. Animasyon tetikleyicilerini farklı elemanlara ekleyin ve elemanlar arasındaki üst-alt ilişkiler animasyonların nasıl ve ne zaman çalışacağını etkiler.

Üst-alt animasyonlar

Angular'da bir animasyon her tetiklendiğinde, üst animasyon her zaman öncelik alır ve alt animasyonlar engellenir. Bir alt animasyonun çalışması için, üst animasyonun alt animasyonlar içeren her elemanı sorgulaması gerekir. Ardından animateChild() fonksiyonunu kullanarak animasyonların çalışmesına izin verir.

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

Bir HTML elemanında ve iç içe geçmiş tüm elemanlarda animasyonları kapatmak için @.disabled adında özel bir animasyon kontrol bağlaması yerleştirilir. Doğru olduğunda, @.disabled bağlaması tüm animasyonların işlenmesini engeller.

Aşağıdaki kod örneği bu özelliğin nasıl kullanılacağını gösterir.

<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 bağlaması doğru olduğunda, @childAnimation tetikleyicisi başlamaz.

HTML şablonundaki bir eleman @.disabled ana bağlama kullanarak animasyonları kapattığında, animasyonlar tüm iç elemanlarda da kapatılır. Tek bir eleman üzerinde birden fazla animasyonu seçici olarak kapatamazsınız.

Seçici alt animasyonlar, devre dışı bırakılmış bir üst elemanda aşağıdaki yollardan biriyle çalıştırılabilir:

• Bir üst animasyon, HTML şablonunun devre dışı bırakılmış bölgelerinde bulunan iç elemanları toplamak için query() fonksiyonunu kullanabilir. Bu elemanlar hala animasyonlanabilir.

• Bir alt animasyon bir üst tarafından sorgulanabilir ve daha sonra animateChild() fonksiyonuyla animasyonlanabilir

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

Bir Angular uygulaması için tüm animasyonları kapatmak için, en üst Angular bileşenine @.disabled ana bağlamasını yerleştirin.

@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 başladığında ve bittiğinde geri çağırmalar yapar. Aşağıdaki örnek, openClose tetikleyicisi içeren bir bileşeni göstermektedir.

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

HTML şablonunda, animasyon olayı @triggerName.start ve @triggerName.done olarak $event aracılığıyla geri döndürülür; burada triggerName kullanılan tetikleyicinin adıdır. Bu örnekte, openClose tetikleyicisi şu şekilde görünür.

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

Animasyon geri çağırmaları için potansiyel bir kullanım, bir veritabanı sorgusu gibi yavaş bir API çağrısı için katman oluşturmak olabilir. Örneğin, arka plan sistemi işlemi bitene kadar kendi döngü animasyonuna sahip bir InProgress butonu oluşturulabilir.

Mevcut animasyon bittiğinde başka bir animasyon çağrılabilir. Örneğin, API çağrısı tamamlandığında buton inProgress durumundan closed durumuna geçer.

Bir animasyon, aslında olmasa bile bir son kullanıcının işlemin daha hızlı olduğunu algılamasını sağlayabilir.

Geri çağırmalar, bir hata ayıklama aracı olarak da kullanılabilir; örneğin tarayıcının Geliştirici JavaScript Konsolunda uygulamanın ilerlemesini görüntülemek için console.warn() ile birlikte. Aşağıdaki kod parçası, open ve closed iki durumlu bir buton olan orijinal örnek için konsol log çıktısı oluşturur.

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 adımla sıralı olarak çalışan bir animasyon oluşturmak için anahtar kareler kullanın.

Angular'ın keyframe() fonksiyonu, tek bir zamanlama bölümü içinde birçok stil değişikliğine izin verir. Örneğin, buton solmak yerine tek bir 2 saniyelik zaman diliminde birkaç kez renk değiştirebilir.

Bu renk değişikliği için kod şu şekilde görünebilir.

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

Ofset

Anahtar kareler, animasyonda her stil değişikliğinin gerçekleştiği noktayı tanımlayan bir offset içerir. Offsetler, animasyonun başlangıcını ve sonunu işaretleyen sıfırdan bire kadar göreceli ölçümlerdir. En az bir kez kullanılırsa anahtar kare adımlarının her birine uygulanmalıdır.

Anahtar kareler için offset tanımlamak isteğe bağlıdır. Bunları atlarsanız, eşit aralıklı offsetler otomatik olarak atanır. Örneğin, önceden tanımlanmış offsetleri olmayan üç anahtar kare 0, 0.5 ve 1 offsetlerini alır. Önceki örnekteki orta geçiş için 0.8 offseti belirtmek şu şekilde görünebilir.

Offsetleri belirtilmiş kod şu şekilde 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 içinde anahtar kareleri duration, delay ve easing ile birleştirebilirsiniz.

Nabız efektli anahtar kareler

Animasyon boyunca belirli offsetlerde stiller tanımlayarak animasyonlarınızda bir nabız efekti oluşturmak için anahtar kareleri kullanın.

Nabız efekti oluşturmak için anahtar kareleri kullanmanın bir örneği:

• Orijinal open ve closed durumları, 1 saniyelik bir zaman diliminde gerçekleşen orijinal yükseklik, renk ve opaklık değişiklikleri
• Butonun aynı 1 saniyelik zaman diliminde düzensiz olarak nabız atıyormuş gibi görünmesine neden olan ortaya eklenmiş bir anahtar kare dizisi

Bu animasyon için kod parçası şu şekilde görünebilir.

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 animasyonları web animasyonları üzerine kurulmuştur, bu nedenle tarayıcının animasyonlanabilir olarak kabul ettiği herhangi bir özelliği animasyonlayabilirsiniz. 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.

Sayısal değeri olan özellikler için, değeri uygun sonek ile bir dize olarak tırnak içinde sağlayın:

• 50 piksel: '50px'

• Göreceli font boyutu: '3em'

• Yüzde: '100%'

Değeri bir sayı olarak da sağlayabilirsiniz. Bu gibi durumlarda Angular varsayılan birim olarak piksel veya px kabul eder. 50 pikseli 50 olarak ifade etmek '50px' demekle aynıdır.

Joker karakterlerle otomatik özellik hesaplama

Bazen bir boyutsal stil özelliğinin değeri çalışma zamanına kadar bilinmez. Örneğin, elemanların genişlikleri ve yükseklikleri genellikle içeriklerine veya ekran boyutuna bağlıdır. Bu özellikler genellikle CSS kullanarak animasyonlanması zordur.

Bu durumlarda, style() altında özel bir * joker özellik değeri kullanabilirsiniz. Bu belirli stil özelliğinin değeri çalışma zamanında hesaplanır ve ardından animasyona eklenir.

Aşağıdaki örnek, bir HTML elemanı sayfadan ayrıldığında kullanılan shrinkOut adında bir tetikleyiciye sahiptir. Animasyon, elemanın ayrılmadan önce sahip olduğu yüksekliği alır ve o yükseklikten sıfıra 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 geçiş içinde birden fazla ara stil belirtmenize olanak tanır. Her stil değişikliğinin animasyonda nerede gerçekleşmesi gerektiğini tanımlamak için isteğe bağlı bir offset kullanılabilir.

Angular animasyonları hakkında daha fazla bilgi

Aşağıdakilerle de ilgilenebilirsiniz: