Animasi dalam pengembangan seluler: apa itu, jenis apa saja dan cara menggunakannya

Animasi di Android: Property Animation dan View Animation

Android menyediakan dua sistem animasi utama: View Animation (lama) dan Property Animation (modern). View Animation (atau Tween Animation) hanya bekerja dengan representasi visual — ia mengubah tampilan View tetapi tidak mengubah properti aslinya (misalnya, koordinat klik tetap di tempatnya). Property Animation, diperkenalkan di Android 3.0, mengubah properti objek nyata melalui Animator — ValueAnimator, ObjectAnimator atau AnimatorSet.

ObjectAnimator dan ValueAnimator

ObjectAnimator adalah kelas Property Animation yang paling populer. Ia menganimasi properti objek tertentu (misalnya, translationX, alpha, scaleY) selama waktu yang ditentukan dengan Interpolator tertentu.

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

ValueAnimator tidak terikat pada objek tertentu — ia menghasilkan nilai yang dapat digunakan untuk properti atau logika kustom apa pun.

View Animation dan Animasi XML

View Animation dijelaskan dalam file XML res/anim/. Empat jenis didukung: scale, translate, rotate, alpha. Kekurangannya adalah animasi tidak mengubah parameter View yang sebenarnya. Untuk efek sederhana (berkedip, memutar) View Animation masih dapat diterapkan, tetapi untuk proyek baru disarankan menggunakan Property Animation.

Animasi di Jetpack Compose

Jetpack Compose menawarkan API animasi modern: animateAsState, Animatable, AnimatedVisibility dan AnimatedContent. Animasi di Compose bersifat reaktif: ketika status berubah, animasi dimulai secara otomatis.

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)
)

Animasi di iOS: Core Animation dan UIView.animate

iOS menyediakan tumpukan animasi yang kuat berdasarkan Core Animation — kerangka kerja tingkat rendah yang bekerja dengan CALayer. UIKit dibangun di atas Core Animation dengan metode UIView.animate dan UIViewPropertyAnimator yang nyaman.

UIView.animate

UIView.animate adalah cara paling sederhana untuk menganimasi di iOS. Memungkinkan menganimasi frame, alpha, transform, backgroundColor dan properti UIView lainnya.

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 — kerangka kerja untuk animasi fisik: gravitasi, tabrakan, pegas, gaya tarik. Memungkinkan pembuatan perilaku objek realistis tanpa perhitungan fisika manual. Digunakan untuk transisi kustom, menu animasi, dan elemen game.

CAAnimation dan Core Animation

Core Animation (CAAnimation, CABasicAnimation, CAKeyframeAnimation) — API tingkat rendah untuk animasi CALayer. Mendukung transformasi 3D, animasi jalur (keyframe), masking dan komposisi. SwiftUI menggunakan Core Animation di balik layar melalui pengubah animation dan withAnimation.

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")

Untuk sebagian besar proyek iOS, SwiftUI dengan animasi bawaannya digunakan. Misalnya, withAnimation membungkus perubahan status dalam konteks animasi.

Animasi Vektor: Lottie dan Rive

Animasi kompleks (karakter, transisi, pemuat) sulit diimplementasikan dengan kode. Lottie dan Rive memecahkan masalah ini dengan memungkinkan desainer membuat animasi di editor visual dan pengembang menyematkannya ke dalam aplikasi sebagai komponen jadi.

Lottie

Lottie — pustaka dari Airbnb (sekarang LottieFiles) yang merender animasi dari Adobe After Effects yang diekspor dalam format JSON. Didukung di Android, iOS, Flutter, React Native dan Web. Animasi Lottie bersifat vektor, dapat diskalakan tanpa kehilangan kualitas dan dapat disesuaikan secara terprogram (kecepatan, kemajuan, warna).

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

Rive

Rive (sebelumnya 2Dimensions) — alat yang lebih canggih untuk animasi vektor. Tidak seperti Lottie, Rive mendukung animasi interaktif: status, pemicu, transisi. Animasi dibuat di Rive Editor dan dikendalikan dalam aplikasi melalui State Machine. Rive cocok untuk antarmuka game, ikon animasi, dan transisi kompleks dengan umpan balik.

Di IT Sectr kami menggunakan Lottie untuk animasi dekoratif (pemuat, operasi berhasil, status kosong) dan Rive untuk elemen interaktif layar onboarding. Ini mengurangi waktu pengembangan animasi hingga 60% dibandingkan dengan implementasi manual pada UIKit atau Canvas.

Shared Element Transition dan Hero Animation

Shared Element Transition — animasi di mana elemen (gambar, teks, kartu) bergerak dan bertransformasi dengan mulus saat bertransisi antar layar. Ini menciptakan ilusi kontinuitas: pengguna tidak "pergi" ke layar baru, tetapi "jatuh ke dalam" elemen.

Android Shared Element Transition

Di Android transisi diimplementasikan melalui ActivityOptionsCompat dan atribut transitionName. FragmentTransaction mendukung addSharedElement untuk transisi dalam Activity. Compose menggunakan SharedTransitionLayout dengan SharedContentState.

iOS Hero Transition

iOS tidak memiliki Hero Transition bawaan, tetapi pustaka Hero (oleh Luke Zhao) mengimplementasikan pola ini di UIKit. Cukup tetapkan id ke elemen di kedua layar — Hero akan secara otomatis membuat transisi mulus. Di SwiftUI, animasi transisi dibangun melalui NavigationStack dan matchedGeometryEffect.

Flutter Hero

Flutter memiliki widget Hero bawaan dengan parameter tag. Ketika dua halaman berisi Hero dengan tag yang sama, Flutter secara otomatis menganimasi transisi di antara keduanya. Ini adalah salah satu cara paling sederhana untuk mengimplementasikan animasi kompleks dalam aplikasi seluler.

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

Spring Animation, Interpolator dan Easing

Untuk membuat animasi terlihat alami, kurva kecepatan digunakan — Interpolator di Android dan Easing di iOS. Mereka menentukan bagaimana kecepatan animasi berubah dari awal hingga akhir.

Interpolator Android

Android mendukung beberapa Interpolator bawaan: LinearInterpolator (seragam), AccelerateDecelerateInterpolator (lambat-cepat-lambat), FastOutSlowInInterpolator (Material Design), OvershootInterpolator (dengan overshoot) dan BounceInterpolator (dengan pantulan). Interpolator kustom dapat dibuat melalui XML atau kelas TimeInterpolator.

Spring Animation

Spring Animation (animasi pegas) memodelkan fisika pegas dengan parameter redaman (damping) dan kekakuan (stiffness). Redaman 0 — osilasi tak terbatas, 1 — tanpa osilasi. Kekakuan menentukan kecepatan kembali. Spring Animation tersedia di iOS (UIViewPropertyAnimator dengan UISpringTimingParameters), Android (SpringAnimation dari physics2) dan SwiftUI (spring()).

Dokumentasi Spring Animation di Android berisi contoh konfigurasi terperinci.

Animasi Linimasa

Timeline (linimasa) — pendekatan di mana animasi dibagi menjadi bingkai dari waktu ke waktu. Digunakan untuk urutan kompleks di mana AnimationSet atau animasi Grup tidak cukup fleksibel. Android mendukung AnimatorSet, iOS — CAAnimationGroup, Flutter — Interval di AnimationController.