Mobil geliştirmede animasyon: nedir, hangi türleri vardır ve nasıl kullanılır

Android'de Animasyon: Property Animation ve View Animation

Android iki ana animasyon sistemi sağlar: View Animation (eski) ve Property Animation (modern). View Animation (veya Tween Animation) yalnızca görsel temsil ile çalışır — Görünümün görüntülenmesini değiştirir ancak gerçek özelliklerini değiştirmez (örneğin, tıklama koordinatları yerinde kalır). Android 3.0'da tanıtılan Property Animation, Animator — ValueAnimator, ObjectAnimator veya AnimatorSet aracılığıyla gerçek nesne özelliklerini değiştirir.

ObjectAnimator ve ValueAnimator

ObjectAnimator, Property Animation'ın en popüler sınıfıdır. Belirli bir nesne özelliğini (örneğin, translationX, alpha, scaleY) belirtilen bir süre boyunca belirli bir Interpolator ile canlandırır.

ObjectAnimator.ofFloat(myView, "translationX", 0f, 300f).apply {
    duration = 500
    interpolator = FastOutSlowInInterpolator()
    startDelay = 200
}.start()

ValueAnimator belirli bir nesneye bağlı değildir — herhangi bir özellik veya özel mantık için kullanılabilecek değerler üretir.

View Animation ve XML Animasyonları

View Animation, res/anim/ XML dosyalarında tanımlanır. Dört tür desteklenir: scale, translate, rotate, alpha. Dezavantajı, animasyonun gerçek Görünüm parametrelerini değiştirmemesidir. Basit efektler (yanıp sönme, döndürme) için View Animation hala uygulanabilir, ancak yeni projeler için Property Animation önerilir.

Jetpack Compose'da Animasyon

Jetpack Compose modern bir animasyon API'si sunar: animateAsState, Animatable, AnimatedVisibility ve AnimatedContent. Compose'da animasyon reaktiftir: durum değiştiğinde animasyon otomatik olarak başlar.

var expanded = remember { mutableStateOf(false) }
val size = animateAsState(
    if (expanded) 200f else 50f
)
Box(
    modifier = Modifier
        .size(size.value, size.value)
        .clickable { expanded = !expanded }
        .background(Color.Blue)
)

iOS'te Animasyon: Core Animation ve UIView.animate

iOS, Core Animation — CALayer ile çalışan düşük seviyeli bir framework — tabanlı güçlü bir animasyon yığını sağlar. UIKit, Core Animation üzerine kullanışlı UIView.animate ve UIViewPropertyAnimator yöntemleriyle inşa edilir.

UIView.animate

UIView.animate, iOS'te animasyon yapmanın en basit yoludur. frame, alpha, transform, backgroundColor ve diğer UIView özelliklerini canlandırmaya olanak tanır.

UIView.animate(
    withDuration: 0.5,
    delay: 0.2,
    usingSpringWithDamping: 0.6,
    initialSpringVelocity: 1.0,
    options: [.curveEaseInOut]
) {
    myView.frame.origin.x += 300
    myView.alpha = 0.5
}

UIKit Dynamics

UIKit Dynamics — fiziksel animasyon için bir framework: yerçekimi, çarpışmalar, yaylar, çekim kuvvetleri. Manuel fizik hesaplaması olmadan gerçekçi nesne davranışı oluşturmaya olanak tanır. Özel geçişler, animasyonlu menüler ve oyun öğeleri için kullanılır.

CAAnimation ve Core Animation

Core Animation (CAAnimation, CABasicAnimation, CAKeyframeAnimation) — CALayer animasyonu için düşük seviyeli bir API. 3D dönüşümleri, yol animasyonunu (keyframe), maskeleme ve kompozisyonu destekler. SwiftUI, animation ve withAnimation değiştiricileri aracılığıyla perde arkasında Core Animation'ı kullanır.

let animation = CABasicAnimation(keyPath: "transform.rotation.z")
animation.fromValue = 0
animation.toValue = CGFloat.pi * 2
animation.duration = 1.0
animation.repeatCount = .infinity
myLayer.add(animation, forKey: "rotation")

Çoğu iOS projesi için yerleşik animasyonuyla SwiftUI kullanılır. Örneğin, withAnimation durum değişikliklerini animasyonlu bir bağlama sarar.

Vektör Animasyonu: Lottie ve Rive

Karmaşık animasyonları (karakterler, geçişler, yükleyiciler) kodla uygulamak zordur. Lottie ve Rive, tasarımcıların görsel düzenleyicilerde animasyon oluşturmasına ve geliştiricilerin bunları hazır bir bileşen olarak uygulamaya yerleştirmesine olanak tanıyarak bu sorunu çözer.

Lottie

