Flutter
Meydan okuma 4
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.
Örnek çözümü göster
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();
}
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.
Ö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),
);
ctrl.value = 0.5;
final r = Tween(begin: 0.0, end: 50.0).transform(ctrl.value);
print(r);
ctrl.dispose();
}
Kendini test et
-
CustomPainter'ı animasyona nasıl bağlarız?
- initState ile
- setState ile
- super(repaint: ctrl) ile
- dispose ile
Cevabı göster
super(repaint: ctrl) ile — CustomPainter'a super(repaint: ctrl) verilir; controller değiştiğinde painter otomatik yeniden çizilir.
-
drawCircle'a yarıçap ver
canvas.drawCircle(Offset(50, 50), ____, Paint());
Cevabı göster
canvas.drawCircle(Offset(50, 50), r, Paint());
-
Grafik animasyonu eşleşmeleri
- CustomPainter
- Çizim yapan sınıf
- AnimationController
- Animasyon denetimi
- Tween
- Değer aralığı
- repaint
- Yeniden çizim tetikleyici
Sıradaki ders: İleri seviye bölüm sınavı
