Estetik kaygısının geçmişi insanlık tarihi kadar eskidir. Günümüzde ise bir elektrik süpürgesinde (Dyson) veya mobil bir uygulamada tasarım artık fonksiyonun neredeyse ayrılmaz bir parçası olmuştur. Bir ürün alırken, aynı şartlar altında aynı özellikleri gösteren seçimlerde, gözümüze hoş geleni tercih ettiğimiz gibi bu durum uygulamalarda, web sitelerinde de geçerlidir. Bu noktada içeriğin önemli olduğu kadar nasıl sunulduğu da büyük önem taşımaktadır. Animasyonlar kullanıcı ile uygulama arasında interaktifliği ve ilgi çekiciliği artırarak uygulamada geçirilen sürenin daha keyifli olmasını sağlayan kilit noktalardan birisidir.
Flutter’da animasyonlar Tween ve Physics- Based olmak üzere iki ana bölüme ayrılır. Bu yazıda Tween Animation hakkında genel bilgilerden, parametrelerinden ve türlerinden bahsedeceğim.
Tween Animasyon Nedir?
Kullanılan animasyonun başlangıç ve bitiş anını belirtmeyi sağlayan bir widget türüdür. Kendi içinde implicit ve explicit olarak ikiye ayrılır. Dinamik ve statik olarak kullanılabilir. Parametreleri; tween: Animatable bir obje verilir, ve bu objenin döndüğü değeri builder methodu içinde kullanılır. onEnd: Animasyon başlayıp sonlandığında çalışır. duration: Animasyon süresini belirler. child: Sürekli animasyon dönmesini istemediğimiz ya da sadece belirli bir kısımda kullanacağımız herhangi bir widget atanabilir.
Implicit Animasyonlar
ImplicitlyAnimatedWidget soyut sınıfından türetilen widget’lardır. Flutter ekibi tarafında software development kit’ e dahil edilmiştir. Implicit widgetlar sadece içeriği değiştiğinde ve ekran yenilendiğinde animasyonları ortaya çıkartır. Özelleştirme olanağı düşük entegrasyonu kolaydır. Sekiz adet farkılı widget içerirler. Bu widgetlar aşağıda belirtilmiştir.
AnimatedAlign
AnimatedContainer
AnimatedOpacity
AnimatedPadding
AnimatedPositioned
AnimatedPositionedDirectional
AnimatedDefaultTextStyle
AnimatedPhysicalModel
Explicit Animasyonlar
Explicit animasyonlar entegrasyonu implicit animasyonlara göre zor ve yönetimi implicit animasyonlara göre daha serbest olan animasyon türleridir. AnimationController ile yönetilirler. AnimationController toplam animasyon süresi, animasyonu başlatma, durdurma, tersine çevirme gibi animasyonu kontrol eder ve dinleyici aracılığıyla herkesin animasyonun durumunu bilmesini sağlar. AnimationController sınıfı, kontrol ettiği animasyonda ilerlemek için bir Ticker kullanır. Tickerlar frame başına callbackler sağlar ve ekranda animasyonu görebilmemizi olanak tanır. Dispose methodu ile animation controller kullanım sonrası silinirler. Implicit animasyonlar gibi explicit animasyonlarından kendine özgü widgetları bulunur bunlar aşağıda belirtilmiştir.
SizeTransition
FadeTransition
AlignTransition
ScaleTransition
SlideTransition
RotationTransition
DecoratedBoxTransition
DefaultTextStyleTransition
RelativePositionedTransitio
Özetlemek gerekir ise Tween Animation ile aralıklar belirleyerek basit veya karmaşık kullanıcı ara yüzlerini animasyonlu hale getirmek mümkündür. Implicit ve Explicit animasyonların birbirine göre çeşitli avantajları ve dezavantajları vardır. Genel bilgileri edindikten sonra kod örneklerini yazının devamında inceleyebilirsiniz.
Opacity — Tween
İlk olarak AnimationController ve animasyonun türü tanımlanır.
late AnimationController controller
late Animation<double> animationValue;Daha sonra initState ile animasyonu başlatma ve bittiğinde silme için dispose kullanılır. Vermek istediğimiz değerler Tween içerisinde başlangıç ve son durumunda ne olunması isteniyorsa belirtilir. Opacity değeri 1 ve 0 arasında olduğundan dolayı başlangıç 1.0 bitiş değeri 0 verilir.
void initState() {
super.initState();
controller =
AnimationController(vsync: this, duration: Duration(seconds: 3));
animationValue = Tween(begin: 1.0, end: 0.0).animate(controller)..addListener(() {
setState(() {
});
});
}void dispose() {
super.dispose();
controller.dispose();
}
Opacity içinde aşağıdaki gibi aktif edilir ;
Opacity(
opacity: animationValue.value,
child: ElevatedButton(
style: ElevatedButton.styleFrom(primary: Colors.orange, shape: CircleBorder(),
fixedSize: Size(150, 150)),
onPressed: () {
controller.forward();
},
child: Text(
"Ekle",
style: TextStyle(color: Colors.black, fontSize: 20),
)),
);Scale — Rotate
Opacity örneğinde olduğu gibi AnimationController ve initState, dispose işlemleri tüm animasyonlarda yapılır. Farklı olan nokta ise Tween arasında vermek istediğimiz değerler ve değer türleridir. Scale boyutlandırma olduğunda dolayı başlangıç ve son boyut değerleri , rotate döndürme özelliği olduğundan dolayı döneceği derece belirtilir. Scale ve rotate transform widgetı ile birlikte çalışabilir.
Controller reverse, repeat, forward gibi özellikler arabilir. Forward animasyonu başlatırken reverse tersten başlatır. Repeat ise animasyonun tekrarlanmasını sağlar.
void initState() {
super.initState();
controller =
AnimationController(vsync: this, duration: Duration(seconds: 3));
scaleValue = Tween(begin: 150.0, end: 80.0).animate(controller)..addListener(() {
setState(() {});});
rotateValue =Tween(begin: 0.0,end: (pi*2) )
.animate(CurvedAnimation(curve: Curves.easeInOut ,parent: controller))..addListener(() {setState(() {
});});
}Transform.rotate(
angle: rotateValue.value,
child: ElevatedButton(
style: ElevatedButton.styleFrom(primary: Colors.orange, shape: RoundedRectangleBorder(borderRadius: BorderRadius.only(bottomLeft: Radius.circular(30),topRight: Radius.circular(30))),
fixedSize: Size(scaleValue.value, scaleValue.value)
),
onPressed: () {
controller.repeat(reverse: true);
},
child: Text(
"Ekle",
style: TextStyle(color: Colors.black, fontSize: 20),
)),
);Slider — Contanier
Controller ve değer aralığı oluşturduktan sonra slider değerine göre boyut ve renk değiştiren bir container tasarımı yapılmak istenir ise aşağıdaki kod blokları kullanılabilir.
AnimatedContainer(
margin: EdgeInsets.all(5),
padding: EdgeInsets.all(10),
height: sliderValue.value > 0 ? 150.0 : screensize.height / 6,
decoration: BoxDecoration(
color: sliderValue.value > 0 ? Colors.blue[100] : Colors.indigo,
borderRadius: BorderRadius.circular(30)),
duration: Duration(seconds: 1),Slider(
value: sliderValue.value,
activeColor: sliderColor.value,
min: 0,
max: 100,
onChanged: (Color) {
sliderController.forward();
if (sliderValue.value == 60) {
sliderController.reverse();
}
}),
Multiple—Button
İkon butonları oluşturup tıkladığımızda bir çok buton ortaya çıkmasını istersek gerekli tanımlamarı yaptıktan sonra aşağıdaki yapıyı kullanabiliriz.
Transform.scale(
scale: ScaleValue.value,
child: FloatingActionButton(
backgroundColor: Colors.orange,
onPressed: () {},
tooltip: "Dosya Ekle",
child: Icon(Icons.document_scanner),
),
)Transform.rotate(
angle: RotateValue.value,
child: FloatingActionButton(
backgroundColor: Colors.lightGreen,
onPressed: () {
if(condition == true){
controller.reverse();
condition = false;
}
else{
controller.forward();
condition = true;
}
},
tooltip: "Ekle",
child: AnimatedIcon(
progress: controller,
icon: AnimatedIcons.menu_close
),
),
)Keyifli okumalar dilerim.
Comments