Flutter Animations 101

This presentation is about start animation from zero with Flutter framework

Transcript

1. Flutter Animasyonlara Giriş
2. Salih Can Binboğa Mobile Application Developer at Biletall GDG Kayseri /salihcanbinboga
3. Animasyon Çeşitleri - Tween Animations - Physics-based Animations
4. Tween Animasyonlar
5. Explicit Animations - FooTransition Widget - AnimatedWidget - AnimatedBuilder Implicit Animations - AnimatedFoo Widgets - TweenAnimationBuilder Tween Animations Options
6. Implicit(Örtülü) Animasyon 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’lar. ImplicitlyAnimatedWidget Nedir? • Abstract bir sınıftır ve özelliklerindeki değişiklikleri canlandıran widget'lar oluşturmak için soyut bir sınıf. • Bu soyut sınıftan türetilip oluşturulan widget’lar, pencere öğesi ağacına ilk eklendiklerin’de hareket etmeyecektir. Bunun yerine, farklı değerlerle yeniden oluşturulduklarında, değişikliklere belirli bir süre boyunca animasyon uygulayarak bu değişikliklere yanıt verirler. • Sınıftan türetilen widget’lar Animated(CustomName) şeklinde isimlendirilmesi tercih edilmektedir. API
7. Implicit(Örtülü) Animasyon Çeşitleri - Align -> AnimatedAlign - Container -> AnimatedContainer - Opacity -> AnimatedOpacity - Padding -> AnimatedPadding - Positioned -> AnimatedPositioned - PositionedDirectional -> AnimatedPositionedDirectional - DefaultTextStyle -> AnimatedDefaultTextStyle - PhysicalModel -> AnimatedPhysicalModel API
9. Curves (Eğriler) Nedir? Curves zaman içindeki değişim oranını kontrol eder. API
11. TweenAnimationBuilder Custom Implicit Animations • Widget’ların ilk build olması ile birlikte Tween.Begin -> Tween.End animasyon uygulanır. • Tween.End değeri tutulur ve yeni Tween.End değeri geldiğinde end to end şeklinde animasyon uygulanır. API
13. Explicit(Açık) Animasyon Nedir? Explicit animasyonlar entegrasyonu implicit animasyonlara göre zor ve yönetimi implicit animasyonlara göre daha özgür olan animasyon türleridir. AnimationController ile yönetilirler.
14. Animation Controller 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. - 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. API
15. Explicit(Açık) Animasyon Çeşitleri - SizeTransition - FadeTransition - AlignTransition - ScaleTransition - SlideTransition - RotationTransition - DecoratedBoxTransition - DefaultTextStyleTransition - RelativePositionedTransition API
17. Animation Controller Status Durumları - AnimationStatus.forward -> Baştan Başladı. - AnimationStatus.completed -> Sonda Bitti. - AnimationStatus.reverse -> Sondan Başladı. - AnimationStatus.dismissed -> Başta Bitti. API
18. Tween Animasyon Çeşitleri (Animatable) 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 animasyonlar Animatable sınıflardır. - AlignmentGeometryTween - AlignmentTween - BorderRadiusTween - BorderTween - ColorTween - IntTween - SizeTween - … API
19. AnimatedWidget Animasyonlardan dolayı kodunuz çok dolduğunda veya kendi geçiş(Transition) animasyonlarımızı yapmak istediğimizde kullandığımız bir widget. API
21. AnimatedBuilder AnimatedBuilder ile bütün yönetimi üstleniyoruz! Sadece güncellenmesini istediğimiz widgetları güncelleyerek daha performanslı animasyonlar yapabiliyoruz. API
23. Sıralı Animasyon Oluşturma Kompleks ve aynı zamanda göze hitap eden animasyonlar oluşturmak istiyorsak, sıralı animasyonları kesinlikle kullanmalıyız. Sıralı animasyonlar oluşturmak için kullanabileceğimiz yapılar; • TweenSequence • CurvedAnimations -> interval curves TweenSequence -- Interval -- Demo twitter
25. Explicit Animations Tips - Animation Controller Dispose State - Sabit widgetların tekrar oluşturulmasını önlemek için builder içerisinde çıkartılmalı! - Bir controller kullanılacak ise SingleTickerProviderMixin tercih edilmelidir. - timeDilation ile geliştirme ortamında animasyon hızları ayarlanabilir.
26. Paket Tavsiyelerim - Hero Animations - Hooks - Flutter Sequence - Simple Animations
27. Teşekkürler