Lottie — Airbnb'den (şimdi LottieFiles) JSON formatında dışa aktarılan Adobe After Effects animasyonlarını oluşturan bir kitaplık. Android, iOS, Flutter, React Native ve Web'de desteklenir. Lottie animasyonları vektör tabanlıdır, kalite kaybı olmadan ölçeklenir ve programlı olarak özelleştirilebilir (hız, ilerleme, renkler).

// Android
import com.airbnb.lottie.LottieAnimationView
val lottieView = findViewById<LottieAnimationView>(R.id.lottieView)
lottieView.setAnimation(R.raw.loading_animation)
lottieView.playAnimation()

Rive

Rive (önceden 2Dimensions) — vektör animasyonu için daha gelişmiş bir araç. Lottie'nin aksine Rive, etkileşimli animasyonu destekler: durumlar, tetikleyiciler, geçişler. Animasyon Rive Editor'da oluşturulur ve uygulamada bir State Machine aracılığıyla kontrol edilir. Rive, oyun arayüzleri, animasyonlu simgeler ve geri bildirimli karmaşık geçişler için uygundur.

IT Sectr'de dekoratif animasyonlar (yükleyiciler, başarılı işlemler, boş durumlar) için Lottie'yi ve onboarding ekranlarının etkileşimli öğeleri için Rive'ı kullanıyoruz. Bu, UIKit veya Canvas ile manuel uygulamaya kıyasla animasyon geliştirme süresini %60 oranında azaltır.

Shared Element Transition ve Hero Animation

Shared Element Transition — bir öğenin (görüntü, metin, kart) ekranlar arasında geçiş yaparken yumuşak bir şekilde hareket ettiği ve dönüştüğü bir animasyon. Bu, süreklilik yanılsaması yaratır: kullanıcı yeni bir ekrana "gitmez", öğenin "içine dalar".

Android Shared Element Transition

Android'de geçiş, ActivityOptionsCompat ve transitionName öznitelikleri aracılığıyla uygulanır. FragmentTransaction, bir Activity içindeki geçişler için addSharedElement'ı destekler. Compose, SharedContentState ile SharedTransitionLayout kullanır.

iOS Hero Transition

iOS'ta yerleşik bir Hero Transition yoktur, ancak Hero kitaplığı (Luke Zhao tarafından) bu deseni UIKit'te uygular. Her iki ekrandaki öğelere bir kimlik atamanız yeterlidir — Hero otomatik olarak yumuşak bir geçiş oluşturur. SwiftUI'de geçiş animasyonu, NavigationStack ve matchedGeometryEffect aracılığıyla yerleşiktir.

Flutter Hero

Flutter, bir tag parametresiyle yerleşik bir Hero widget'ına sahiptir. İki sayfa aynı tag ile Hero içerdiğinde, Flutter aralarındaki geçişi otomatik olarak canlandırır. Bu, mobil bir uygulamada karmaşık animasyon uygulamanın en basit yollarından biridir.

Hero(
    tag: 'profile_avatar',
    child: CircleAvatar(
        backgroundImage: AssetImage('avatar.jpg'),
        radius: 50,
    ),
)

Spring Animation, Interpolator ve Easing

Bir animasyonun doğal görünmesi için hız eğrileri kullanılır — Android'de Interpolator ve iOS'te Easing. Bunlar, animasyon hızının baştan sona nasıl değiştiğini belirler.

Android Interpolator'ları

Android birkaç yerleşik Interpolator'ı destekler: LinearInterpolator (tekdüze), AccelerateDecelerateInterpolator (yavaş-hızlı-yavaş), FastOutSlowInInterpolator (Material Design), OvershootInterpolator (aşırımlı) ve BounceInterpolator (sekmeli). Özel bir Interpolator, XML veya TimeInterpolator sınıfı aracılığıyla oluşturulabilir.

Spring Animation

Spring Animation (yay animasyonu), damping (sönümleme) ve stiffness (sertlik) parametreleriyle yay fiziğini modeller. Sönümleme 0 — sonsuz salınımlar, 1 — salınım yok. Sertlik, dönüş hızını belirler. Spring Animation, iOS (UISpringTimingParameters ile UIViewPropertyAnimator), Android (physics2'den SpringAnimation) ve SwiftUI'de (spring()) mevcuttur.

Android'de Spring Animation dokümantasyonu, ayrıntılı yapılandırma örnekleri içerir.

Zaman Çizelgesi Animasyonu

Timeline (zaman çizelgesi) — animasyonun zaman içinde karelere bölündüğü bir yaklaşım. AnimationSet veya Grup animasyonunun yeterince esnek olmadığı karmaşık diziler için kullanılır. Android AnimatorSet'i, iOS — CAAnimationGroup'u, Flutter — AnimationController'da Interval'i destekler.