Flutter’da Tween Animasyonları

Başarılı bir mobil uygulama için animasyon kullanmanın kaçınılmaz olduğunu düşünüyorum. Çok basit bir renk değişimi ya da button hareketi tüm UX ve UI algısını yukarı çekebiliyor.

Flutter’ın en büyük sözlerinden biri 60 FPS animasyonlar oluşturabileceğimizdi. 60 fps sözünü başka bir yazıda test edeceğim şimdi basit birkaç animasyon örneği yapalım.

Flutter temel olarak animasyonları ikiye ayırıyor. Fizik temelli ve Tween animasyonlar. (Tween için çeviri bulamadım, verdiğim linkte çergi diyor ama onu bilen tween kelimesini bilenden daha azdır eminim. Aralıklı arasında gibi anlamlara geliyor.)

Tween Animasyonlar

Başlangıç ve bitiş için iki nokta vererek bir değeri bu iki nokta arasında gidişini arayüzümüze yansıtmamız sağlar. Bu değer integer, renk, konum gibi pek çok şey olabilir.

Aşağıdaki main.dart dosyasını flutter projemize ekleyip deneyebilirsiniz.

Yukarıdaki kod büyüyüp küçülen beyaz bir kare oluşturur.

Kod için bazı açıklamalar yapalım.

SingleTickerProviderStateMixin: Bu mixin’i main sınıfımızda kullanarak main sınıfı içinde bir adet animation controller oluşturabiliyoruz. Birden fazla controller için TickerProviderStateMixin kullanabiliriz.

AnimationController: Bu sınıf sayesinde animasyonumuzu reverse, forward, animateTo gibi metotlarla ve isAnimating, isCompleted, isDismissed gibi özellikler kontrol edebiliriz.

Tween: Animatable tipinde bir nesne döner fakat animate metodu ile animation tipinde bir nesne elde ederiz. İki noktalı notasyon ile animation nesnesi üzerindeki metotları çağırabiliriz.

vsync: AnimationController’ın bir parametresi olan bu değişken tickerProvider tipinde olmalıdır. Bu yüzden SingleTickerProviderStateMixin mixin’ini kullanıp vsync parametresine this anahtar kelimesini verebiliriz.

Tween sınıfını implement(yine çeviri faciası, uygulayan diyebiliriz belki) eden pek çok türevi var. flutter dokümantasyonunda bulabilirsiniz. Bunlardan biri olan ColorTween örneği de yapalım.

yukarıdaki main.dart üzerinde aşağıdaki değişiklikleri yapabilirsiniz.

 

Medium hesabımdaki şu yazımın çevirisidir.

Bir Cevap Yazın