Tween ve CurvedAnimation
- Flutter kursu
- İleri seviye
- Ders 57/69
- 4 dk
CurvedAnimation ile yumuşak eğri animasyonu öğrenirsin.
Tween ve CurvedAnimation
Tween, başlangıç ve bitiş değerleri arasında ara değer üretir; AnimationController'dan gelen 0.0-1.0 ilerlemesini gerçek değerlere dönüştürür. CurvedAnimation, bu ilerlemeyi bir Curves eğrisiyle yumuşatır.
final tween = Tween(begin: 0.0, end: 100.0);
final curved = CurvedAnimation(
parent: ctrl,
curve: Curves.easeInOut,
);
final value = tween.transform(curved.value);Curves seçimi
Curves sınıfı farklı yumuşatma eğrileri sunar: Curves.linear düz, Curves.easeIn yavaş başlayan, Curves.bounceOut zıplayan. CurvedAnimation'ı Tween ile birlikte kullanarak hem değer aralığını hem de yumuşatmayı kontrol edersin.
Uygulama Tween ve CurvedAnimation kullan
_EmptyVsync sınıfını tanımla. main içinde ctrl adlı AnimationController oluştur (vsync: _EmptyVsync(), duration 1 saniye). CurvedAnimation ile ctrl'yi Curves.easeIn ile sar. Tween(begin: 0.0, end: 100.0)'in transform'una curved.value ver ve sonucu yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
// _EmptyVsync sınıfını tanımla (TickerProvider uygular)
void main() {
// ctrl oluştur, CurvedAnimation ile sar (curve easeIn),
// Tween ile 0-100 dönüşümü yapıp transform 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 curved = CurvedAnimation(parent: ctrl, curve: Curves.easeIn);
final tween = Tween(begin: 0.0, end: 100.0);
print(tween.transform(curved.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 CurvedAnimation ne işe yarar?
- Animasyonu durdurur
- Belleği temizler
- Widget rengini ayarlar
- Doğrusal ilerlemeyi bir eğriyle yumuşatır Doğru cevap
Açıklama: CurvedAnimation, controller'ın doğrusal 0.0-1.0 ilerlemesini bir Curves eğrisiyle dönüştürerek yumuşak hareket sağlar.
2 CurvedAnimation'a parent ver
final curved = CurvedAnimation(
____: ctrl,
curve: Curves.easeInOut,
);final curved = CurvedAnimation(
parent: ctrl,
curve: Curves.easeInOut,
);Açıklama: CurvedAnimation'ın parent parametresi kaynak animasyonu (genelde AnimationController) alır.
3 Tween ve CurvedAnimation eşleşmeleri
| Kavram | Anlamı |
|---|---|
Tween |
Başlangıç ve bitiş değerleri |
CurvedAnimation |
Eğriyle yumuşatır |
Curves.easeInOut |
Yavaş başlayıp biten eğri |
parent |
Kaynak animasyon |