Flutter Animasyonlar 101
Merhabalar bu yazımda birlikte Flutter animasyon yaklaşımlarını anlatmaya çalışacağım. Canlı yayında maalesef süre yetmedi detaylara pek inemedik maalesef. Bu makale de gidebileceğimiz en derin noktaya kadar gidip değineceğim. :)
- Animasyon Türleri Nelerdir?
- Animasyonların Uygulamamızdaki Önemi
- Physics-based Animasyon Hakkında
- Tween Animasyonlar Nelerdir?
- Tween Animasyonlar Nasıl Çalışır?
- Implicit (Örtülü,Üstü Kapalı) Animasyonlar Nedir?
- ImplicitlyAnimatedWidget Nedir?
- Curves Nedir? Nasıl Çalışır?
- Custom Implicit Animasyon Nasıl Yapılır?
- Explicit (Açık,Belirgin) Animasyonlar Nedir?
- Bazı Explicit Animasyon Örnekleri
- TickerProvider Nedir? (SingleTickerProviderMixin&TickerProviderMixin)
- Animaton Controller Nasıl Çalışır? (Status durumları vb.)
- Animatable sınıf nedir ?
- Animatable olan sınıflar nelerdir?
- evaluate Nedir? chain Nedir?
- AnimatedWidget nedir ve nasıl çalışır?
- AnimatedBuilder nedir ve nasıl çalışır?
- Sıralı Animasyon Nasıl Yapılır ? (TweenSequence,Interval)
- Explicit Animations Unutmamamız Gerekenler
- timeDilation nedir ?
- Paket Önerileri (hooks ve flutter_sequence_animation)
- Kaynakça
Yukarıda çok geniş yelpaze de tuttuğum konu başlıklarını bu makalede birlikte öğrenmeye çalışacağız.
Bu makale sonunda karşınıza gelen animasyon ile ilgili yapılarda veya yapmak istediğiniz challange’lar da hangi yapıyı kullanmanız gerektiğiniz bileceksiniz. Hadi başlayalım..
Hepimizin en büyük gayesi okunabilir temiz ve güzel kurgulanmış kodlar çıkartabilmek oluyor. Bu gayelerimiz ne kadar önemli olsa dahi kullanıcı arayüzü katmanımız da herhangi bir material design pattern yapılarını kullanmazsak.
Animasyonlar ile desteklemezsek kullanıcı geri dönüşleri maalesef ki hiç iç açıcı olmuyor. Bu sebep ile material design pattern uygulayıp biraz da animasyonlar ile desteklediğimiz de kullanışlı ve göze hitap eden uygulamalar elde edebiliriz.
İlk konumuz olan flutter da animasyon çeşitleri nelerdir?
Flutter da animasyon dediğimiz de aklımıza iki konu başlığı gelmesi gerekiyor bunlar şu şekilde;
- Tween Animations
- Physics-based Animations
Kısaca physics-based animasyonlar dan bahsetmek istiyorum. Bu tür de ki animasyonlar daha çok gerçek hayat simülasyonu olarak düşünebilirsiniz. Şimdi hayal edelim. Bir topu yukarıdan bıraktığınızda fizik kurallar neticesinde aşağı doğru düşmeye ve hızlanmaya başlar. Aşağı düşüp ilk temasından sonra tekrar yükselir fakat ilk bırakılan mesafeye göre biraz daha az yükselir. Daha sonra düşer ve tekrar biraz daha yükselir. Bu tarz bir yapı kurgulanmak istenir ise flutter’da physics-based(Fizik Tabanlı) animations başlığı aklınıza gelmesi gerekiyor.
Tween Animations Nedir?
Flutter da eğer fizik tabanlı animasyon yapmacaksanız aklınıza bir sonraki konu başlığı olan Tween Animations gelmesi gerekiyor. Tween Animations daha çok iki değer arasında gidip gelerek yapabildiğimiz animasyonlardır. Nasıl yani ? Evet. Doğru Anladınız. İki değer arasında bize sunulan değerler ile animasyon gerçekleştirebiliyoruz.. Animasyonlar iki değer arasındaki yapabildiğimiz hayal gücümüzden ibaret..
Tween Animasyonlar kendi içinde iki yapıya ayrılıyor. Bu yapıları özelleştirilebilme ve yönetilebilme özelliklerine göre ikiye ayırıyoruz. Bu yapılar şu şekilde;
- Implicit Animations
- Explicit Animations
Implicit Animations Nedir ?
Implicit animasyonlar entegrasyonu oldukça kolay ve yönetimi explicit animasyonlara göre kısıtlanmış ImplicitlyAnimatedWidget soyut sınıfından türetilen widget’lardır.
Bu widgetlar flutter ekibi tarafında sdk(Software Development Kit) dahil edilmiştir. Peki.
ImplicitlyAnimatedWidget Nedir?
Bu abstract yani soyut bir sınıftır. Bu sınıftan implement ettiğimiz de bu sınıf kendi state içinde Animation Controller oluşturuyor. (Animation Controller’a ilerleyen süreçte bahsedeceğim) Oluşturduğu animation controllerin bir yönetim mekanızması oluyor ve şu an deyinmeyeceğim ilerleyen süreçte bu konuya detaylı işleyeceğiz. Bu yönetimini devralıyor ve size sadece bu sınıftan türetilen sınıfları yani widgetları hiç yönetim olaylarına girmeden kullanmanıza olanak sağlıyor.
ImplicitlyAnimatedWidget’tan türetilen widget çeşitleri nelerdir?(Yani implicit animasyon yaklaşımları)
- Align -> AnimatedAlign
- Container -> AnimatedContainer
- Opacity -> AnimatedOpacity
- Padding -> AnimatedPadding
- Positioned -> AnimatedPositioned
- PositionedDirectional -> AnimatedPositionedDirectional
- DefaultTextStyle -> AnimatedDefaultTextStyle
- PhysicalModel -> AnimatedPhysicalModel
Hemen bir durumu değinmek istiyorum. Burada dikkat etmeniz gereken aslında her zaman kullandığımız widgetların başına ‘Animated’ önekinin gelmesi olmuş. Bu ne demek? ImplicitlyAnimatedWidget’dan türetilen widgetlar bir isimlendirme durumuna dahil edilmiş durumda. Eğer siz de ilerde yaparsanız kendi implicit animasyonlarınızı isimlendirme de bu konuya dikkat etmelisiniz.
Ayrıca bu yazdığım implicit widgetlar sadece bazıları.. Hepsine erişmek isterseniz kaynakça’da ImplicitlyAnimatedWidget api bağlantısını bıraktım oradan erişebilirsiniz.
Yukarıda implicit widget ile ilgili bir örnek kod yapısı oluşturdum. Burada dikkat etmeniz gereken sayfa ilk açıldığında herhangi bir animasyon olmayacağı.
Implicit widgetlar sadece içeriği değiştiğinde ve ekran yenilendiğinde animasyonları ortaya çıkartır.
Eklediğim kod örneğinde gördüğünüz ‘Change Opacity’ adlı butona tıkladığımda 0 olan _opacity değeri 1 olup ekran yenilendiği ve içeriği değiştiği için verdiğim duration yani 2 saniye’ye göre hesaplanan enterpolasyon değerine göre animasyonlu bir şekilde container’i görünür kılacaktır.
Aslında implicit animasyonlar ile ilgili anlatacaklarım bu kadar. Implicit animasyonları tanıtmaya başladığımda dediğim gibi özelleştirilmesi düşük ve entegrasyonu kolay animasyon türleridir.
Bir başka konumuz olan Curve olayı nedir?
Curves zaman içindeki değişim oranını kontrol eder. Yani ne demek istiyorum biraz daha açayım.
Eklediğim bu görselden sizlere curve anlatmaya çalışacağım. Bu yukarıdaki görseldeki curve adı ‘bounceIn’ olarak geçiyor. Aslında evet, flutter ekibi tarafıdan sdk’ye dahil edilmiş onlarca curve çeşiti var. Tabii ki kendiniz de sinüs hesaplamalarını kullanarak kendinize ait bir curve yaratmanız mümkün.
Öncelikle bir animasyon için gereken ilk parametre duration yani animasyon süresidir. Biz örneğin 1 saniye olarak verdiğimizi düşünelim. 0 -> 1'e doğru animasyon akması için 0–1 saniye arasında 0.1,0.123,0.5… gibi değerler akmaya başlıyor. Biz de bu değerleri animatable sınıflar ile işleyerek kullanıyoruz. Ortaya animasyonlar çıkıyor..
Bu ortaya çıkan değerlere enterpolasyon hesaplanması deniyor. Kullandığınız curve’e göre ve verdiğiniz duration’a göre ortaya çıkan enterpolasyon değerleriyle animatable sınıfları animate ediyoruz..
Yukarıda bıraktığım ‘curve example’ isimli görselde sağa doğru süre akarken üst tarafa doğru hesaplanan enterpolasyon değerini görüyoruz. Sağ tarafa doğru süre akarken x değeri biraz yükseliyor ve tekrar 0'a düşüyor sonra bin öncekine göre biraz daha yükseliyor ve tekrar 0'a düşüyor. Bu şekilde devam eden bir curve(eğri). Bu curve ile animasyon oluşturduğumuzda neler olacağını hayal edelim.
Telefon ekranının en altından en üstüne animasyonlu bir şekilde 1 saniyede yukarı çıkan bir container düşünelim. Bu container normalde yavaş bir şekilde yukarı çıkar. Eğer bu curve’yi kullanırsak ne olacak? 4 etapta yukarı çıkacak.
1- Çok az yukarı çıkıp tekrar başlangıç noktasına dönecek.
2- Bir öncekine göre biraz daha fazla yukarı çıkıp tekrar başlangıç noktasına dönecek.
3- Öncekilere göre biraz daha fazla yukarı çıkıp tekrar başlangıç noktasına dönecek.
4- Başlangıç noktasından hızlı bir şekilde bitiş noktası yani telefonun en üstüne animasyonlu bir şekilde ulaşacak.
Kullandığımız bu curve örneği 4 safhadan oluşan bir animasyona dönüştürdü.
Yukarıda görselin animasyon videosu: https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_in.mp4
Bütün hazır yapılmış curve örneklerini incelemek isterseniz kaynakçaya curve api bağlantısını bıraktım.
Bu kod yapısında implicit widget’a bir curve dahil ettim. AnimatedContainer adlı widget’a curve parametresine flutter ekibinin sdk’e dahil ettiği Curves içinde ‘bounceInOut’ adlı curve dahil ettim.
TweenAnimationBuilder Nedir?
Yukarıdaki görselde gördüğünüz gibi implicit animasyonlardan sağa doğru ilerlediğimizde özelleştirilebilme olanağımızın yükseldiğini ve yönetimininin zorlaştığını görüyoruz. Bundan çıkarabileceğimiz en basit sonuç kullanabildiğimiz kadar implicit animasyonlar çeşitlerini kullanmalıyız. Eğer implicit animasyonlar işimizi görmüyorsa yeteri kadar direkt explicit animasyon türlerine geçmemeliyiz! Çünkü biraz daha yönetilebilir ama implicit bir widget olan TweenAnimationBuilder ile kendi implicit animasyonumuzu oluşturabiliyoruz.
- Bildiğiniz gibi implicit widgetlar ilk çalıştırma ile değil içerisindeki veri değişip ekran güncellendiğinde animasyonları açığa çıkartır. Bu tarzda oluşturduğunuz animasyonlar ekranın açılması ile yani build method ilk tetiklenmesi ile çalışır.
- Performans problemi olmaması için animatable olmayan yani sabit widgetları builder içinden çıkartılması önemlidir!
- TweenAnimationBuilder ile çalışan bir animasyon bitmeden yeni bir end değer atanırsa ve ekran güncellenirse tekrar baştan başlamaz. Son kaldığı değerden yeni atadığını değere doğru çalışmaya başlar..
Yukarıda yorum satırında belirttiğim noktaya dikkat etmeliyiz. Biraz methodları açıklamak istiyorum.
- tween: Buraya animatable bir obje veriyoruz, ve bu objenin döndüğü değeri builder methodu içinde kullanabiliyoruz. (Animatable objelerden bahsedeceğim)
- onEnd: Animasyon başlayıp sonlandığında çalışır.
- duration: Buraya animasyonun ne kadar süre sürmesini istiyorsanız tanımlıyorsunuz.
- child: Sürekli oluşmasını istemediğimiz animasyon kullanmaya ihtiyacı olmayan widget’ı buraya tanımlıyoruz.
- builder: Tanımladığımız animatable (Tween) obje arka tarafta yönetiliyor ve animation oluşuyor. Animation’dan dönen veriyi,yukarıda tanımladığımız child’i ve context dönen bir method. Bu method animation değeri her değiştiğinde çalışır.
Madde madde TweenAnimationBuilder nasıl kullanabilirsiniz açıklamaya çalıştım. Gördüğünüz gibi çok kompleks durumlar yok implicit animasyonlar için. Implicit animasyonlar hakkında anlatacaklarım bu kadardı..
Ayrıca TweenAnimationBuilder ile ilgili bir demo hazırladım tıklayınız.
Explicit Animasyonlar Nedir ve Nasıl Çalışır?
Yukarıdaki görselde artık sağ tarafa doğru yaklaştık :)
Explicit animasyonlar entegrasyonu implicit animasyonlara göre zor ve yönetimi implicit animasyonlara göre daha özgür olan animasyon türleridir. AnimationController(Birazdan değineceğim) ile yönetilirler.
Explicit animasyonlar da kendi içinde aslında ikiye ayırabiliriz. Bunlar sıfırdan kendimizin oluşturduğu ve sdk’de dahil olarak gelen hazır *Name*Transition adlı widgetlardır.
Hazır bulabileceğiniz explicit animasyon örnekleri;
- SizeTransition
- FadeTransition
- AlignTransition
- ScaleTransition
- SlideTransition
- RotationTransition
- DecoratedBoxTransition
- DefaultTextStyleTransition
- RelativePositionedTransitio
Bir tane demo yapalım;
AnimationController Nedir? Nasıl Çalışır?
Explicit Animasyon transitions çeşitlerine eçmeden önce AnimationController hakkında kısaca bahsetmek istiyorum.
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(Yakında bahsedeceğim) kullanır.
Eğer bir animationcontroller kullanmaya karar verdiyseniz bazı methodları ve durumları iyi bilmelisiniz. Bu durumlardan bir tanesi bellek yönetimi.
Oluşturduğunuz her animation controller bir ticker’a bağlanır demiştim. Bu tickerlar frame başına callbackler sağlıyor ve ekranda animasyonu görebilmemizi sağlıyor diyebilirim.
Eğer ekrandan çıktığınızda bu animation controllerin bağlandığı tickeri serbest bırakmazsanız tüketmeye devam eder. Bellek kullanımı belirli bir noktadan sonra uygulamanız patlar ve gelsin kötü kullanıcı yorumları.. Her oluşturduğunuz animation controlleri dispose adlı method ile bellekten temizlemeyi unutmuyoruz!
Ayrıca listener eklersek onu bile remove etmelisiniz.. (Şimdiden zahmetli geldi ve unuturum diyorsanız implicit widgetlar kullanarak çözmeye çalışmalısınız :) )
Yaygın kullanılan AnimationController methodları;
- forward -> Animasyonu ileriye doğru (sonuna doğru) çalıştırmaya başlar.
- reverse -> Animasyonu tersten (başa doğru) çalıştırmaya başlar.
- stop -> Animasyonu çalıştırmayı durdurur.
- repeat -> Animasyonu ileri yönde çalıştırmaya başlar ve tamamlandığında animasyonu yeniden başlatır. Reverse true ile sondan başa tekrar döngü oluşturulabilir.
- dispose -> Kullandığı kaynakları(ticker vb.) bellekten temizler ve controller kullanılmaz duruma gelir.
Yarattığınız animation controlleri birazdan anlatacağım animatable bir objeye bağlayabilirsiniz. Objeye bağladığınızda animation controller bağladığınız animatable objeden yeni bir animation oluşturur ve değerler üretmeye hazır hale gelir.
AnimationController başına bağlayabileceğiniz animatable obje sınırı yoktur isterseniz 10 isterseniz 1 tane bağlayabilirsiniz. Unutmayın ki hepsini tek bir controller aracılığı ile yönetmiş olacaksınız!
AnimationController için status durumlarını da açıklamak istiyorum;
- AnimationStatus.forward -> Baştan Başladı.
- AnimationStatus.completed -> Sonda Bitti.
- AnimationStatus.reverse -> Sondan Başladı.
- AnimationStatus.dismissed -> Başta Bitti.
Status durumların da bir çok kişinin aklının karıştığını fark ettim. Bu yüzden bu şekilde bir açıklama gereksinimi duydum..
Ticker Nedir? TickerProvider Nedir?
Az önce animation controller kullanımından bahsettim ve ilk cümlelerden birisi ‘animation controller bir ticker’a bağlanır’ peki. Nedir bu ticker?
TickerProvider aslında soyut bir sınıf ve amacı ticker oluşturulmasını sağlayan arayüzleri barındırması. Bu sınıftan türetilen bir sınıf ticker oluşturmakla yükümlüdür..
Ticker SchedulerBinding tarafında yönetilen frame başına callback sunan bir sınıftır.
Animatable Sınıflar Nedir? Ne Zaman Kullanırız?
Girdi olarak Animation <double> verildiğinde T türünde bir değer üretebilen bir nesne. Yani ne demek istiyorum :) Örneğin animatable sınıfıntan implement edilen sınıflara bakalım.
Bir de sözlük tarzında açıklama bırakayım: Başlangıç ve bitiş değeri arasında doğrusal bir enterpolasyon sunan canlandırılabilir sınıflardır. AnimationController tarafından yönetilirler.
Tween animatable bir sınıf oluyor implement ettiği için ve T type alıyor. Yani Tween<double> yaptığımızda ve animation controller ile animate ettiğimizde, geriye bir animation dönüyor ve double cinsinde hesaplanan enterpolasyon değerine göre animasyon nesnesinin değeri akmaya başlıyor. Animatable sınıflar tamamen bundan ibarettir.
Animatable sınıfların bazı methodlarını açıklamak istiyorum..
- animate: Verilen animation tarafından yönetilen fakat ilgili animatable sınıfında belirlenen değerleri döndüren bir animasyon(animation) oluşturur.
- evaluate: Verilen animation nesnesi için güncel değeri döndürür.
- chain: Chain ile animatable objeleri birbirlerine bağlayıp geriye yeni bir animatable obje döndürebilirsiniz.
- AlignmentGeometryTween
- AlignmentTween
- BorderRadiusTween
- BorderTween
- ColorTween
- IntTween
- SizeTween
Bunlar ve daha fazlasını kaynakçaya bıraktığım Tween api bağlantısından bulabilirsiniz.
Yukarıda bazı Transition widgetlardan bahsettim. Bunlar explicit widget olarak geçiyor ve sizden animation objesi bekliyor. Verdiğiniz animation objesine göre ilgili animasyonu gerçekleştiriyor. Eğer bunlar dışında kendimize ait daha fazla özelleştirilmiş bir animasyon yapmak istediğimiz de bizlere bazı araç widgetlar yapılmış. Bunları tanıyalım..
- AnimatedWidget : Animasyonlardan dolayı kodunuz çok dolduğunda veya kendi geçiş(Transition) animasyonlarımızı yapmak istediğimizde kullandığımız bir widget(sınıftır).
- AnimatedBuilder: AnimatedBuilder ile bütün yönetimi üstleniyoruz! Sadece güncellenmesini istediğimiz widgetları güncelleyerek daha performanslı animasyonlar yapabiliyoruz.
AnimatedWidget olmadan bir kod yapısına bakalım;
Kısaca açıklamam gerekir ise gördüğünüz gibi bir animation controller oluşturdum ve ilgili explicit transition widgetlarına tanımlamalarını yaptım. Üstüne tıklandığında forward methodu ile animasyonu başlattım.
Deneyimleyebilmeniz için dartpad ayarladım lütfen tıklayınız
Bir de yukarıda bahsettiğim örnek kodun animatedwidget ile nasıl olduğuna bakalım;
Gördüğünüz gibi kendimize özel bir sınıf açıyoruz ve animasyon ile ilgili işlemlerimizi o sınıf içersinde yaptığımız için ekran içinde kodlarımız daha okunabilir ve yönetilebilir oluyor..
Deneyimleyebilmeniz için dartpad ayarladım lütfen tıklayınız
Bir sonraki yardımcı widget olan AnimatedBuilder widgetına bakalım;
Burada ilk olarak dikkat etmemiz gereken konu, builder içindeki child’ın dışarıdan alındığıdır. Animasyon devam ettikçe per frame builder tetiklenebiliyor. Bu durumda eğer child yerine container direkt eklerse sürekli yeniden oluşturulacak. Bu boş yere bellek tüketimi demek. Bunu istemeyiz!
AnimatedBuilder ile çok daha kullanışlı,performanslı ve kompleks animasyonlar yapmak için kullanabiliriz. Animated builder tanımladğınız animaton sınıfına göre builder methodunu sürekli yenileyerek size istediğiniz animasyonu sunuyor. Bu şekilde sadece istediğiniz yerlerini güncellemiş oluyorsunuz..
Deneyimleyebilmeniz için dartpad ayarladım lütfen tıklayınız
Buraya kadar her şey tamam olduğunu düşünüyorsanız, animasyonlar yapabilmek için gerekli bir çok base yapıları biliyorsunuz. Artık karşınıza çıkan herhangi bir animasyon konusunu veya challange ne kullanmanız gerektiğini %90 oranında biliyorsunuz.
Sırada %10'luk bir dilim var. Peki bu dilimi neler dahil ?
StaggeredAnimations yani sıralı animasyonlar.. Sıralı bir animasyon yapmaya başladığınız da üstüne düşünmeniz gerektiğini anlayacaksınız. Hemen bir tane sıralı animasyon örneği eklemek istiyorum.
Yukarıda gördüğünüz beğenme animasyonu sıralı animasyon örneğidir.
Sıralı animasyon yapabilmeniz için paketler vs. var fakat bilmeniz gereken native 2 yapı var. Bunlar şu şekilde;
- TweenSequence
- CurverAnimations adlı animatable sınıfının interval değeri ile yapılabilir
Sıralı animasyonlara başlamadan hemen önce sizlere dartpad bağlantısı bırakıyorum. Tıklayınız.
TweenSequence Kod Örneği;
TweenSequence adlı animatable bir sınıf ve içeriğine list alıyor. Liste içerisine TweenSequenceItem adlı T type parametre alan bir sınıf bekliyor.
Burada dikkat etmeniz gereken konudan birisi belirttiğiniz liste t paramatresi türünde itemlar oluşturmalısınız. Yukarıdaki örnekte gördüğünüz üzere ‘<TweenSequenceItem<double>>’ double t type belirttik ve liste içerisindeki her item T Type değeri double olması gerekiyor.
TweenSequenceItem weight değeri yüzde üzerinden belirlemeniz gerekiyor. Örnek vermem gerekirse animasyon süresi eğer 1 saniye ise ve siz item’a weight değeri 40 eklediğimizde %40'ı yani 0.4 saniye sürmesi gereken bir TweenAnimation eklemiş oluyoruz.
Yukarıdan aşağı doğru eklediğiniz animatable objeler animate oluyor..
Bir diğer sıralı animasyon konumuz olan interval ile yapım kod örneği;
Burada dikkat etmemiz gereken bazı konular var. Interval değeri 0 ile 1 arasında olması gerekiyor. 0 ile 1 arasında eklediğiniz değer aralığında animasyonunuz ilerler. Bunun için aşağıya görseli tekrar bırakmak istiyorum.
Aslında sıralı animasyonlar da bu kadardı. Sıralı animasyonlar ile ilgili başlangıç seviye anlatacaklarım bu kadardı.
Olabildiğince örneklendirme ile anlatmaya çalıştım gördüğünüz gibi en kompleks kısımlar explicit animasyonlar idi onlar bile Flutter ile eğlenceli! :)
Explicit Animations Unutmamamız gerekenler;
- Yarattığınız animation controller bellekten temizlemeyi unutmuyoruz!(dispose methodu) (Aşağıdaki görsele dikkat edelim)
- Sabit widgetların tekrar oluşturulmasını önlemek için builder içerisinden çıkartmayı unutmuyoruz! (Yukarıdaki görsele dikkat edelim)
- Bir animation controller kullanılacak ise SingleTickerProviderMixin tercih etmeyi unutmuyoruz!
timeDilation: Geliştirme ortamında oluşturduğunuz animasyonların hızı ayarlayabiliyorsunuz. TimeDilation değeri yükseldikçe animasyon ağır çekim olmaya başlıyor.
Son olarak geliştirmelerinizde kolaylık ve arka planda bellek yönetimlerini üstlenecek bazı paketler önermek istiyorum.
- Hero Animations: Bu animasyon sdk ile birlikte geliyor, sayfa geçişlerinde bazı itemların animasyonlu bir şekilde aktarılmasına olanak sağlıyor.
- Hooks: Bu paket ile bellek yönetimini kolaylaştırabiliyorsunuz. (Sadece animation controller değil scroll controller vs. gibi)
- Flutter Sequence: Daha basit ve kullanışlı sıralı animasyonlar yapmanıza olanak sağlıyor.
- Simple Animations: Çok güzel özellikleri var..
- Entry: Widgetları görünür kılmak için en kolay yol diyebilirim.
- Spring: En çok kullanılan animasyon çeşitlerinden bir tür kolaj paketi yapılmış, bu paket ile gayet hızlı ve yönetilebilir pre-build dediğimiz animasyonlar ekleyebilirsiniz.
Flutter’da animasyonlar bu kadardı. Gerçekten uzun bir makale oldu, belki bölüm bölüm yapmam daha doğru olabilirdi. Tek seferde bütün animasyonlara değinmek istedim, gerçekten tahmin ettiğimden daha fazla emek sarf ettiğim bir makale oldu! :)
Genel olarak anlatmak istediklerimi eksiksiz anladıysan gerçekten benden mutlusu yok!
Eğer anlamadığın veya benim yanlış bir kelamda bulunduğum bir konu var ise lütfen yorum bırak veya linkedin üzerinden bana ulaşmayı ihmal etme. :)
Unutmayın ki paketleri kullanarak da basit bir şekilde animasyon yapabilirdik. Fakat arkaplan da yatan yapıları bilmezsek sadece ezber yapmış oluruz!
Ayrıca video anlatımında pek yetiştiremedim fakat izlemek isterseniz:
Bu makale için örnekler oluşturduğum github reposuna buradan ulaşabilirsiniz: https://github.com/SalihCanBinboga/flutter_festival_demo
Daha akrobatik,kompleks animasyonlar çıkartmak isterseniz bu makaleyi tavsiye ediyorum..
Kaynakça:
