Flutter: Hero Animasyon Hızı ve Geçiş Süresi Kontrolü

Hero animasyonu Flutter'da kullanıcı deneyimini en hızlı yükselten detaylardan biridir. Ama çoğu uygulamada asıl farkı yaratan şey animasyonun kendisi değil, ne kadar hızlı ve hangi eğriyle çalıştığıdır. Bu yazıda Flutter Hero animasyon hızını, geçiş süresini ve hareket hissini nasıl kontrol edeceğinizi ele alacağız.

Live Demo

Aşağıdaki interaktif örnekte Hero animasyonunu deneyebilirsiniz:

💡 Eğer yukarıdaki örnek açılmazsa, DartPad linkine tıklayarak yeni sekmede çalıştırabilirsiniz.

Neden Hero Animasyon Hızı Önemlidir?

Kısa ve dengeli bir animasyon, ekranda profesyonel bir akış hissi oluşturur. Çok yavaş animasyon kullanıcıyı bekletir, çok hızlı animasyon ise bağlam kaybına yol açar.

SEO açısından da kullanıcıların sık aradığı şey genellikle "flutter hero animation speed" veya "hero transition duration flutter" gibi varyasyonlardır. Bu yüzden sadece Hero kullanmak değil, onu doğru zamanlamak da önemlidir.

Temel Hero Yapısı

Hero animasyonu için iki sayfada da aynı tag kullanılmalıdır.

Hero(
  tag: 'product-image',
  child: Image.network(
    imageUrl,
    fit: BoxFit.cover,
  ),
)

İkinci sayfada da aynı tag kullanılmalıdır.

Hero(
  tag: 'product-image',
  child: Image.network(
    imageUrl,
    fit: BoxFit.cover,
  ),
)

Geçiş Süresini Değiştirme

Hero animasyonunun hızını doğrudan route süresi ile etkileyebilirsiniz. En pratik yöntem PageRouteBuilder kullanmaktır.

Navigator.push(
  context,
  PageRouteBuilder(
    transitionDuration: const Duration(milliseconds: 450),
    pageBuilder: (context, animation, secondaryAnimation) => const DetailPage(),
  ),
);

Bu yapı ile geçişi daha yumuşak ya da daha sıkı hale getirebilirsiniz.

Curve ile Hareket Hissini Ayarlama

Animasyonun süresi kadar eğrisi de önemlidir. Aynı süre, farklı curve ile bambaşka bir his verir.

Navigator.push(
  context,
  PageRouteBuilder(
    transitionDuration: const Duration(milliseconds: 500),
    pageBuilder: (context, animation, secondaryAnimation) => const DetailPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      final curvedAnimation = CurvedAnimation(
        parent: animation,
        curve: Curves.easeOutCubic,
      );

      return FadeTransition(
        opacity: curvedAnimation,
        child: child,
      );
    },
  ),
);

Hero İçin Daha Premium Bir Akış

Gerçek ürün uygulamalarında genellikle sadece Hero değil, aynı anda birkaç hareket kullanılır.

• Görsel için Hero
• Yazı için fade geçiş
• Arka plan için hafif scale etkisi
• Route süresi için 350-600 ms aralığı

Bu kombinasyon, özellikle e-ticaret, portfolyo ve medya uygulamalarında güçlü çalışır.

Custom Flight Shuttle

Hero animasyonunun uçuş anını özelleştirmek isterseniz flightShuttleBuilder kullanabilirsiniz.

Hero(
  tag: 'avatar',
  flightShuttleBuilder: (flightContext, animation, direction, fromContext, toContext) {
    return Material(
      color: Colors.transparent,
      child: ScaleTransition(
        scale: CurvedAnimation(parent: animation, curve: Curves.easeOutBack),
        child: const CircleAvatar(radius: 40, backgroundColor: Colors.blue),
      ),
    );
  },
  child: const CircleAvatar(radius: 24, backgroundColor: Colors.blue),
)

Bu yöntem, özellikle ikon, avatar ve ürün görsellerinde animasyon kalitesini artırır.

createRectTween Ne İşe Yarar?

Hero'nun hangi yörüngeden hareket edeceğini createRectTween ile değiştirebilirsiniz.

Hero(
  tag: 'card',
  createRectTween: (begin, end) {
    return MaterialRectArcTween(begin: begin, end: end);
  },
  child: Container(
    width: 120,
    height: 120,
    color: Colors.indigo,
  ),
)

Bu detay, düz çizgi yerine daha doğal bir hareket hissi oluşturur.

Sık Yapılan Hatalar

• Aynı sayfada birden fazla Hero için aynı tag kullanmak
• Çok uzun transitionDuration seçmek
• Her animasyonda aynı curve'ü körü körüne kullanmak
• Görsel boyutlarını çok farklı bırakıp geçişte sert zıplama yaratmak

Hero Hızını Seçerken Pratik Kural

• 200-300 ms: Çok hızlı, micro interaction için
• 350-500 ms: En dengeli aralık
• 600 ms ve üzeri: Sadece özel, dramatik geçişlerde

Sık Sorulan Sorular

Hero animasyonu yavaş görünüyorsa ne yapmalıyım?

Önce transitionDuration değerini kontrol edin, sonra curve seçimini sadeleştirin. Gereksiz yumuşak curve'ler animasyonu olduğundan yavaş hissettirebilir.

Hero ile birlikte page transition kullanmak gerekli mi?

Zorunlu değil ama çoğu modern Flutter arayüzünde daha kaliteli sonuç verir.

Hangi durumlarda Hero kullanmamalıyım?

Aynı elemanın başka sayfada anlamı değişiyorsa veya geçiş bağlamı yoksa Hero yerine daha sade bir navigation tercih edin.

Özet

Flutter Hero animasyon hızı, yalnızca bir detay değil; uygulamanın premium hissini belirleyen kritik bir UX bileşenidir. transitionDuration, CurvedAnimation, flightShuttleBuilder ve createRectTween ile daha kontrollü, daha şık ve SEO açısından daha güçlü bir içerik deneyimi oluşturabilirsiniz.