Stagger animation
- Flutter kursu
- İleri seviye
- Ders 59/69
- 4 dk
Birden çok animasyonu sıralı (stagger) başlatmayı öğrenirsin.
Stagger nedir?
stagger, birden çok animasyonu sıralı başlatma tekniğidir. Her animasyon, controller'ın 0.0-1.0 ilerlemesinin farklı bir Interval'ine yerleştirilir. Böylece ilk animasyon biterken diğeri başlar; hepsi aynı AnimationController altında çalışır.
final a1 = Tween(begin: 0.0, end: 100.0).animate(
CurvedAnimation(
parent: ctrl,
curve: const Interval(0.0, 0.5, curve: Curves.easeIn),
),
);Birden çok animasyon sıralı
İki animasyonu sıralı yapmak için ilkine Interval(0.0, 0.5), ikinciye Interval(0.5, 1.0) verirsin. Böylece ilk animasyon controller 0.0-0.5 arası, ikincisi 0.5-1.0 arası çalışır; hepsi aynı AnimationController altında zamanlanır.
Uygulama Interval ile sıralı animasyon
_EmptyVsync sınıfını tanımla. main içinde ctrl oluştur (vsync: _EmptyVsync(), duration 1 saniye). Tween(begin: 0.0, end: 50.0)'i animate et; curve olarak CurvedAnimation(parent: ctrl, curve: const Interval(0.0, 0.5, curve: Curves.easeIn)) ver. Animasyonun value değerini yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
// _EmptyVsync sınıfını tanımla (TickerProvider uygular)
void main() {
// ctrl oluştur, Tween ile animate içinde CurvedAnimation ve Interval kullan,
// animasyonun value değerini yazdır
}Örnek çözüm
import 'package:flutter/material.dart';
class _EmptyVsync implements TickerProvider {
@override
Ticker createTicker(TickerCallback onTick) => Ticker(onTick);
}
void main() {
final ctrl = AnimationController(
vsync: _EmptyVsync(),
duration: Duration(seconds: 1),
);
final anim = Tween(begin: 0.0, end: 50.0).animate(
CurvedAnimation(
parent: ctrl,
curve: const Interval(0.0, 0.5, curve: Curves.easeIn),
),
);
print(anim.value);
ctrl.dispose();
}Beklenen çıktı
0.0
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Stagger animasyonda Interval ne işe yarar?
- Belleği temizler
- Animasyonu başlatır
- Bir animasyonun controller içindeki zaman aralığını belirler Doğru cevap
- Widget boyutu verir
Açıklama: Interval(begin, end) bir animasyonun controller 0.0-1.0 ilerlemesinin hangi alt aralığında çalışacağını belirler.
2 Interval kullan
curve: const ____(0.0, 0.5, curve: Curves.easeIn),curve: const Interval(0.0, 0.5, curve: Curves.easeIn),Açıklama: Interval, bir animasyonun controller ilerlemesindeki alt aralığını belirler; Tween değer aralığı için kullanılır.
3 Stagger eşleşmeleri
| Kavram | Anlamı |
|---|---|
stagger |
Sıralı animasyon tekniği |
Interval |
Zaman aralığı |
Tween |
Değer aralığı |
AnimationController |
Tek zaman kaynağı |