Animația în dezvoltarea mobilă: ce este, ce tipuri există și cum se utilizează

Animația în Android: Property Animation și View Animation

Android oferă două sisteme principale de animație: View Animation (moștenit) și Property Animation (modern). View Animation (sau Tween Animation) funcționează doar cu reprezentarea vizuală — modifică afișarea Vizualizării dar nu și proprietățile sale reale (de exemplu, coordonatele de clic rămân în același loc). Property Animation, introdusă în Android 3.0, modifică proprietățile reale ale obiectului prin Animator — ValueAnimator, ObjectAnimator sau AnimatorSet.

ObjectAnimator și ValueAnimator

ObjectAnimator este cea mai populară clasă Property Animation. Animează o proprietate specifică a obiectului (de exemplu, translationX, alpha, scaleY) pentru un timp specificat cu un Interpolator dat.

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

ValueAnimator nu este legat de un obiect specific — generează valori care pot fi utilizate pentru orice proprietate sau logică personalizată.

View Animation și animații XML

View Animation este descrisă în fișiere XML res/anim/. Patru tipuri sunt acceptate: scale, translate, rotate, alpha. Dezavantajul este că animația nu modifică parametrii reali ai Vizualizării. Pentru efecte simple (clipire, rotație) View Animation este încă aplicabilă, dar pentru proiecte noi se recomandă Property Animation.

Animația în Jetpack Compose

Jetpack Compose oferă o API de animație modernă: animateAsState, Animatable, AnimatedVisibility și AnimatedContent. Animația în Compose este reactivă: când starea se schimbă, animația pornește automat.

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

Animația în iOS: Core Animation și UIView.animate

iOS oferă un stack de animație puternic bazat pe Core Animation — un framework de nivel scăzut care lucrează cu CALayer. UIKit se construiește deasupra Core Animation cu metodele convenabile UIView.animate și UIViewPropertyAnimator.

UIView.animate

UIView.animate este cel mai simplu mod de a anima în iOS. Permite animarea frame, alpha, transform, backgroundColor și a altor proprietăți 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 — un framework pentru animație fizică: gravitație, coliziuni, arcuri, forțe de atracție. Permite crearea de comportamente realiste ale obiectelor fără calcul manual al fizicii. Utilizat pentru tranziții personalizate, meniuri animate și elemente de joc.

CAAnimation și Core Animation

Core Animation (CAAnimation, CABasicAnimation, CAKeyframeAnimation) — o API de nivel scăzut pentru animația CALayer. Suportă transformări 3D, animație de cale (keyframe), mascare și compoziție. SwiftUI utilizează Core Animation sub capotă prin modificatorii 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")

Pentru majoritatea proiectelor iOS se utilizează SwiftUI cu animația sa încorporată. De exemplu, withAnimation învelește schimbările de stare într-un context animat.

Animație vectorială: Lottie și Rive

Animațiile complexe (personaje, tranziții, încărcătoare) sunt dificil de implementat cu cod. Lottie și Rive rezolvă această problemă permițând designerilor să creeze animații în editori vizuali și dezvoltatorilor să le încorporeze în aplicație ca o componentă gata făcută.

Lottie

Lottie — o bibliotecă de la Airbnb (acum LottieFiles) care redă animații din Adobe After Effects exportate în format JSON. Suportată pe Android, iOS, Flutter, React Native și Web. Animațiile Lottie sunt vectoriale, se scalează fără pierdere de calitate și pot fi personalizate programatic (viteză, progres, culori).

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

Rive

Rive (fost 2Dimensions) — un instrument mai avansat pentru animație vectorială. Spre deosebire de Lottie, Rive suportă animație interactivă: stări, declanșatoare, tranziții. Animația este creată în Rive Editor și controlată în aplicație printr-o State Machine. Rive este potrivit pentru interfețe de joc, pictograme animate și tranziții complexe cu feedback.

La IT Sectr folosim Lottie pentru animații decorative (încărcătoare, operațiuni reușite, stări goale) și Rive pentru elemente interactive ale ecranelor de onboarding. Aceasta reduce timpul de dezvoltare a animațiilor cu 60% comparativ cu implementarea manuală cu UIKit sau Canvas.

Shared Element Transition și Hero Animation

Shared Element Transition — o animație în care un element (imagine, text, card) se mișcă și se transformă lin la tranziția între ecrane. Aceasta creează iluzia de continuitate: utilizatorul nu "merge" la un ecran nou, ci "se scufundă" în element.

Android Shared Element Transition

În Android, tranziția este implementată prin ActivityOptionsCompat și atributele transitionName. FragmentTransaction suportă addSharedElement pentru tranziții în cadrul unei Activity. Compose utilizează SharedTransitionLayout cu SharedContentState.

iOS Hero Transition

iOS nu are o Hero Transition încorporată, dar biblioteca Hero (de Luke Zhao) implementează acest model pe UIKit. Atribuiți pur și simplu un id elementelor de pe ambele ecrane — Hero va crea automat o tranziție lină. În SwiftUI, animația de tranziție este încorporată prin NavigationStack și matchedGeometryEffect.

Flutter Hero

Flutter are un widget Hero încorporat cu un parametru tag. Când două pagini conțin Hero cu același tag, Flutter animează automat tranziția între ele. Aceasta este una dintre cele mai simple moduri de a implementa animația complexă într-o aplicație mobilă.

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

Spring Animation, Interpolator și Easing

Pentru ca o animație să pară naturală, se folosesc curbe de viteză — Interpolator în Android și Easing în iOS. Acestea determină cum se schimbă viteza animației de la început la sfârșit.

Interpolatori Android

Android suportă mai mulți Interpolatori încorporați: LinearInterpolator (uniform), AccelerateDecelerateInterpolator (încet-rapid-încet), FastOutSlowInInterpolator (Material Design), OvershootInterpolator (cu depășire) și BounceInterpolator (cu săritură). Un Interpolator personalizat poate fi creat prin XML sau clasa TimeInterpolator.

Spring Animation

Spring Animation (animație cu arc) modelează fizica arcului cu parametrii de amortizare (damping) și rigiditate (stiffness). Amortizare 0 — oscilații infinite, 1 — fără oscilații. Rigiditatea determină viteza de revenire. Spring Animation este disponibilă în iOS (UIViewPropertyAnimator cu UISpringTimingParameters), Android (SpringAnimation din physics2) și SwiftUI (spring()).

Documentația Spring Animation în Android conține exemple detaliate de configurare.

Animație pe axa temporală

Timeline (axa temporală) — o abordare în care animația este împărțită în cadre în timp. Utilizată pentru secvențe complexe unde AnimationSet sau animația de grup nu sunt suficient de flexibile. Android suportă AnimatorSet, iOS — CAAnimationGroup, Flutter — Interval în AnimationController.