Flutter
Stagger animation
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.
Örnek çözümü göster
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();
}
Kendini test et
-
Stagger animasyonda Interval ne işe yarar?
- Belleği temizler
- Animasyonu başlatır
- Bir animasyonun controller içindeki zaman aralığını belirler
- Widget boyutu verir
Cevabı göster
Bir animasyonun controller içindeki zaman aralığını belirler — Interval(begin, end) bir animasyonun controller 0.0-1.0 ilerlemesinin hangi alt aralığında çalışacağını belirler.
-
Interval kullan
curve: const ____(0.0, 0.5, curve: Curves.easeIn),
Cevabı göster
curve: const Interval(0.0, 0.5, curve: Curves.easeIn),
-
Stagger eşleşmeleri
- stagger
- Sıralı animasyon tekniği
- Interval
- Zaman aralığı
- Tween
- Değer aralığı
- AnimationController
- Tek zaman kaynağı
Sıradaki ders: Özet - İleri animasyon
