Angular Academy · Ders

Anahtar Kareler ve Kademelendirme

Karmaşık, kademeli animasyonlar oluşturun

Anahtar Kareler ve Kademelendirme, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Çok Aşamalı Animasyonlar

Basit geçişler A'dan B'ye gider. Birden çok aşamadan oluşan hareketler (zıplama, titreşim, renk geçişi) için Angular keyframes sunar; birçok öğeyi sırayla canlandırmak için de stagger kullanılabilir.

keyframes İşlevi

keyframes, her biri süre içindeki konumunu 0 ile 1 arasında belirleyen bir offset içeren style adımlarından oluşan bir dizi alır.

animate('1s', keyframes([
  style({ opacity: 0, offset: 0 }),
  style({ opacity: 0.5, offset: 0.3 }),
  style({ opacity: 1, offset: 1 })
]))

offset'i Anlamak

offset, toplam sürenin kesridir. 0 başlangıcı, 1 ise bitişi belirtir. Dizi boyunca offset değerleri artmalıdır.

Zıplama Efekti

keyframes, zıplama efekti için hedefi aşmanıza ve ardından yerleşmenize olanak tanır.

keyframes([
  style({ transform: 'translateY(0)', offset: 0 }),
  style({ transform: 'translateY(-20px)', offset: 0.5 }),
  style({ transform: 'translateY(0)', offset: 1 })
])

offset Belirtmemek

offset belirtmezseniz Angular, keyframes adımlarını süre boyunca eşit aralıklarla dağıtır.

keyframes([
  style({ opacity: 0 }),
  style({ opacity: 1 })
])

query İşlevi

Bir ana öğenin alt öğelerini canlandırmak için geçiş içinde onları seçmek üzere query kullanın.

transition('* => *', [
  query(':enter', [
    style({ opacity: 0 })
  ])
])

stagger İşlevi

stagger, sorgulanan her öğenin animasyonu arasına bir zaman farkı ekleyerek kademeli bir efekt oluşturur.

query(':enter', [
  style({ opacity: 0 }),
  stagger(100, [
    animate('300ms', style({ opacity: 1 }))
  ])
])

Bir Listeyi Kademeli Canlandırma

Öğelerin birbiri ardına görünür hâle gelmesi için liste kapsayıcısındaki bir tetikleyicide query ile stagger işlevlerini birleştirin.

trigger('listAnim', [
  transition('* => *', [
    query(':enter', [
      style({ opacity: 0 }),
      stagger(80, animate('250ms', style({ opacity: 1 })))
    ], { optional: true })
  ])
])

İsteğe Bağlı Bayrak

Eşleşen hiçbir öğe olmadığında animasyonun hata vermemesi için { optional: true } değerini query işlevine geçirin.

Negatif stagger

stagger içindeki negatif bir değer sıralamayı tersine çevirir ve son öğeleri önce canlandırır; bu, çıkış kademeleri için kullanışlıdır.

stagger(-50, animate('200ms', style({ opacity: 0 })))

Performans Notu

Çok sayıda öğeyi kademeli canlandırmak maliyetli olabilir. Öğe başına süreleri kısa tutun ve animasyonları GPU üzerinde çalıştırmak için transform/opacity özelliklerini tercih edin.

Hızlı Kontrol

keyframes ve kademeli animasyonları anlayıp anlamadığınızı test edin.

Özet

keyframes değerlerinin offset kullanarak çok aşamalı hareketleri tanımladığını, query + stagger işlevlerinin ise birçok öğeyi kademeli olarak canlandırdığını öğrendiniz. Güvenli kullanım için { optional: true } değerini kullanın ve GPU dostu özellikleri tercih edin.

Sıkça Sorulan Sorular

“Anahtar Kareler ve Kademelendirme” dersi ücretsiz mi?

Evet — “Anahtar Kareler ve Kademelendirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“Anahtar Kareler ve Kademelendirme” dersinde ne öğreneceğim?

Karmaşık, kademeli animasyonlar oluşturun Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Anahtar Kareler ve Kademelendirme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön