Animacija u mobilnom razvoju: šta je to, koje vrste postoje i kako koristiti

Animacija u Android: Property Animation i View Animation

Android pruža dva glavna sistema animacije: View Animation (stariji) i Property Animation (moderni). View Animation (ili Tween Animation) radi samo sa vizuelnom reprezentacijom — menja prikaz View, ali ne i njene stvarne osobine (na primer, koordinate klika ostaju na mestu). Property Animation, predstavljena u Android 3.0, menja stvarne osobine objekta kroz Animator — ValueAnimator, ObjectAnimator ili AnimatorSet.

ObjectAnimator i ValueAnimator

ObjectAnimator je najpopularnija klasa Property Animation. Animira odreðenu osobinu objekta (na primer, translationX, alpha, scaleY) u odreðenom vremenu sa zadatim Interpolator-om.

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

ValueAnimator nije vezan za odreðeni objekat — generiše vrednosti koje se mogu koristiti za bilo koju osobinu ili prilagoðenu logiku.

View Animation i XML animacije

View Animation se opisuje u XML datotekama res/anim/. Podržana su četiri tipa: scale, translate, rotate, alpha. Nedostatak je što animacija ne menja stvarne parametre View. Za jednostavne efekte (treptanje, rotacija) View Animation je i dalje primenljiva, ali za nove projekte preporučuje se Property Animation.

Animacija u Jetpack Compose

Jetpack Compose nudi moderan API za animaciju: animateAsState, Animatable, AnimatedVisibility i AnimatedContent. Animacija u Compose je reaktivna: kada se stanje promeni, animacija se automatski pokreće.

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

Animacija u iOS: Core Animation i UIView.animate

iOS pruža moćan stek animacije zasnovan na Core Animation — niskorazinskom okviru koji radi sa CALayer. UIKit se nadograðuje na Core Animation sa praktičnim metodama UIView.animate i UIViewPropertyAnimator.

UIView.animate

UIView.animate je najjednostavniji način animacije u iOS. Omogućava animiranje frame, alpha, transform, backgroundColor i drugih osobina UIView.

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 — okvir za fizičku animaciju: gravitacija, sudari, opruge, sile privlačenja. Omogućava stvaranje realističnog ponašanja objekata bez ručnog izračunavanja fizike. Koristi se za prilagoðene prelaze, animirane menije i elemente igara.

CAAnimation i Core Animation

Core Animation (CAAnimation, CABasicAnimation, CAKeyframeAnimation) — niskorazinski API za animaciju CALayer. Podržava 3D transformacije, animaciju putanje (keyframe), maskiranje i kompoziciju. SwiftUI koristi Core Animation ispod haube kroz modifikatore animation i 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")

Za većinu iOS projekata koristi se SwiftUI sa svojom ugraðenom animacijom. Na primer, withAnimation obavija promene stanja u animirani kontekst.

Vektorska animacija: Lottie i Rive

Složene animacije (likovi, prelazi, učitavači) teško je implementirati kodom. Lottie i Rive rešavaju ovaj problem omogućavajući dizajnerima da kreiraju animaciju u vizuelnim editorima, a programerima da je ugradje u aplikaciju kao gotovu komponentu.

Lottie

Lottie — biblioteka od Airbnb (sada LottieFiles) koja renderuje animacije iz Adobe After Effects izvezene u JSON formatu. Podržana na Android, iOS, Flutter, React Native i Web. Lottie animacije su vektorske, skaliraju se bez gubitka kvaliteta i mogu se programski prilagoðavati (brzina, napredak, boje).

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

Rive

Rive (ranije 2Dimensions) — napredniji alat za vektorsku animaciju. Za razliku od Lottie, Rive podržava interaktivnu animaciju: stanja, okidače, prelaze. Animacija se kreira u Rive Editor, a u aplikaciji se upravlja kroz State Machine. Rive je pogodan za interfejse igara, animirane ikone i složene prelaze sa povratnom spregom.

U IT Sectr koristimo Lottie za dekorativne animacije (učitavači, uspešne operacije, prazna stanja) i Rive za interaktivne elemente onboarding ekrana. Ovo smanjuje vreme razvoja animacija za 60% u poreðenju sa ručnom implementacijom na UIKit ili Canvas.

Shared Element Transition i Hero Animation

Shared Element Transition — animacija u kojoj se element (slika, tekst, kartica) glatko pomera i transformiše pri prelazu izmeðu ekrana. Ovo stvara iluziju kontinuiteta: korisnik ne "odlazi" na novi ekran, već "uranja" u element.

Android Shared Element Transition

U Android prelaz se implementira kroz ActivityOptionsCompat i atribute transitionName. FragmentTransaction podržava addSharedElement za prelaze unutar Activity. Compose koristi SharedTransitionLayout sa SharedContentState.

iOS Hero Transition

iOS nema ugraðeni Hero Transition, ali biblioteka Hero (od Luke Zhao) implementira ovaj obrazac na UIKit. Jednostavno dodelite id elementima na oba ekrana — Hero æe automatski kreirati gladak prelaz. U SwiftUI, animacija prelaza je ugraðena kroz NavigationStack i matchedGeometryEffect.

Flutter Hero

Flutter ima ugraðeni widget Hero sa parametrom tag. Kada dve stranice sadrže Hero sa istim tag-om, Flutter automatski animira prelaz izmeðu njih. Ovo je jedan od najjednostavnijih načina za implementaciju složene animacije u mobilnoj aplikaciji.

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

Spring Animation, Interpolator i Easing

Da bi animacija izgledala prirodno, koriste se krive brzine — Interpolator u Android i Easing u iOS. One odreðuju kako se brzina animacije menja od početka do kraja.

Android Interpolators

Android podržava nekoliko ugraðenih Interpolator-a: LinearInterpolator (ravnomerno), AccelerateDecelerateInterpolator (sporo-brzo-sporo), FastOutSlowInInterpolator (Material Design), OvershootInterpolator (sa preletanjem) i BounceInterpolator (sa odskokom). Prilagoðeni Interpolator se može kreirati kroz XML ili klasu TimeInterpolator.

Spring Animation

Spring Animation (animacija opruge) modelira fiziku opruge sa parametrima prigušenja (damping) i krutosti (stiffness). Prigušenje 0 — beskrajne oscilacije, 1 — bez oscilacija. Krutost odreðuje brzinu povratka. Spring Animation je dostupna u iOS (UIViewPropertyAnimator sa UISpringTimingParameters), Android (SpringAnimation iz physics2) i SwiftUI (spring()).

Dokumentacija Spring Animation u Android sadrži detaljne primere podešavanja.

Timeline animacija

Timeline (vremenska linija) — pristup u kome se animacija deli na kadrove u vremenu. Koristi se za složene sekvence gde AnimationSet ili grupna animacija nisu dovoljno fleksibilni. Android podržava AnimatorSet, iOS — CAAnimationGroup, Flutter — Interval u AnimationController.