Animation Make Us Hero
Hero Animations
Herkese Merhaba🖤
Bu yazımda sizlere projelerimizde bizleri kahraman yapan hero animasyonlarından bahsedeceğim, şimdiden keyifli okumalar diliyorum.🎈
Flutter’da iki farklı ekranda bulunan aynı widgetları bir ekrandan diğerine çok yumuşak bir geçişle geçirmek istersek hero animasyonları kullanıyoruz.
Hero animasyonları iki tane Hero widget kullanılarak oluşturuyoruz; biri kaynak rotadaki diğeri ise hedef rotadaki widgetı oluşturuyor.
Hero animasyonumuzu oluştururken hangi adımları izlemeliyiz:
- Öncelikle kaynak rotada bir Hero widgetı tanımlamalıyız.
- Daha sonra widgetımıza bir etiket eklemeliyiz.
- Aynı şekilde hedef rotada da bir widget oluşturmalı ve bu widgeta kaynak rotadaki widgeta verdiğimiz etiket ile aynı etiketi vermeliyiz.
Daha iyi sonuçlar almak için iki hero widgetı da benzer widget ağaçlarına sahip olmalıdır.
Hero animasyonlarını uygulamak için kullanılan bazı sınıflar:
Hero: Kaynaktan hedef rotaya giden pencere öğesidir.
Inkwell: Kahramana tıklandığında ne olacağını belirler.
Navigator: Kaynak rotadan hedef rotaya geçişi sağlar.
Route: Bir ekranı ya da sayfayı belirtir.
Basit bir örnek ile hero animasyonları nasıl kullandığımızı inceleyelim:
Yukarıda iki hero widgetın bulunacağı sayfalar arasında geçiş yapmak için gerekli kodları görüyoruz.
Bu kodlardan sonra iki adet hero widgetimizi oluşturup her ikisine de aynı etiketi (tag) veriyoruz. Ben burada bir Dash fotoğrafı kullanmayı tercih ettim. İstediğiniz herhangi bir fotoğrafı tercih edebilir ya da sadece bir container oluşturarak da hero animasyonların nasıl çalıştığını gözlemleyebilirsiniz.
Eğer fotoğraf kullanmayı tercih edersek eklediğimiz fotoğrafı aşağıdaki gibi pubspec.yaml’da tanımlamayı unutmamalıyız.
Aşağıda basit bir hero animasyonun çalışma prensibini gösteren ekran kaydını görebilirsiniz:
Hero animasyonları kendi içerisinde ikiye ayrılıyor:
Standart Hero Animasyonları ve Radyal Hero Animasyonları. Şimdi sırası ile bu animasyonları inceleyelim.
Standart Hero Animations
Standart hero animasyonları, kahramanı bir noktadan diğer bir noktaya taşır, genellikle bulunduğu konumdan farklı bir konuma ve boyuta yerleştirilir.
Burada yukarıdaki basit hero animasyon örneğinden farklı olarak timeDilation kullandım. timeDilation animasyonları yavaşlatmamı sağladı. Aradaki farkı anlayabilmemiz için ekran kaydını bırakıyorum.
Radial Hero Animations
Radyal hero animasyonları, kahraman rotasını değiştirirken şekli daireselden dikdörtgene dönüşüyormuş gibi gösterir.
Radyal animasyonda farklı olarak Tween kullandım, Tween animasyonlar başlangıç ve bitiş için iki nokta vererek bir değerin bu iki nokta arasında gidişini ara yüzümüze yansıtmamızı sağlar. Bu değer integer, renk, konum gibi pek çok şey olabilir.
Kaynaklar:https://docs.flutter.dev/
Twitter:https://twitter.com/sudeetpll
Linkedin:https://www.linkedin.com/in/sude-topal/
Yazımın sonuna geldik, sizlere hero animasyonlardan bahsetmek istedim. Umarım faydalı bir yazı olmuştur ve keyifle okumuşsunuzdur. Yeni yazılarda görüşmek üzere. Kendinize çok iyi bakın.🖤
Tüm kaynak kodlara aşağıdaki github linkimden ulaşabilirsiniz, destekleriniz için teşekkür ederim.✨
