Meydan okuma 4
- Flutter kursu
- İleri seviye
- Ders 69/69
- 3 dk
CustomPainter ve AnimationController ile grafik animasyonu yaparsın.
Meydan okuma 4 - Grafik animasyonu
Bu meydan okumada CustomPainter ve AnimationController ile bir daire çapı animasyonu yapacaksın. Controller 0.0-1.0 arasında ilerlerken Tween(0, 50) çapı büyütür ve canvas.drawCircle ile çizersin.
class CirclePainter extends CustomPainter {
final AnimationController ctrl;
CirclePainter(this.ctrl) : super(repaint: ctrl);
@override
void paint(Canvas canvas, Size size) {
final r = Tween(begin: 0.0, end: 50.0).transform(ctrl.value);
canvas.drawCircle(Offset(50, 50), r, Paint());
}
@override
bool shouldRepaint(covariant CirclePainter eski) => false;
}Uygulama CirclePainter tanımla
Önce _EmptyVsync sınıfını tanımla (TickerProvider uygular). CirclePainter sınıfını CustomPainter olarak tanımla: ctrl adlı AnimationController parametresi alsın ve constructor super(repaint: ctrl) çağırsın. paint metodunda Tween(begin: 0.0, end: 50.0).transform(ctrl.value) ile r hesapla ve canvas.drawCircle(const Offset(50, 50), r, Paint()) çiz. shouldRepaint false dönsün. main'de ctrl oluştur, CirclePainter örneği al, runtimeType yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
// _EmptyVsync sınıfını tanımla (TickerProvider uygular)
// CirclePainter sınıfını CustomPainter olarak tanımla
// ctrl parametresi alsın ve constructor controller'ı repaint kaynağı olarak versin
// paint'te Tween ile yarıçap hesapla ve drawCircle çiz
// shouldRepaint false dönsün
void main() {
// ctrl oluştur, CirclePainter örneği al, runtimeType yazdır
}Örnek çözüm
import 'package:flutter/material.dart';
class _EmptyVsync implements TickerProvider {
@override
Ticker createTicker(TickerCallback onTick) => Ticker(onTick);
}
class CirclePainter extends CustomPainter {
final AnimationController ctrl;
CirclePainter(this.ctrl) : super(repaint: ctrl);
@override
void paint(Canvas canvas, Size size) {
final r = Tween(begin: 0.0, end: 50.0).transform(ctrl.value);
canvas.drawCircle(const Offset(50, 50), r, Paint());
}
@override
bool shouldRepaint(covariant CirclePainter old) => false;
}
void main() {
final ctrl = AnimationController(
vsync: _EmptyVsync(),
duration: Duration(seconds: 1),
);
final painter = CirclePainter(ctrl);
print(painter.runtimeType);
ctrl.dispose();
}Beklenen çıktı
CirclePainter
Uygulama Tween ile yarıçap hesapla
_EmptyVsync sınıfını tanımla (TickerProvider uygular). main içinde ctrl adlı AnimationController oluştur (vsync: _EmptyVsync(), duration 1 saniye). ctrl.value = 0.5 ata. Tween(begin: 0.0, end: 50.0).transform(ctrl.value) ile r hesapla ve r'yi yazdır. Sonra ctrl.dispose() çağır.
Başlangıç kodu
import 'package:flutter/material.dart';
// _EmptyVsync sınıfını tanımla (TickerProvider uygular)
void main() {
// ctrl adlı AnimationController oluştur (vsync ve duration 1 saniye)
// ctrl.value'a 0.5 ata
// Tween ile 0.0-50.0 dönüşümü yapıp ctrl.value üzerinden r hesapla
// r'yi 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),
);
ctrl.value = 0.5;
final r = Tween(begin: 0.0, end: 50.0).transform(ctrl.value);
print(r);
ctrl.dispose();
}Beklenen çıktı
25.0
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 CustomPainter'ı animasyona nasıl bağlarız?
- initState ile
- setState ile
- super(repaint: ctrl) ile Doğru cevap
- dispose ile
Açıklama: CustomPainter'a super(repaint: ctrl) verilir; controller değiştiğinde painter otomatik yeniden çizilir.
2 drawCircle'a yarıçap ver
canvas.drawCircle(Offset(50, 50), ____, Paint());canvas.drawCircle(Offset(50, 50), r, Paint());Açıklama: drawCircle'ın ikinci parametresi yarıçaptır; Tween ile hesaplanan r değişkeni verilir, ctrl veya value doğrudan çap olarak kullanılamaz.
3 Grafik animasyonu eşleşmeleri
| Kavram | Anlamı |
|---|---|
CustomPainter |
Çizim yapan sınıf |
AnimationController |
Animasyon denetimi |
Tween |
Değer aralığı |
repaint |
Yeniden çizim tetikleyici |