Özet - İleri animasyon
- Flutter kursu
- İleri seviye
- Ders 60/69
- 4 dk
AnimationController ve Hero'yu birleştirerek geçiş yaparsın.
AnimationController ve Hero birleşimi
Bir ekran geçişinde Hero animasyonu çalışırken arka planda AnimationController ile ek bir animasyon çalıştırabilirsin. Hero tag'i ile widget taşınırken, controller örneğin boyut değişimini Tween veya doğrudan değer ile yönetir.
Hero(
tag: 'photo',
child: Container(
width: 50 + ctrl.value * 50,
height: 50,
),
)Uygulama Hero ve AnimationController birlikte
_EmptyVsync sınıfını tanımla. main içinde ctrl adlı AnimationController oluştur (vsync: _EmptyVsync(), duration 1 saniye). Ayrıca tag'i 'photo' ve child'ı Container(width: 50) olan bir Hero widget'ı oluştur ve Hero'nun tipini yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
// _EmptyVsync sınıfını tanımla (TickerProvider uygular)
void main() {
// ctrl ve tag 'photo' olan Hero oluştur, hero tipini 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 hero = Hero(
tag: 'photo',
child: Container(width: 50),
);
print(hero.runtimeType);
ctrl.dispose();
}Beklenen çıktı
Hero
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hero ve AnimationController'ı birlikte kullanınca ne elde edilir?
- Widget sayacı
- Ekran geçişi sırasında ek animasyon Doğru cevap
- Yalnızca yazı rengi
- Bellek temizliği
Açıklama: Hero ekran geçişini yönetirken AnimationController alt animasyonları (boyut, renk vb.) çalıştırabilir; ikisi birlikte zengin geçişler üretir.
2 duration parametresini ekle
final ctrl = AnimationController(
vsync: this,
____: const Duration(seconds: 2),
);final ctrl = AnimationController(
vsync: this,
duration: const Duration(seconds: 2),
);Açıklama: AnimationController'ın süresi duration parametresine Duration nesnesi verilerek ayarlanır.
3 Animasyon birleşimi eşleşmeleri
| Kavram | Anlamı |
|---|---|
AnimationController |
Süre ve ilerleme denetimi |
Hero |
Ekranlar arası widget taşıma |
Tween |
Ara değer üretici |
tag |
Hero'yu eşleştiren değer |